zoukankan      html  css  js  c++  java
  • 2d旋转(css3实现过度效果和动画效果)

    效果:

      

    源码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style type="text/css">
            *{
                margin: 0px;
                padding: 0;
            }
            .box{
                width: 240px;
                margin: 100px auto;
            }
            /*过度效果*/
            /*.qq{*/
                /*transition: all 1s;*/
            /*}*/
            /*.qq:hover{*/
                /*transform: rotate(360deg);*/
            /*}*/
            /*动画效果*/
            .qq:hover{
                animation: zhuan 0.1s linear infinite;
            }
            @-webkit-keyframes zhuan {
                from{
                    transform: rotate(0);
                }to{
                transform: rotate(360deg);
                             }
            }
        </style>
    </head>
    <body>
        <div class="box">
            <img src="zhuan.jpg" alt="" class="qq">
        </div>
    <script type="text/javascript">
    
    </script>
    </body>
    </html>

    图片:

  • 相关阅读:
    Python人工智能之路
    Flask最强攻略
    Flask最强攻略
    Flask最强攻略
    Flask最强攻略
    Flask最强攻略
    Flask最强攻略
    Flask最强攻略
    Flask最强攻略
    Flask最强攻略
  • 原文地址:https://www.cnblogs.com/alex-xxc/p/10397805.html
Copyright © 2011-2022 走看看