精华内容
下载资源
问答
  • 淡入淡出

    2019-03-21 15:21:34
    淡入淡出效果 淡入就是让元素按照指定的时间出现(显示),淡出就是让元素按照指定的时间隐藏 实现淡入的方法:fadeIn(时间,函数) 实现淡出的方法:fadeOut(时间,函数) 第二个参数就是一个函数,当元素淡入或者...

    淡入淡出效果

    淡入就是让元素按照指定的时间出现(显示),淡出就是让元素按照指定的时间隐藏

    • 实现淡入的方法:fadeIn(时间,函数)
    • 实现淡出的方法:fadeOut(时间,函数)

    第二个参数就是一个函数,当元素淡入或者淡出完毕后会自动触发

    <!--导入JQuery的js文件-->
    		<script src="../js/juery.min.js"></script>
    		<script>
    			$(function(){
    				$("button:eq(0)").click(function(){
    					$("div").fadeIn(2000,function(){
    						alert("div淡入完毕");
    					})
    				})
    				$("button:eq(1)").click(function(event){
    					$("div").fadeOut(2000,function(){
    						alert("div淡出完毕");
    					})
    				})
    			})
    		</script>
    		<style>
    			div{
    				height: 200px;
    				width: 500px;
    				background-color: pink;
    				margin-top: 100px;
    				margin-bottom: 0;
    				margin-left: auto;
    				margin-right: auto;
    				display: none;
    			}
    		</style>
    	</head>
    	<body>
    		<button type="button">淡入</button>
    		<button type="button">淡出</button>
    		<div></div>
    	</body>
    

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    展开全文
  • css淡入淡出_CSS淡入淡出

    千次阅读 2020-08-03 14:21:34
    css淡入淡出Web developers have been using fade ins and fade outs (basic opacity animation) on their website for years, but the effect needed to be accomplished using JavaScript because CSS didn't have...

    css淡入淡出

    Web developers have been using fade ins and fade outs (basic opacity animation) on their website for years, but the effect needed to be accomplished using JavaScript because CSS didn't have the capability to complete animations.  The tides have turned:  CSS fading is now possible thanks to CSS transitions.  Let's take a look basic CSS fading animations!

    Web开发人员多年来一直在其网站上使用淡入和淡出(基本不透明动画),但是必须使用JavaScript才能达到效果,因为CSS无法完成动画。 潮流已经转变:由于CSS过渡,现在CSS褪色成为可能。 让我们看一下基本CSS淡入淡出动画!

    CSS FadeIn和FadeOut (CSS FadeIn and FadeOut)

    The principle behind fading is animating opacity, so the transition will address just that property:

    淡入淡出的原理是动画不透明度,因此过渡将仅处理该属性:

    
    /* fades in upon hover */
    .fadeIn {
    	opacity: 0;
    }
    .fadeIn:hover {
    	opacity: 1;
    }
    
    
    

    The example above illustrates a CSS fade in, while the example below illustrates a fade out:

    上面的示例说明了CSS淡入,而下面的示例说明了淡出:

    
    /* fades in upon hover */
    .fadeIn {
    	opacity: 1;
    }
    .fadeIn:hover {
    	opacity: 0;
    }
    
    
    

    The examples above illustrate CSS fades during hover states, but what if you want to fade an element in or out without relying on use interactions. In this case, CSS animations are the better call:

    上面的示例说明了在悬停状态下CSS淡入,但是如果要在不依赖于使用交互的情况下淡入或淡出元素该怎么办。 在这种情况下,最好使用CSS动画:

    
    /* basic fadein */
    @keyframes fadeIn {
    	0% { opacity: 0 }
    	100% { opacity: 1 }
    }
    
    .fadeIn {
    	animation-name: fadeIn;
    	opacity: 1;
    }
    
    
    

    Add the fadeIn class to the element you'd like to fade in (via JavaScript) and the job is done! A fade out would simply be the inverse of the code above.

    将fadeIn类添加到您要淡入的元素(通过JavaScript)中,工作就完成了! 淡出只是上面代码的反函数。

    CSS fade animations are child's play these days.  CSS is has advanced quickly and there's no need to use JavaScript these days.  Use CSS transitions and fading is easy!

    目前,CSS淡入淡出动画是儿童游戏。 CSS的发展很快,如今已经不需要使用JavaScript。 使用CSS过渡,褪色很容易!

    翻译自: https://davidwalsh.name/css-fade

    css淡入淡出

    展开全文
  • Axure实现淡入淡出效果,axure实现淡入淡出  小伙伴们有可能在各大网站看到淡入淡出效果的动画,比如淘宝、京东,淘宝每天会把各种打折促销、今日推荐、限时抢购等做成淡入淡入或者向右活动等类似翻页的效果...

    Axure实现淡入淡出效果,axure实现淡入淡出


           小伙伴们有可能在各大网站看到淡入淡出效果的动画,比如淘宝、京东,淘宝每天会把各种打折促销、今日推荐、限时抢购等做成淡入淡入或者向右活动等类似翻页的效果放在首页,吸引顾客的眼球,那么如何使用Axure来实现淡入淡出的效果nie,在介绍具体实现的过程之前,小编先简单介绍一下什么叫做淡入淡出。 

           淡入淡出合称淡,电影画面的渐显渐隐。画面由亮转暗,以至完全隐没,这个镜头的末尾叫淡出,也叫渐隐;画面由暗变亮,最后完全清晰,这个镜头的开端叫淡入,又叫渐显。淡出淡入是电影中表示时间 空间转换的一种技巧。在电影中常用“淡”分隔时间空间,表明剧情段落。淡出表示一场戏或一个段落的终结。淡入表示一场戏或一个段落的开始,能使观众产生完整的段落感。“淡”本身不是一个镜头,也不是一个画面,它所表现的,不是形象本身,而只是画面渐隐渐显的过程。它节奏舒缓,具有抒情意味,能够造成富有表现力的气氛。这种技巧,最早是在拍摄时完成的。拍摄时,把摄影机中的遮光器逐渐打开,便得到淡入的效果。当一个镜头将要拍完时,把遮光器慢慢关上,便得到淡出的效果。随着洗印技术的发展,这种技巧转由洗印时印制。接着,小编就来简单的总结一下如何用Axure实现淡入淡出效果。

            第一步,我们来选择一个rectangle来固定我们需要选择图片的大小,如下图所示:

             

             第二步,我们把这个Rectangle转换成动态面板,如下图所示:

             

            第三步,我们给这个动态面板添加四个状态,有需要的小伙伴,可以根据自己的需要来设定相应的状态,具体操作如下:

            

            第四步,我们依次来为每个状态添加图片,如下所示:

            

            第五步,给每个状态都各自添加一张图片,如下图所示:

            

            第六步,我们来设置事件,选择载入时,如下图所示:

            

            第七步,选择完载入时后,我们选择设置面板状态,如下图所示:

            

            第八步,小伙伴可以根据自己的需要,对效果进行相关设置,如下图所示:

            

            其与的三个状态的设置都是重复上面的步骤即可,最终的效果截图如下,小伙伴也可以 点击打开链接查看效果哦:

            

           小编寄语:小编本来想着用FSCapture录制一下动态的效果视频,然后把这个视频转换成gif格式的,但是找了好久没有找到合适的工具,可怜的小伙伴们就看不到动态的淡入淡出的gif图片了,有哪位可爱的小伙伴有合适的工具,欢迎留言告诉小编,小编不胜感激,小编已经把淡入淡出的文件上传到网上,有需要的小伙伴可以点击进行下载。

           Axure,在没有实现具体的某个软件或者系统之前,可以很好的帮助我们同客户进行沟通,然后Axure的能力远远超过我们的想象,她不仅可以实现简单的跳转,显示隐藏,还有很多很多,我们不曾发现的神奇魔力,而这些神奇效果的实现,都需要小伙伴们自己去亲身实践哦!提前祝各位小伙伴端午节快乐`(*∩_∩*)′。

    展开全文
  • 承蒙关注请移触上方蓝字UntitledMarks Rothko我总觉得罗斯科的画都...‍为配合文章‍必须敬上一首我家主公最爱的曲子‍歌曲:Gato作曲:Edgardo Donato乐团:Edgardo Donato演唱:Horacio Lagos年代:1937淡入淡出都...

    承蒙关注请移触上方蓝字

    0382b8af2797ee3ab7e46853633ab0e8.gif

    60c458afc2fe2fb94dd0453a58336f76.png

    Untitled

    Marks Rothko

    我总觉得罗斯科的画都是故弄玄虚。

    上面这幅?

    像不像地球大气之外的黑暗苍穹?

    像不像忧郁的太极之气?

    像不像黑板没擦干净?

    随你怎么说。

    我觉得像淡入淡出。03a4cb1bfb8c4e9d28652c4e85658710.png

    为配合文章必须敬上一首我家主公最爱的曲子

    曲:Gato

    作曲:Edgardo Donato

    乐团:Edgardo Donato

    演唱:Horacio Lagos

    年代:1937

    淡入淡出

    都知道我们家有一只可爱的可卡犬,叫麦兜兜。这个品种具备两个耀眼的光环:一是如小飞象一样的大耳朵,奔跑起来呼扇呼扇地煞有介事。虽没有薄云之翼,却有一颗鸿鹄之心,并始终怀揣此心此情,向你展示它的第二大光环,那就是贪吃,且绝不挑食。尤其以吃东西时的专注最为可贵,即便泰山压顶也浑然不觉。俗话说,专注的男人最帅,我是从麦兜兜身上窥见一斑。

    最近,就在这两个光环之间,我还意外地发现了它的第三个光环:“准时”。这个“准时”给了我不小的触动,方有了你们现在看到的文章。

    因为,它的准时可比人类高级多了。

    首先,麦兜兜心中存有一个神佛不可撼动的信仰,那就是,晚饭一定要吃。晚饭不仅要吃,而且要按时吃。也许人类至今还搞不懂时间和空间到底是相对的还是绝对的问题时,但在麦兜兜心里早已通透,那必然是绝对的。每天晚六点半,固定的书架一隅,标准的“饭饱自视”银碗,都要精确。这还不够,更重要的是晚饭前后,还要配合这份“准时”。

    六点半晚饭,麦兜兜会在三四点左右就开始准备:午觉渐醒,迷朦睡眼;懒腰未半,蓬头歪脸;亦步亦趋,或深或浅;做做瑜伽,扒扒桌前;与君凝视,曰:“小爷饿了,我的饭呢?” 当临近六点半时,我觉得,非《诗·大序》之名句不能道其精髓:“饿动于中而形之于颜。颜值不足,故哼唧之;哼唧之不足,故起立之;起立之不足,不知手之、舞之,足之、蹈之也。” 于是,我就去供饭了。

    20秒饭毕,麦兜兜同学还要做一些善后事宜,巡视,检查,不放弃每一个角落,直至,一干二净,方得休息。多么完整的一个故事,多么让人羡慕的每日坚持。使我敬仰倍加,并给这个过程起了个名字,叫“淡入淡出”。

    ----

    不知人类有没有注意到,其实世上的很多事情,那真正主要的“正文”,其实只占了事件完整过程中极小极小的一部分。但正是这极小的一部分,却在决定着我们人生中90%以上的行为。

    众所周知,淡入淡出是影视中的一个术语。当通过剪辑将多个镜头素材拼接在一起的时候,时间和空间上需要一种转换,以表明段落。所谓“淡”,就是渐渐地、缓缓地感觉。画面的渐显、渐隐;声音的渐强、渐弱。它们都不突兀的将内容引向主题,再从主题中引将出来,形成了一个完整的结构。

    我们在书信中,感受尤为深切。淡入,即是称呼与寒暄的部分;淡出,则是祝福和落款的部分。当你收到一封信,最令人心动的地方就是这前后的挂念,淡淡的,很舒服、很平静。如果没有这淡入淡出,中间的正文就是一篇普通的文章,或记叙,或议论,或抒情,置之何地都无所谓。可是一旦加上这淡入淡出后,文章的性质就变了。不仅有了对象,还有了规则。

    对象是不同的人来人往;规则是怎样来往。儒家管对象叫作“君子与小人”,管规则叫作“礼”;道家管对象叫作“自然”,管规则叫作“道与德”。其实答案很简单,无论它们叫什么,无论什么对象,什么规则,只要保证是一种淡入淡出的感觉,就是好的。所以,君子之礼是宽容的、仁爱的;自然之道是无为的,清净的。因为任何平滑柔和而非突变的发展,都是让人舒服的,喜欢的。人类谁都愿意接受这种舒服的过渡,这是天性。

    于是,我们从这淡入淡出中发现了两个最重要的定理:一是“这才是真正的仪式感”;二是“但它不能占太多时间”。

    仪式感从来不是要完成什么固定的礼节,或者遵循什么特殊的规则;它其实只是在告诉你:“准备好了吗?马上要开始咯。” 之后,你会因为这样一个准备,一个前奏,而变得郑重。

    就足够了。

    吃饭前摆放碗筷的时候;比赛前热身的时候;宴会前着装的时候;节日回忆的时候。这些时候都是仪式感。仪式感是一份希望,是希望将你缓缓地带入正文,又在闭幕或结尾后再将你缓缓地带出来。当你因希望而郑重,自然不会辜负那真正重要的正文部分。

    可惜的是,淡入淡出固然重要,我们竟为此花了太多的时间。所以,下一次,请读多一会书,多研究一会儿你的兴趣,多完成一些你的计划,也多一些休息,多一些享受。

    我们的行为也就不会被束缚那么多了。

    时间,就是这样的慢下来的。

    ----

    要不,就如麦兜兜一样,幸福总是那么短暂。哈哈哈,给主子喂饭去咯。


    视频、图片及部分文字内容源于网络。

    只有文章没有图谁看啊。

    经申请主公同意,

    奉上麦兜兜小飞象视频一段:

    然后他要从窝里出来吃饭,

    还没迈出门就累得睡着了。。。。

    ac77786671d2fc663c83abd84f4c423f.png

    c59fb2efb84e56c5e8800fc850fdd111.png

    3a5306d9c51be414334c269c7b8a3445.gif3a5306d9c51be414334c269c7b8a3445.gif3a5306d9c51be414334c269c7b8a3445.gif

    最后说点别的,

    我除了写文章,

    还会发一些自己认为经典的视频。

    经典到足以改变:

    (点击蓝色字体直接跳转链接:)

    “影响人生” 系列

    1 哲学家罗素访谈节选“对后世人的话”

    2 经济学家弗里德曼三个精彩解答

    3 演员彼特·丁拉基本寧頓大學演讲

    4 物理学家费曼讲解“为什么”的问题

    5 奥黛丽·赫本 “友谊是什么” 

    6 李小龙讲述武术哲学 

    7 埃隆·马斯克讲解“第一性原理” 

    8 演员芦田爱菜谈“信任”

    9 乔布斯斯坦福大学演讲

    10 经济学家哈耶克谈“财富再分配”

    “无与伦比的乐、歌、舞” 系列

    1 邓丽君、王菲 “清平调” 

    2 “提琴魔术师” HAUSER 演奏 “权力的游戏”主题曲 

    夏川里美“泪光闪闪” 

    4 二胡演奏家高韶青“万马奔腾” 

    5 小提琴家大卫·葛瑞特演奏“加勒比海盗”主题曲

    当然

    其实我是个诗人

    128401502ec2c5261489c30d27b81819.png

    小窗深夜光如镜

    观月观人皆自影

    此时此刻又天明

    梦醒一身轻

    ——葉離

    73ae6ebc1ebbe258ea22408ca2135ee0.gif艸世木离隹  |  leavesleaving 

    糟心的今年只剩三个月了。。。。。。。。。。。

    52fbff07c9b3b8b8d059a198effbc6e0.png

    Winter's coming...

    again. 

    展开全文
  • 基本上,这样做是使用相同的alpha值,从0-1逐渐消失,然后使用相同的alpha,从1-0开始,允许两个图像交叉淡入淡出…魔术基本上发生在paintComponent中,使用alpha值和传出图像进入的图像使用1f-alpha.在两个图像之间切换...
  • 使用jQuery淡入淡出链接:dwFadingLinks 更新:jQuery网站今天关闭,这导致我的示例出现了一些问题。 我已经将所有内容都本地化了,现在该示例起作用了。 本周早些时候,我发布了一个MooTools脚本,该脚本在...
  • 易语言Metro风格淡入淡出源码,Metro风格淡入淡出,淡入,淡出
  • Apple淡入淡出效果代码是一款Apple首页淡入淡出效果代码,JS文件较多,适合产品的推荐,很吸引眼球。
  • jq的淡入淡出

    2020-04-10 11:03:40
    淡入淡出
  • 易语言淡入淡出窗口模块源码,淡入淡出窗口模块
  • 原生轮播 淡入淡出

    2018-08-31 15:03:35
    原生轮播 淡入淡出
  • 易语言源码淡入淡出窗口模块.rar 易语言源码淡入淡出窗口模块.rar 易语言源码淡入淡出窗口模块.rar 易语言源码淡入淡出窗口模块.rar 易语言源码淡入淡出窗口模块.rar 易语言源码淡入淡出窗口模块.rar
  • 安卓手机加载淡入淡出效果One of the quickest and easiest websiteperformance optimizationsis decreasing image loading. That means a variety of things, including minifying images with tools like ...
  • jquery淡入淡出

    2013-11-22 11:57:43
    jquery 淡入淡出实例 更好的理解淡入淡出,代码量少,简单易懂
  • 淡入淡出效果_窗体

    2019-06-25 14:36:07
    该Demo实现了窗体的淡入淡出效果,窗口加载和窗口退出的时候,显示淡入淡出效果。
  • 易语言窗口淡入淡出例程源码,窗口淡入淡出例程,SetMouseIn,GetWindowLong,SetWindowLong,SetLayeredWindowAttributes,SetWindowPos
  • js淡入淡出 显示效果

    2018-05-04 14:39:45
    淡入淡出 显示效果,javascript淡入淡出效果,可以根据实际使用情况修改

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 7,635
精华内容 3,054
关键字:

淡入淡出