【css3】动画大风车

最新推荐文章于 2021-09-17 21:30:18 发布

精灵福将马国成

最新推荐文章于 2021-09-17 21:30:18 发布

阅读量305

点赞数

本文链接：https://blog.csdn.net/weixin_42705570/article/details/87813784

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<style>
    
.box{
    width: 0;
    height: 0;
    border-left: 100px solid yellow;
    border-right: 100px solid red;
    border-bottom: 100px solid green;
    border-top: 100px solid pink;
    border-radius: 50%;
    /*调用动画集*/
    animation-name: rotate;
    /*设置动画时间*/
    animation-duration: 2s;
    /*设置动画执行次数,无限循环*/
    animation-iteration-count: infinite;
    /*设置动画执行速度*/
    animation-timing-function: linear;
    /*动画逆波*/
    animation-direction: alternate;
    /*设置动画延时*/
    animation-delay: 1s;
    /*设置动画结束时候的状态*/
    animation-fill-mode: forwards;

    /*也可以一起设置*/
    /*animation: ;*/
}

.box:hover{
    animation-play-state: paused;
}

/*1.定义动画集*/

@keyframes rotate{
    /*定义开始状态 0%*/
    from{
        transform: rotateZ(0deg);
        /*transform: translate(0px);*/
    }
    /*定义结束状态 100%*/
    to{
        transform: rotateZ(360deg);
        /*transform: translate(200px);*/
    }
}

</style>
<body>
    <div class="box">
        
    </div>
</body>
</html>