zoukankan      html  css  js  c++  java
  • css动画

    • 用的属性为animation

      • 实例:

        <!DOCTYPE html>
        <html>
        <head>
        <style> 
        div
        {
        100px;
        height:100px;
        background:red;
        position:relative;
        animation:mymove 5s infinite;  // mymove 动画名字 5s表示运动五秒,infinite表示无限循环
        }
        
        @keyframes mymove
        {
        from {left:0px;}
        to {left:200px;}    
        }
        </style>
        </head>
        <body>
        <div></div>
        </body>
        </html>
        
        
      • animation语法

    描述
    animation-name 规定需要绑定到选择器的 keyframe 名称。。
    animation-duration 规定完成动画所花费的时间,以秒或毫秒计。
    animation-timing-function 规定动画的速度曲线。
    animation-delay 规定在动画开始之前的延迟。
    animation-iteration-count 规定动画应该播放的次数。
    animation-direction 规定是否应该轮流反向播放动画。
    • animation特例

      • 在keyframes中的,0%表示开始位置,100%表示结束位置。

      • 当想要动画结束的位置,可以用:animation-fill-mode。

      • 当想要设置动画只出现一次的时候,至少要有两个过程。

        例子
        .container img{
            animation: photo 5s 1 linear;
            animation-fill-mode: forwards;
        }
        
        @keyframes photo{
            0%{
                bottom: -45px;
            }
            100%{
                bottom: 0px;
            }
        }
        
  • 相关阅读:
    python多进程(一)
    python操作memcached
    python操作redis
    SQLAlchemy总结
    SQLAlchemy-ORM
    python操作mysql二
    python操作mysql
    python正则二
    python正则
    python内置模块(三)
  • 原文地址:https://www.cnblogs.com/MyUniverse/p/12846789.html
Copyright © 2011-2022 走看看