`

CSS3实现页面淡入动画特效代码

阅读更多

利用CSS3动画属性“@keyframes ”可实现一些动态特效

  @keyframes fade-in {  
        0% {opacity: 0;}/*初始状态 透明度为0*/  
        40% {opacity: 0;}/*过渡状态 透明度为0*/  
        100% {opacity: 1;}/*结束状态 透明度为1*/  
    }  
    @-webkit-keyframes fade-in {/*针对webkit内核*/  
        0% {opacity: 0;}  
        40% {opacity: 0;}  
        100% {opacity: 1;}  
    }  
    #wrapper {    
        animation: fade-in;/*动画名称*/  
        animation-duration: 1.5s;/*动画持续时间*/  
        -webkit-animation:fade-in 1.5s;/*针对webkit内核*/  
    } 

 接将上述代码添加到主题style样式文件中,并修改其中 #wrapper 为你的主题ID或类的名称即可。

以上特效在火狐24版、chrome29版、IE10中测试通过。IE9以下浏览不支持此特效。

另外,可针对页面某部分延长显示时间,比如侧边栏,再加上一句:

#sidebar {    
        animation: fade-in;  
        animation-duration: 4s;  
        -webkit-animation:fade-in 1.5s;  
    } 

 同理,可对页面不同的部分设定不同的淡入显示时间,实现分段显示

分享到:
评论

相关推荐

    jQuery基于CSS3文字翻转淡入动画特效

    一款简单的jQuery基于CSS3文字翻转淡入动画特效,文字翻转高亮动画代码。

    css3实现15个动画特效

    纯css3+html实现的15个动画特效,包括淡入淡出、放大、旋转,缩放及各种组合特效等,可分开使用

    jQuery基于CSS3文字翻转淡入动画特效.zip

    有兴趣刚需的可以自己下载,非常实用的jquery代码,可以完美运行,有能力的还可以二次修改!

    jQuery页面滚动文字图片元素淡入动画特效

    一款目前挺多网站用到的jQuery页面滚动文字图片元素淡入动画特效,网页往下滚动时div、img等元素才淡入动画显示出来。

    CSS3黑色主题菜单 菜单项淡入淡出动画

    今天我们要来分享一款简单实用的CSS3菜单,菜单是黑色主题,因此显得非常端庄霸气。由于菜单应用了CSS3特性,...另外还有一个特点就是,鼠标滑过菜单项时将出现淡入淡出的动画特效,是一款很不错的CSS3黑色主题菜单。

    纯CSS3实现淡入淡出下拉菜单.zip

    纯CSS3实现淡入淡出下拉菜单是一款比较简单清新的CSS3下拉菜单,这款下拉菜单是垂直方向的,点击主菜单项可以展开和折叠子菜单,在展开折叠的过程中伴随着淡入淡出的动画效果。

    CSS3动画相册 图片淡入淡出动画效果

    这是一款基于CSS3的动画相册,这样的相册我们之前也分享过不少,比如HTML5 3D立体...今天的这款CSS3相册相对比较实用,当鼠标划过缩略图时,原图片即会以淡入淡出的动画效果展现出来,大家可以将它应用在自己的网站上。

    炫酷纯CSS3星级评分动画特效

    starability.css是一款炫酷纯CSS3星级评分动画特效。该特效中共有6种不同的星级评分动画效果,分别是滑动动画,淡入淡出动画,旋转动画,发光动画和复选框动画。

    带淡入淡出效果的纯CSS3滚动视觉差特效

    这是一款使用纯CSS3制作的带淡入淡出效果的滚动视觉差特效。该视觉差特效在页面加载时,图片有淡入淡出的效果。当页面滚动时,背景图片会有非常炫酷的视觉差效果。

    HTML5 CSS3 淡入淡出动画效果的Tab菜单特效.rar

    HTML5 CSS3 淡入淡出动画效果的Tab菜单特效,圆角风格,同样带有渐变动画效果,整体风格我觉得相当的漂亮,来自国外CSS3达人网站的作品,代码简洁,TAB效果如示例截图所示。

    纯css3炫酷文字动画特效

    这是一款使用纯css3制作的文字动画特效。这款炫酷css3文字特效共有5种效果:上下滚动效果、淡入淡出效果、文字旋转效果、放大缩小效果和3d翻转效果。

    CSS3外观漂亮淡入淡出Tab菜单

    这也是一款用CSS3制作的Tab菜单,菜单的外观很普通,没什么特别,但却十分简单大气。利用CSS3的特性,每一个Tab标签都是圆角的,这让整一个Tab菜单显得相对比较圆润,也更具有立体视觉效果。另外,Tab标签在切换时,...

    纯css3经典tab选项卡动画特效

    这是一款使用纯css3制作的经典tab选项卡动画特效插件。该tab选项卡特效共4种效果:淡入淡出效果、左右滑动效果、渐隐效果和上下滑动效果。

    纯css3带缩略图焦点图淡入淡出切换特效.zip

    代码片段: <input type="radio" name="slide_switch" id="id1"/> <!--Lets show the second image by default on page load--> <input type="radio" name="slide_switch" id="id2...

    c# 源代码可直接运行 实现图片的淡入.淡出.淡入淡出特效

    c#: 之前很容易地做了窗口的淡入淡出特效,之所以容易是因为窗口有opacity属性,可以直接设置。后来查了一些资料,整理得到了实现图片淡入淡出的方法,提供给大家,希望得到一些建议和帮助,谢谢!

    CSS3实现5款文字旋转、放大渐变效果.rar

    CSS3实现5款文字旋转、放大渐变效果,文字在渐变放大动画的过程中,切换显示,看上去像是Flash做出来的文字动画,实际上是基于HTML5技术,实例包中的演示文件,每一个文件对应一种文字效果,请在Chrome下打开逐一...

    CSS3淡入淡出动画的非圆角Tab选项卡.rar

    CSS3 jQuery共同打造的一款个性的Tab选项卡效果,切换时带淡入淡出动画效果,TAB的形状不是常规的矩形,也不是圆角,更像是菱形的,一看就与从不同的感觉,HTML5/CSS3 JQUERY三者共同结合来实现,效果超棒。

    58种jQuery模拟CSS3过渡页面切换特效

    Animsition是一款使用jQuery来实现CSS3动画的页面切换动画特效插件。该页面切换动画特效插件共有58种效果,按大类别来分可以分为:淡入淡出效果、旋转、翻转和放大缩小效果。另外每种效果都对应一种遮罩模式。

Global site tag (gtag.js) - Google Analytics