几行代码实现页面的淡入特效（css3）

时间 2019-11-17

标签代码实现页面淡入特效 css3 css 栏目 CSS 繁體版

原文原文链接

已经运用到本身的网站上去了，演示就是本站能够看到效果本站在#content实现，利用CSS3动画属性“@keyframes ”可实现动态特效，大部分主流浏览器都支持，在火狐24版、chrome29版、IE10中测试经过。IE9如下浏览不支持此特效。 css


	下面样式能够直接添加到style样式文件中…… web

 
        @ 
        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 
        ; 
        } 
           
        } 
           
        #content {  //换为本身主题的区域ID   
       
        animation 
        : 
          
        fade 
        - 
        in 
        ; 
        /*动画名称*/ 
           
        animation 
        - 
        duration 
        : 
          
        1.5s 
        ; 
        /*动画持续时间*/ 
           
        - 
        webkit 
        - 
        animation 
        : 
        fade 
        - 
        in 
          
        1.5s 
        ; 
        /*针对webkit内核*/ 
           
        }

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

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

演示效果请看本站了…… chrome


	关于@keyframes的扩展讲解浏览器

浏览器支持 ide

目前浏览器都不支持 @keyframes 规则。测试

Firefox 支持替代的 @-moz-keyframes 规则。动画

Opera 支持替代的 @-o-keyframes 规则。网站

Safari 和 Chrome 支持替代的 @-webkit-keyframes 规则。 spa

定义和用法 ci

经过 @keyframes 规则，您可以建立动画。

建立动画的原理是，将一套 CSS 样式逐渐变化为另外一套样式。

在动画过程当中，您可以屡次改变这套 CSS 样式。

以百分比来规定改变发生的时间，或者经过关键词 “from” 和 “to”，等价于 0% 和 100%。

0% 是动画的开始时间，100% 动画的结束时间。

为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。

定义动画时，简单的动画能够直接使用关键字from和to，即从一种状态过渡到另外一种状态：

 
        @ 
        keyframes 
          
        testanimations 
        { 
       
 
             
        from 
        { 
        opacity 
        : 
        1 
        ; 
        } 
       
 
             
        to 
        { 
        opacity 
        : 
        0 
        ; 
        } 
       
 
        } 
       

其中testanimations是该动画的名字，该动画表示某个东西将逐渐消失。

原文地址和演示：http://www.newsky365.com/webcssdanru/