python前端的CSS的效果动画，CSS实现风车转动

最新推荐文章于 2021-12-23 21:04:55 发布

ryipei

最新推荐文章于 2021-12-23 21:04:55 发布

阅读量415

点赞数

分类专栏： CSS 文章标签： CSS

本文链接：https://blog.csdn.net/qq_40739261/article/details/102515843

版权

CSS 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>animation动画效果</title>
    <style type="text/css">
       /*   定义动画    */
       @keyframes moving {          /*   定义动画及名称   */
           from{
               width: 10px;
           }
           to{
               width: 1000px;
           }
       }



       /*      风车定义     */
              @keyframes rotating {
           from{
               transform: rotate(0deg);
           }
           to{
               transform: rotate(360deg);
           }

       }
        .box{
            width: 100px;
            height: 100px;
            background-color: gold;

            animation:moving 300ms ease infinite alternate;/*    该属性为综合属性后面跟着一堆值   */
        }
        .box:hover{
            animation-play-state:paused ;
        }




        /*   风车旋转的样式效果设计   */
        .zhuan{
            display: block;
            width: 500px;
            height: 536px;
            margin: 50px auto 0;

            animation:rotating 500ms linear infinite;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <img src="风车.jpg" alt="风车图片" class="zhuan">

</body>
</html>

********

风车的图片可以自己区网上下载。