zoukankan      html  css  js  c++  java
  • css实现div一直旋转

    看到音乐播放器播放界面的唱片一直旋转,突然想到在网页中的一直旋转效果,所有特地查了一下分享出来

    这是一个静态的div,然后把它旋转动起来。效果请看右上角的音乐播放按键一样。

    代码如下:

    <html>
    <head>
    <meta charset="UTF-8">
    <script src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.min.js"></script>
    <style>
    #xuanzhun{
     -webkit-transition-property: -webkit-transform;
        -webkit-transition-duration: 1s;
        -moz-transition-property: -moz-transform;
        -moz-transition-duration: 1s;
        -webkit-animation: rotate 3s linear infinite;
        -moz-animation: rotate 3s linear infinite;
        -o-animation: rotate 3s linear infinite;
        animation: rotate 3s linear infinite;
    }
    @-webkit-keyframes rotate{from{-webkit-transform: rotate(0deg)}
        to{-webkit-transform: rotate(360deg)}
    }
    @-moz-keyframes rotate{from{-moz-transform: rotate(0deg)}
        to{-moz-transform: rotate(359deg)}
    }
    @-o-keyframes rotate{from{-o-transform: rotate(0deg)}
        to{-o-transform: rotate(359deg)}
    }
    @keyframes rotate{from{transform: rotate(0deg)}
        to{transform: rotate(359deg)}
    }
    </style>
    </head>
    <body>
    <div id="xuanzhun" style=" 30px; height: 30px; background-color: aquamarine;">
        
    </div>
    </body>
    </html>

    最重要的是style中的css部分。

  • 相关阅读:
    pyinstaller打包Django项目
    一文览遍Lua
    6. Z 字形变换
    leetcode 5. 最长回文子串
    leetcode 4. 寻找两个正序数组的中位数
    leetcode 3. 无重复字符的最长子串
    leetcode 2.两数相加
    leetcode 1. 两数之和
    线上又炸了
    EasyNetQ 不同框架序列化反序列化问题
  • 原文地址:https://www.cnblogs.com/feipengting/p/9173770.html
Copyright © 2011-2022 走看看