正值初夏,用CSS教你画夏天常玩的四彩小风车

2022-11-30 157

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 正值初夏,用CSS教你画夏天常玩的四彩小风车

我正在参加「初夏创意投稿大赛」详情请看：初夏创意投稿大赛

实现思路

一个盒子中有4个盒子,代表了四个叶片,叶片是一边圆的,通过边框圆角属性实现,每个页片中有俩种不同的颜色,通过伪元素的方式实现另一个盒子,通过定位和边框圆角属性实现俩种不同颜色,定位属性是以上一个拥有定位属性的元素作为基准点的,我们可以利用这一个特点,叶片父元素相对定位,叶片绝对定位的方式定位到合适的位置

中心白色原点通过存放叶片大盒子中的伪元素实现,避免层级结构太过繁琐

棍棍通过额外的一个标签实现,和叶片大盒子并列

风车可以转动,通过css动画属性实现

页面结构

<!-- 风车 Start -->
    <div class="windmill">
    <!-- 叶片 Start -->
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      <!-- 叶片 End -->
    </div>
      <!-- 小棍棍  Start-->
      <i class="windmill_stick"></i>
      <!-- 小棍棍  End-->
    <!-- 风车 End -->

这里需要先给大盒子设置下样式,以便于定位叶片位置

.windmill {
            width: 700px;
            height: 700px;
            margin: 0 auto;
            position: relative;
            z-index: 99;
            }

叶片轮廓

通过给一个盒子设置宽高,左上角边框圆角为90%实现这种效果

.windmill>div {
            width: 100px;
            height: 150px;
            background: red;
            border-top-right-radius: 95%;
        }

叶片样式实现

叶片给边框颜色实现边框的和内容不同色的效果,然后再通过伪元素的方式实现俩种不同颜色,也需要给伪元素添加边框颜色,这样可以做出一个分区的效果,伪元素是行内元素,所以使用了浮动脱离了标准流,可以给伪元素设置宽和高

.windmill>div {
            box-sizing: border-box;
            width: 100px;
            height: 150px;
            background: rgb(255, 227, 101);
            border-top-right-radius: 95%;
            border: 3px solid rgb(255, 158, 18);
            overflow: hidden;
        }
        .windmill>div::after {
            width: 100%;
            height: 100%;
            content: '';
            float: left;
            background: rgb(255, 243, 192);
            border-bottom-right-radius: 100%;
            border-bottom: 3px solid rgb(255, 158, 18);
            border-right: 3px solid rgb(255, 158, 18);
        }

叶片不同样式实现

由于每个叶片的颜色不一样,我们通过css属性选择器给每个风车的叶片添加上颜色分区的效果

.windmill>div {
            width: 100px;
            height: 150px;
            background: rgb(255, 227, 101);
            border-top-right-radius: 95%;
            border: 3px solid rgb(255, 158, 18);
            overflow: hidden;
        }
        .windmill>div::after {
            width: 100%;
            height: 100%;
            content: '';
            float: left;
            background: rgb(255, 243, 192);
            border-bottom-right-radius: 100%;
            border-bottom: 3px solid rgb(255, 158, 18);
            border-right: 3px solid rgb(255, 158, 18);
        }
        .windmill>div:nth-child(2) {
            background: rgb(255, 142, 103);
            border: 3px solid rgb(255, 105, 134);
        }
        .windmill>div:nth-child(2)::after {
            background: rgb(253, 208, 228);
            border-bottom: 3px solid rgb(255, 105, 134);
            border-right: 3px solid rgb(255, 105, 134);
        }
        .windmill>div:nth-child(3) {
            background: rgb(48, 203, 255);
            border: 3px solid rgb(44, 150, 255);
        }
        .windmill>div:nth-child(3)::after {
            background: rgb(131, 211, 255);
            border-bottom: 3px solid rgb(44, 150, 255);
            border-right: 3px solid rgb(44, 150, 255);
        }
        .windmill>div:nth-child(4) {
            background: rgb(95, 226, 158);
            border: 3px solid rgb(53, 186, 140);
        }
        .windmill>div:nth-child(4)::after {
            background: rgb(164, 255, 216);
            border-bottom: 3px solid rgb(53, 186, 140);
            border-right: 3px solid rgb(53, 186, 140);
        }

小圆点的实现

这里通过叶片大盒子的伪元素实现小圆点的效果,设置一个边框颜色,采用边框圆角属性实现圆得效果

.windmill::after {
            content: "";
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #fff;
            border: 3px solid rgb(134, 89, 69);
        }

小棍棍的实现

这个盒子需要和叶片大盒子同级,因为大盒子最后要添加一个动画效果,如果添加上去的话会导致棍棍跟着旋转

.windmill_stick {
            position: absolute;
            top: 400px;
            left: 50%;
            width: 10px;
            height: 290px;
            background: rgb(97, 56, 40);
        }

叶片摆放

通过css旋转属性,旋转出不同摆放位置的角度,在通过给子绝父相的方式把叶片的位置摆放好

.windmill {
            width: 700px;
            height: 700px;
            margin: 0 auto;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 99;
        }
        .windmill::after {
            content: "";
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #fff;
            border: 3px solid rgb(134, 89, 69);
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 99;
        }
        .windmill>div {
            box-sizing: border-box;
            position: absolute;
            top: 28%;
            left: 33%;
            width: 100px;
            height: 150px;
            background: rgb(255, 227, 101);
            border-top-right-radius: 95%;
            border: 3px solid rgb(255, 158, 18);
            overflow: hidden;
            transform: translate(50%) rotate(-45deg);
            z-index: 9;
        }
        .windmill>div::after {
            width: 100%;
            height: 100%;
            content: '';
            float: left;
            background: rgb(255, 243, 192);
            border-bottom-right-radius: 100%;
            border-bottom: 3px solid rgb(255, 158, 18);
            border-right: 3px solid rgb(255, 158, 18);
        }
        .windmill>div:nth-child(2) {
            background: rgb(255, 142, 103);
            border: 3px solid rgb(255, 105, 134);
            top: 15%;
            left: 56%;
            transform: translate(0, 100%) rotate(45deg);
            z-index: 10;
        }
        .windmill>div:nth-child(2)::after {
            background: rgb(253, 208, 228);
            border-bottom: 3px solid rgb(255, 105, 134);
            border-right: 3px solid rgb(255, 105, 134);
        }
        .windmill>div:nth-child(3) {
            background: rgb(48, 203, 255);
            border: 3px solid rgb(44, 150, 255);
            top: 30%;
            left: 46%;
            transform: translate(0, 100%) rotate(136deg);
            z-index: 11;
        }
        .windmill>div:nth-child(3)::after {
            background: rgb(131, 211, 255);
            border-bottom: 3px solid rgb(44, 150, 255);
            border-right: 3px solid rgb(44, 150, 255);
        }
        .windmill>div:nth-child(4) {
            background: rgb(95, 226, 158);
            border: 3px solid rgb(53, 186, 140);
            top: 21%;
            left: 30%;
            transform: translate(0, 100%) rotate(-135deg);
        }
        .windmill>div:nth-child(4)::after {
            background: rgb(164, 255, 216);
            border-bottom: 3px solid rgb(53, 186, 140);
            border-right: 3px solid rgb(53, 186, 140);
        }
        .windmill_stick {
            position: absolute;
            top: 400px;
            left: 50%;
            width: 10px;
            height: 290px;
            background: rgb(97, 56, 40);
        }

风车的转动

我们通过css动画属性@keyframes实现风车转动的效果,我们让他转速快一些就设置1000度

@keyframes windmillRotate {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(1000deg);
            }
        }

最后把动画添加给风车叶片的大盒子

.windmill {
            animation: windmillRotate 5s linear infinite;
        }

正值初夏,用CSS教你画夏天常玩的四彩小风车

实现思路

页面结构

叶片轮廓

叶片样式实现

叶片不同样式实现

小圆点的实现

小棍棍的实现

叶片摆放

风车的转动

最终效果

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

正值初夏,用CSS教你画夏天常玩的四彩小风车

实现思路

页面结构

叶片轮廓

叶片样式实现

叶片不同样式实现

小圆点的实现

小棍棍的实现

叶片摆放

风车的转动

最终效果

热门文章

最新文章

相关课程

相关电子书

相关实验场景