正值初夏,用CSS教你畫夏天常玩的四彩小風車
theme: scrolls-light
我正在參加「初夏創意投稿大賽」詳情請看：初夏創意投稿大賽
實現思路
一個盒子中有4個盒子,代表了四個葉片,葉片是一邊圓的,通過邊框圓角屬性實現,每個頁片中有倆種不同的顏色,通過偽元素的方式實現另一個盒子,通過定位和邊框圓角屬性實現倆種不同顏色,定位屬性是以上一個擁有定位屬性的元素作為基準點的,我們可以利用這一個特點,葉片父元素相對定位,葉片絕對定位的方式定位到合適的位置
中心白色原點通過存放葉片大盒子中的偽元素實現,避免層級結構太過繁瑣
棍棍通過額外的一個標籤實現,和葉片大盒子並列
風車可以轉動,通過css動畫屬性實現
頁面結構
```js
<div class="windmill">
<!-- 葉片 Start -->
<div></div>
<div></div>
<div></div>
<div></div>
<!-- 葉片 End -->
</div>
<!-- 小棍棍 Start-->
<i class="windmill_stick"></i>
<!-- 小棍棍 End-->
<!-- 風車 End -->
```
這裡需要先給大盒子設定下樣式,以便於定位葉片位置
```js .windmill { width: 700px; height: 700px; margin: 0 auto; position: relative; z-index: 99; }
```
葉片輪廓
通過給一個盒子設定寬高,左上角邊框圓角為90%實現這種效果
js
.windmill>div {
width: 100px;
height: 150px;
background: red;
border-top-right-radius: 95%;
}
葉片樣式實現
葉片給邊框顏色實現邊框的和內容不同色的效果,然後再通過偽元素的方式實現倆種不同顏色,也需要給偽元素新增邊框顏色,這樣可以做出一個分割槽的效果,偽元素是行內元素,所以使用了浮動脫離了標準流,可以給偽元素設定寬和高
```js .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屬性選擇器給每個風車的葉片新增上顏色分割槽的效果
```js .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);
}
```
小圓點的實現
這裡通過葉片大盒子的偽元素實現小圓點的效果,設定一個邊框顏色,採用邊框圓角屬性實現圓得效果
js
.windmill::after {
content: "";
width: 20px;
height: 20px;
border-radius: 50%;
background: #fff;
border: 3px solid rgb(134, 89, 69);
}
小棍棍的實現
這個盒子需要和葉片大盒子同級,因為大盒子最後要新增一個動畫效果,如果新增上去的話會導致棍棍跟著旋轉
js
.windmill_stick {
position: absolute;
top: 400px;
left: 50%;
width: 10px;
height: 290px;
background: rgb(97, 56, 40);
}
葉片擺放
通過css旋轉屬性,旋轉出不同擺放位置的角度,在通過給子絕父相的方式把葉片的位置擺放好
```js .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度
```js
@keyframes windmillRotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(1000deg);
}
}
```
最後把動畫新增給風車葉片的大盒子
js
.windmill {
animation: windmillRotate 5s linear infinite;
}
最終效果
我把程式碼放到碼上掘金上了,大家快來看看吧 程式碼片段 小風車承載著我們童年時夏天的回憶,祝大家開開心心每一天,給個讚唄