CSS3 做大风车
2019-09-25 本文已影响0人
北冥有鱼_425c
<style>
body,div,ul,li {
padding: 0;
margin: 0;
list-style: none;
}
.box01 {
width: 700px;
height: 700px;
margin: 0 auto;
position: absolute;
bottom: 0;
left: 400px;
}
.boxtop {
width: 400px;
height: 400px;
display: flex;
flex-wrap: wrap;
animation: myAni 3s linear infinite;
}
.boxbott {
width: 12px;
height: 500px;
background: #333;
position: relative;
left: 188px;
top: -200px;
z-index: -2;
border-top-left-radius: 2px;
border-top-right-radius: 6px;
}
.list01 {
width: 100px;
height: 200px;
background: red;
position: relative;
left: 100px;
border-top-left-radius: 100px;
border-bottom-left-radius: 100px;
}
.list02 {
width: 200px;
height: 100px;
position: relative;
top: 100px;
left: 100px;;
background: orange;
border-top-left-radius: 100px;
border-top-right-radius: 100px;
}
.list03 {
width: 100px;
height: 200px;
position: relative;
top: 200px;
right: 100px;
background: yellow;
border-top-right-radius: 100px;
border-bottom-right-radius: 100px;
}
.list04 {
width: 200px;
height: 100px;
background: green;
position: relative;
bottom: 50px;
border-bottom-right-radius: 100px;
border-bottom-left-radius: 100px;
}
@keyframes myAni {
from{
transform: rotate(0deg);
}
to{
transform: rotate(-360deg);
}
}
</style>
</head>
<body>
<div class="box01">
<ul class="boxtop">
<li class="list01"></li>
<li class="list02"></li>
<li class="list03"></li>
<li class="list04"></li>
</ul>
<div class="boxbott"></div>
</div>
</body>
