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

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" href="css/common.css">
        <style type="text/css">
            .xiaoming {
                position: absolute;
                top: 100px;
                left: 100px;
                animation: name1 2s infinite;
            }
            @keyframes name1 {
                0%{
                    top:200px;
                }
                10%{
                    top: 800px;
                    left: 800px;
                    transform: rotate(180deg);
                }
                60%{
                    top: 400px;
                    left: 400px;
                    transform: rotate(180deg);
                }
                100%{
                    top: 100px;
                    left: 100px;
                }
            }
        </style>
    </head>
    <body>
    
    <div class="xiaoming">
        <img src="http://img30.360buyimg.com/jr_image/jfs/t3943/198/1201160477/17676/4e4ae11/586b5b09N6c946d97.jpg" alt="">
    </div>
    
    </body>
    </html>
    光盘旋转案例//
    <!
    DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> .xiaoming { position: absolute; top: 100px; left: 100px; animation: go 4s infinite linear;
                /*infinite无限的,也可写数字几次*/
                /*linear匀速*/
            }
            @keyframes go {
                0%{
                    transform: rotate(0deg);
                }
                100%{
                    transform: rotate(360deg);
                }
            }
        </style>
    </head>
    <body>
        <div class="xiaoming">
            <img src="images/cd.png" alt="">
        </div>
    </body>
    </html>
  • 相关阅读:
    HDOJ 450题留念
    有关VIM的一些笔记
    hdu 2715
    POJ 1004
    链表的创建,添加结点,打印...
    C++ 静态数据成员小谈
    自定义String类
    sizeof/strlen小论
    多态之重载多态运算符重载那些事
    01背包问题
  • 原文地址:https://www.cnblogs.com/-CLAY-/p/animation.html
Copyright © 2011-2022 走看看