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

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
    .test{
    background-image:url("man.png");
    70px;
    height:163px;
    -webkit-animation-timing-function:steps(3,start);
    animation-timing-function:steps(3,start);
    -webkit-animation-duration:.2s;
    animation-duration:.2s;
    -webkit-animation-name:m1fly;
    animation-name:m1fly;
    -webkit-animation-delay:.5s;
    animation-delay:.5s;
    animation-iteration-count:infinite;
    -webkit-animation-iteration-count:infinite;
    animation-direction:alternate;
    -webkit-animation-direction:alternate;
    transform-style:preserve-3d;
    }
    @-webkit-keyframes m1fly {
    0% {
    background-position: 0 0
    }
    100% {
    background-position: 210px 0
    }
    }

    @keyframes m1fly {
    0% {
    background-position: 0 0
    }
    100% {
    background-position: 210px 0
    }
    }
    </style>
    </head>
    <body>
    <div class="test">

    </div>
    </body>
    </html>

    man.png

    
    
  • 相关阅读:
    jQuery
    jQuery
    jQuery
    jQuery
    jQuery 遍历- 过滤:缩小搜索元素的范围
    jQuery 遍历
    jQuery 遍历
    jQuery 遍历
    jQuery 遍历:jQuery 遍历 什么是遍历?
    jQuery 尺寸:处理元素和浏览器窗口的尺寸
  • 原文地址:https://www.cnblogs.com/geekjsp/p/9937761.html
Copyright © 2011-2022 走看看