制作旋轉小風車
一 我先搭建一個大盒子400x400px大盒子里面嵌套四個小盒子200x200px,放在一起肯定是四個排在一行,我想要的效果是上下各兩個,
css樣式
*{
margin:0;
padding:0;
}
box{
display:flex;/*將容器設置為伸縮盒,和設置float效果一樣*/
flex-wrap:wrap;/*換行*/
margin:0 auto;
width:400px;
height:400px;
}
.box1{
width:200px;
height:200px;
background:red;
}
.box2{
width:200px;
height:200px;
background:yellow;
}
.box3{
width:200px;
height:200px;
background:green;
}
.box4{
width:200px;
height:200px;
background:purple;
}
body內容
<body>
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</div>
</body>
二 我現在要把小盒子(正方形)變成半圓用到border-radius,變成半圓之后,半圓可能不會在你想要的位置用margin-top和margin-left作調整,給一個圓心讓它定位放置在風車的中心.(1 如果不知道如何設置半圓,有弧度的位置是數字沒弧度的位置設0 px 2半弧對應的直徑,以直徑為參考點直徑位置上為0px,弧度所對應的位置為多少像素)
CSS樣式
.box{
display:flex;/*將容器設置為伸縮盒,和設置float效果一樣*/
flex-wrap:wrap;/*換行*/
margin:0 auto;
width:400px;
height:400px;
border:1px solid red;/*把小盒子放到大盒子,有了邊框看起來清楚*/
}
.circle{
position:absolute;/*絕對*/
left:188px;
top:189px;
width:25px;
height:25px;
border-radius:25px;
background:#000;
}
.box1{
width:200px;
height:100px;
background:red;
border-radius:100px 100px 0 0;/*左上角,右上角,右下角,左下角*/
margin-top:100px;
}
.box2{
width:100px;
height:200px;
background:yellow;
border-radius:0 100px 100px 0;
}
.box3{
width:100px;
height:200px;
background:green;
border-radius:100px 0 0 100px;
margin-top:200px;
margin-left:-200px;
}
.box4{
width:200px;
height:100px;
background:purple;
border-radius: 0 0 100px 100px ;
margin-top:200px;
}
三 最后給大盒子動畫效果,這樣小風車就做好啦!
前面代碼看不清楚沒關系,下面是所有的代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>旋轉的風車</title>
<style>
*{
margin:0;
padding:0;
}
@keyframes animation{
from{
transform:rotate(0deg)
}
to{
transform:rotate(360deg);
}
}
.box{
display:flex;/*將容器設置為伸縮盒,和設置float效果一樣*/
flex-wrap:wrap;/*換行*/
margin:0 auto;
width:400px;
height:400px;
/*border:1px solid red;*/
position:relative;/*相對*/
animation-name:animation;/*動畫名稱*/
animation-duration:1s;/*動畫持續時間*/
animation-iteration-count:infinite;/*循環次數infinite無限循環*/
animation-timing-function:linear;/*動畫的過度類型 linear線性過渡*/
}
.box:hover{
animation-play-state:paused;/*當鼠標按下時暫停*/
}
.circle{
position:absolute;/*絕對*/
left:188px;
top:189px;
width:25px;
height:25px;
border-radius:25px;
background:#000;
}
.box1{
width:200px;
height:100px;
background:red;
border-radius:100px 100px 0 0;/*左上角,右上角,右下角,左下角*/
margin-top:100px;
}
.box2{
width:100px;
height:200px;
background:yellow;
border-radius:0 100px 100px 0;
}
.box3{
width:100px;
height:200px;
background:green;
border-radius:100px 0 0 100px;
margin-top:200px;
margin-left:-200px;
}
.box4{
width:200px;
height:100px;
background:purple;
border-radius: 0 0 100px 100px ;
margin-top:200px;
}
</style>
</head>
<body>
<div class="box">
<div class="circle"></div>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</div>
</body>
</html>
但願給迷茫中的你一點提示