zoukankan      html  css  js  c++  java
  • CSS3 animation属性 实现转动效果

    
    
    <!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <meta charset="utf-8">
        <title>旋转效果</title>
        <style>


            div {
                100%;
                margin:50px auto;
                text-align: center;

            }

            img {
                 200px;
                height: 200px;
                border-radius: 100px;
                animation: run 5s linear infinite;
                -webkit-animation: run 5s linear infinite;
                animation-play-state: running;
                -webkit-animation-play-state: running;
            }

            img:hover {
                animation-play-state: paused;
                -webkit-animation-play-state: paused;
            }

            @keyframes run {
                0% {
                    transform: rotate(0deg);
                }

                100% {
                    transform: rotate(360deg);
                }
            }

            @-webkit-keyframes run {
                0% {
                    transform: rotate(0deg);
                }

                100% {
                    transform: rotate(360deg);
                }
            }
        </style>
    </head>

    <body>
        <div>
            <img src="bg.png" />
        </div>
    </body>

    </html>
     
  • 相关阅读:
    t=20点击发送pingback
    Hibernate 序列生成主键
    oracle创建存储过程
    mysql允许某ip访问
    ORACLE用户解锁
    oracle查询锁表
    oracle杀掉执行的死循环存储过程
    oracle以逗号分隔查询结果列表
    查询oracle的session数
    oracle存储过程-获取错误信息
  • 原文地址:https://www.cnblogs.com/lwming/p/11576041.html
Copyright © 2011-2022 走看看