zoukankan      html  css  js  c++  java
  • animation动画汇总(一阶段项目)

    animation 属性

    动画属性:

    1、animation-name:规定需要绑定到选择器的 keyframe 名称。

    2、animation-duration:规定完成动画所花费的时间,以秒或毫秒计。

    3、animation-timing-function:规定动画的速度曲线。

    4、animation-delay:规定在动画开始之前的延迟。

    5、animation-iteration-count:规定动画应该播放的次数。

    6、animation-direction:规定是否应该轮流反向播放动画。

    实例:

    1、流星效果:

    .start1{
        left: 1000px;
        width: 170px;
        height: 170px;
        position: absolute;
        margin: 0px;
        background:url(../../img/95858PICKE3.png);
        background-size: 170px 170px;
        animation:mymove1 3s infinite,fadeIn1 3s infinite;/*无限播放*/
        animation-delay:0s;
        animation-timing-function: linear;/*动画匀速进行*/
    }
    /*移动动画*/
    @-webkit-keyframes mymove1
    {
        from {left:1100px;top:50px}
        to {left:900px;top:250px}
    }
    /*关键帧改变透明度*/
    @-webkit-keyframes fadeIn1 {
    0% {
        opacity: 0; /*初始状态 透明度为0*/
    }
    50% {
        opacity: 0.5; /*中间状态 透明度为0.5*/
    }
    100%,24% {
        opacity: 0; /*结尾状态 透明度为0*/
        }
    }

    规定两个动画同时进行,使两者同步

    2、时钟效果

    /*指针div*/
    .zhizhen{
    position: absolute;
    top: 180px;
    left: 220px;
    width: 300px;
    height: 300px;
    background: url(../../img/img_index.png)no-repeat;
    animation-duration: 2s;/*动画时长*/
    animation-timing-function: ease;/*动画执行一次*/
    animation-delay: 0s;/*动画间隔*/
    animation-direction: normal;/*动画正常播放*/
    animation-fill-mode: both;/*动画保持在最后一帧*/
    animation-iteration-count: 1;/*动画次数*/
    animation-play-state: running;/*动画进行*/
    animation-name: watchHand;/*动画名称*/
    }
    /*指针摆动效果*/
    @-webkit-keyframes watchHand{
        0% {
            transform: rotate(0deg);
        }
        70% {
            transform: rotate(253deg);
        }
        80% {
            transform: rotate(248deg);
        }
        90% {
            transform: rotate(251deg);
        }
        100% {
            transform: rotate(250deg);/*旋转角度*/
        }
    }

    3、数字翻动效果

    /*数字翻动动画*/
    .shuzi_1{
        width: 40px;
        height:50px;
        position: absolute;
        top: 400px;
        left: 335px;
        overflow: hidden;
        background: url(../../img/watch_numb.png);
        animation-duration: 1.5s;/*动画时长4s*/
        animation-timing-function: steps(6, end);/*动画分为六部进行过渡,在完成6次过度停止*/
        animation-delay: 0s;/*动画等待时间*/
        animation-direction: normal;/*动画正常播放*/
        animation-fill-mode: both;/*动画保持在最后一帧*/
        animation-iteration-count: 1;/*动画次数*/
        animation-play-state: running;/*动画进行*/
        animation-name: watchNumb1;/*动画名称*/
    }
    @-webkit-keyframes watchNumb1{
        0% {
            background-position: 0px 0px;
        }
        100% {
            background-position: 0px -300px;/*位置移动*/
        }
    }
    .shuzi_2{
        width: 40px;
        height:50px;
        position: absolute;
        top: 400px;
        left: 375px;
        overflow: hidden;
        background: url(../../img/watch_numb.png);
        animation-duration: 0.5s;/*动画时长0.5s*/
        animation-timing-function: steps(10, end);/*动画分为十部进行过渡,在完成十次过渡停止*/
        animation-delay: 0s;/*动画等待时间*/
        animation-direction: normal;/*动画正常播放*/
        animation-fill-mode: none;/*动画正常进行*/
        animation-iteration-count: 3;/*动画次数*/
        animation-play-state: running;/*动画进行*/
        animation-name: watchNumb2;/*动画名称*/
    }
    @-webkit-keyframes watchNumb2{
        0% {
            background-position: 0px 0px;
        }
        100% {
            background-position: 0px -500px;/*位置移动*/
        }
    }

    衍申:利用div的超出隐藏和position定位改变可以实现许多动画效果

  • 相关阅读:
    C# 集合类 :(Array、 Arraylist、List、Hashtable、Dictionary、Stack、Queue)
    "Isa"与"Hasa"
    Access、SQLite、HSQLDB、Sybase、MySQL、DB4O比较
    C#反射(二)
    跳出语句
    C#反射(一)
    返回集合使用IEnumerable<>还是IList<>
    理解C#值类型与引用类型
    WF4 Beta2 工作原理
    Interesting thing with WF4 Activity Scheduling
  • 原文地址:https://www.cnblogs.com/Ace-suiyuan008/p/9280151.html
Copyright © 2011-2022 走看看