前言

兴趣是最好的老师。让我们一起在玩闹中学习吧，上次做了一个idol旋转魔方，这次做个旋转风车吧，学以致用，熟能生巧。

提示：以下是本篇文章正文内容，下面案例可供参考

一、知识点

背景线性渐变：

语法：
background：linear-gradient（起始方向，颜色1，颜色2，…）;
background：-webkit-linear-gradient（left，red，blue）;（兼容性）
background：-webkit-linear-gradient（left top，red，blue）;（方向）

二、制作步骤

首先设置一个300*300大小的盒子box；
里面装4个小盒子hezi，用于设置隐藏超出盒子的部分；
最里面分别再装4个span来制作风车的半圆，使用border-radio属性来设置圆角，margin来设置半圆的位置；
最后就是中间添加一个正方形的固定器；
风车颜色的部分使用了背景线性渐变来制作的；

三、详细代码

CSS代码如下（示例）：

* {margin: 0;padding: 0;}.box {position: relative;display: flex;flex-wrap: wrap;width: 300px;height: 300px;margin: 100px auto;animation: rotate 2s linear infinite;}.center {position: absolute;top: 140px;left: 140px;width: 20px;height: 20px;background-color: rgb(87, 87, 87);}.box .hezi {display: flex;width: 150px;height: 150px;overflow: hidden;}.box .hezi:nth-child(1) span {width: 150px;height: 150px;margin-top: 75px;border-radius: 50% 50% 0 0;background: -webkit-linear-gradient( left top, rgb(90, 211, 90), #fff);}.box .hezi:nth-child(2) span {width: 150px;height: 150px;margin-left: -75px;border-radius: 0 50% 50% 0;background: -webkit-linear-gradient( left top, rgb(233, 79, 194), #fff);}.box .hezi:nth-child(3) span {width: 150px;height: 150px;margin-left: -75px;border-radius: 0 50% 50% 0;background: -webkit-linear-gradient( left top, rgb(93, 210, 240), #fff);}.box .hezi:nth-child(3) {transform: rotate(180deg);}.box .hezi:nth-child(4) span {width: 150px;height: 150px;margin-top: -75px;border-radius: 0 0 50% 50%;background: -webkit-linear-gradient( right top, rgb(252, 201, 91), #fff);}@keyframes rotate {0% {}100% {transform: rotate(360deg);}}

HTML代码如下（示例）：

 <div class="box"><div class="hezi"><span></span></div><div class="hezi"><span></span></div><div class="hezi"><span></span></div><div class="hezi"><span></span></div><div class="center"></div></div>

效果如下（示例）：

博主会不定期更新一些有趣好玩的小案例来和大家分享学以致用的快乐。喜欢的朋友建议收藏学习。

CSS3——旋转小风车相关推荐

css3之制作旋转小风车
下面教大家做一个旋转小风车,所用知识与我上一篇的爱心特效有相似之处,大家可以看看我前面发的文章,好了,下面就展示我的代码吧 <!DOCTYPE html> <html> < ...
android旋转不重绘,Android自定义view仿微信刷新旋转小风车
本文实例为大家分享了Android仿微信刷新旋转小风车具体代码,供大家参考,具体内容如下不太会录像,没办法,智能截图了不多说了,直接上代码 package com.shipneg.demoysp ...
纯CSS实现炫酷旋转小风车
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>旋转小 ...
css2d之旋转小风车
<head><meta charset="UTF-8"><title>小风车</title><style>.parent ...
Android 仿微信刷新旋转小风车自定义view
不太会录像,没办法,智能截图了不多说了,直接上代码 package com.shipneg.demoysp.demo;import android.content.Context; import a ...
python制作旋转小风车
import turtle as t t.goto(100,0) for i in range(100): t.left(80) t.fd(100) t.left(135) t.fd(165) t.l ...
CSS3制作旋转的小风车
制作旋转小风车一我先搭建一个大盒子400x400px大盒子里面嵌套四个小盒子200x200px,放在一起肯定是四个排在一行,我想要的效果是上下各两个, css样式 *{margin:0;paddi ...
可控制转速CSS3旋转风车特效
以前制作网页动画一般使用javascript,现在已经有越来越多动动画使用纯CSS实现,并且动画的控制也可以使用CSS3实现,因为CSS 3来了,CSS 3的动画功能确实强大.以下是一个纯CSS3制作 ...
如何用css3实现简单旋转的风车
如何用css3实现简单旋转的风车在DW中想要实现旋转的风车就要使用关键帧keyframes来设置旋转,其实也没什么难度的.先设置它的样式,然后要用定位把它放到合适的位置就可以了. HTML的代码如下 ...

CSS3——旋转小风车

文章目录

前言

一、知识点

二、制作步骤

三、详细代码

CSS3——旋转小风车相关推荐

最新文章

热门文章