31.《html+css3实现风车旋转效果》

最新推荐文章于 2024-08-23 10:56:54 发布

@逆风微笑代码狗

最新推荐文章于 2024-08-23 10:56:54 发布

阅读量2.5k

点赞数

分类专栏：笔记文章标签： css3 html

本文链接：https://blog.csdn.net/qq_44864082/article/details/107193095

版权

笔记专栏收录该内容

45 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>day02</title>
</head>
<style>
    body{
        background-color: black;
    }
    .wrap{
        width: 700px;
        height: 700px;
       margin: 200px auto;
       position: relative;    
    }
    .wrap_box1{
        position: relative;
        width: 300px;
        height: 300px;
        z-index: 2;
        animation: change 2s linear infinite;
    }
    @keyframes change{
        100%{
            transform: rotate(360deg);
        }
    }
    .feng1, .feng2{
        position: absolute;
        width: 300px;
        height: 30px;
        background-color: white;
        border-radius: 50%;
    }
    .feng1{
        top: 135px;
        transform: rotate(90deg);
    }
    .feng2{
        position: absolute;
        top: 135px;
    }
    .juxing{
        position: absolute;
        top: 150px;
        left: 135px;
        width: 30px;
        height: 300px;
        background-color: green;
   
    }
</style>
<body>
    <div class="wrap">
        <div class="wrap_box1">
            <div class="feng1"></div>
            <div class="feng2"></div>
        </div>
       
        <div class="juxing"></div>
    </div>
</body>
</html>