纯CSS实现-小风车

最新推荐文章于 2024-08-20 15:49:45 发布

周粥舟轴

最新推荐文章于 2024-08-20 15:49:45 发布

阅读量222

点赞数

文章标签： css css3 javascript

本文链接：https://blog.csdn.net/qq_48438492/article/details/121338748

版权

分享一个最近拿CSS动画效果，手敲的小风车
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小风车</title>
    <style>
        .box{
            width: 400px;
            height: 400px;
            position: relative;
            transition: 1s;
            animation: fengche 1.5s infinite linear 1s;
            
        }
        .box-m{
            width: 400px;
            height: 400px;
            position: relative;
            transition: 1s;
            animation: fengche 2.3s infinite linear 1s;
            
        }
        .box-k{
            width: 400px;
            height: 400px;
            position: relative;
            transition: 1s;
            animation: fengche 0.7s infinite linear 1s;           
        }
        #zjh{
            width: 0px;
            height: 0px;
            border-width: 100px;
            border-style: solid;
            border-color:#FFCCCC  transparent transparent transparent;
            position: absolute;
            top: 200px;
            
           
        }
        #zjh1{
            width: 0px;
            height: 0px;
            border-width: 100px;
            border-style: solid;
            border-color:transparent  #0099CC transparent transparent;
            position: absolute;       
        }
        #zjh2{
            width: 0px;
            height: 0px;
            border-width: 100px;
            border-style: solid;
            border-color:transparent transparent #996699 transparent;
            position: absolute;
            left: 200px;       
        }
        #zjh3{
            width: 0px;
            height: 0px;
            border-width: 100px;
            border-style: solid;
            border-color:transparent transparent transparent #339933;
            position: absolute;
            top: 200px;
            left: 200px;       
        }
        #zjh4{
            width: 3px;
            height: 450px;
            background-color: black;
            position: absolute;
            top: 207px;
            left: 207px;

        }
        /* .box:hover{
            transform: rotate(360deg);
        } */
        @keyframes fengche{
            /* 25%{
                transform: rotate(90deg);
            } */
            /* 50%{
                transform: rotate(180deg);
            } */
            /* 75%{
                transform: rotate(270deg);
            } */
            100%{
                transform: rotate(360deg);
            }
        }
        img{
            position: absolute;
            top: 195px;
            left: 195px;
        }
        #btn{
            width: 320px;
            height: 300px;
            position: relative;
            top: 0px;
            left: 500px;
            border: 1px solid red;
            background-color: rgb(141,152,205);
            border-radius: 50px;
            
        }
        #btn1{
            position: absolute;
            left: 20px;
            top: 40px;
            width: 80px;
            height: 30px;
            border-radius: 20px;
            color: #6d8346;
            background-color: #cde6c7;
        }
        #btn2{
            position: absolute;
            left: 120px;
            top: 40px;
            width: 80px;
            height: 30px;
            border-radius: 20px;
            background-color: #f58220;
            color: #fedcbd;
        }
        #btn3{
            position: absolute;
            left: 220px;
            top: 40px;
            width: 80px;
            height: 30px;
            border-radius: 20px;
            background-color: #f05b72;
            color: #f8aba6;
        }
        #btn>img{
            width: 220px;
            height: 210px;
            position: absolute;
            left: 40px;
            top: 80px;
        }
        #btn1:hover{
            box-shadow: 3px 3px 5px #9d9087 inset;
        }
        #btn2:hover{
            box-shadow: 3px 3px 5px #9d9087 inset;
        }
        #btn3:hover{
            box-shadow: 3px 3px 5px #9d9087 inset;
        }

    </style>
</head>
<body>
    <div class="box">
    <div id="zjh"></div>
    <div id="zjh1"></div>
    <div id="zjh2"></div>
    <div id="zjh3"></div>
    </div>
    <div id="zjh4"></div>
    <img src="../imgs/太阳.png">

    <div id="btn">
        <button id="btn1">慢速</button>
        <button id="btn2">中速</button>
        <button id="btn3">快速</button>
        <img src="../imgs/猫爪.png">
    </div>
    <script>
        var btn1 = document.querySelector('#btn1');
        var btn2 = document.querySelector('#btn2');
        var btn3 = document.querySelector('#btn3');
        var box = document.querySelector('.box');

        btn1.addEventListener('click',function(){
            box.className = 'box-m';

        })
        btn2.addEventListener('click',function(){
            box.className = 'box';

        })
        btn3.addEventListener('click',function(){
            box.className = 'box-k';

        })


    </script>
    
    


</body>
</html>

图片地址：↓

太阳&&猫爪

周粥舟轴

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
纯CSS实现-小风车

分享一个最近拿CSS动画效果，手敲的小风车<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&g
复制链接

扫一扫