zoukankan      html  css  js  c++  java
  • 利用CSS3制作淡入淡出动画效果

     

    CSS3新增动画属性“@-webkit-keyframes”,从字面就可以看出其含义——关键帧,这与Flash中的含义一致。

    利用CSS3制作动画效果其原理与Flash一样,我们需要定义关键帧处的状态效果,由CSS3来驱动产生动画效果。

    下面讲解一下如何利用CSS3制作淡入淡出的动画效果。具体实例可参考刚进入本站时的淡入效果

    1. 定义动画,名称为fadeIn

    @-webkit-keyframes fadeIn {
    0% {
    opacity: 0; /*初始状态 透明度为0*/
    }
    50% {
    opacity: 0; /*中间状态 透明度为0*/
    }
    100% {
    opacity: 1; /*结尾状态 透明度为1*/
    }
    }

    2.  在ID或类中增加如下的动画代码

    #box
    {-webkit-animation-name: fadeIn; /*动画名称*/
    -webkit-animation-duration: 3s; /*动画持续时间*/
    -webkit-animation-iteration-count: 1; /*动画次数*/
    -webkit-animation-delay: 0s; /*延迟时间*/}

    通过上面的代码即可实现淡入淡出的动画效果,代码具体的含义已在注释中注明。

  • 相关阅读:
    bzoj 4660
    bzoj 4668
    二项式反演学习笔记
    bzoj 3622
    bzoj 5306
    bzoj 3625
    任意模数NTT(二)
    bzoj 4913
    bzoj 3456
    多项式问题之五——多项式exp
  • 原文地址:https://www.cnblogs.com/aimyfly/p/3135233.html
Copyright © 2011-2022 走看看