<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<title>test</title> | |
<style> | |
* { | |
margin: 0; | |
padding: 0; | |
} | |
/* | |
风车 | |
*/ | |
.windmill { | |
width: 200px; | |
height: 400px; | |
margin-top: -20px; | |
margin-left: auto; | |
margin-right: auto; | |
transform: scale(0.5); | |
} | |
.windmill_mill { | |
width: 200px; | |
height: 200px; | |
position: relative; | |
} | |
@keyframes zhuang { | |
from { | |
transform: rotate(0deg); | |
} | |
to { | |
transform: rotate(-360deg); | |
} | |
} | |
.windmill_mill div:nth-child(1) { | |
position: absolute; | |
top: 0; | |
left: 0; | |
border: 55px solid transparent; | |
border-bottom-color: red; | |
border-left-color: red; | |
border-bottom-left-radius: 50%; | |
} | |
.windmill_mill div:nth-child(2) { | |
position: absolute; | |
top: 0; | |
right: 0; | |
border: 55px solid transparent; | |
border-top-color: green; | |
border-left-color: green; | |
border-top-left-radius: 50%; | |
} | |
.windmill_mill div:nth-child(3) { | |
position: absolute; | |
bottom: 0; | |
left: 0; | |
border: 55px solid transparent; | |
border-bottom-color: blue; | |
border-right-color: blue; | |
border-bottom-right-radius: 50%; | |
} | |
.windmill_mill div:nth-child(4) { | |
position: absolute; | |
bottom: 0; | |
right: 0; | |
border: 55px solid transparent; | |
border-top-color: yellow; | |
border-right-color: yellow; | |
border-top-right-radius: 50%; | |
} | |
.windmill_mill div:nth-child(5) { | |
position: absolute; | |
bottom: 86px; | |
right: 86px; | |
border: 14px solid pink; | |
border-radius: 50%; | |
} | |
.windmill_stock { | |
width: 8px; | |
height: 300px; | |
background-color: black; | |
position: absolute; | |
top: 25%; | |
margin-top: -4px; | |
left: 50%; | |
margin-left: -4px; | |
} | |
/* | |
轮播 | |
*/ | |
.tab { | |
width: 800px; | |
height: 300px; | |
margin: 50px auto; | |
/*background-color: black;*/ | |
overflow: hidden; | |
} | |
.tab:hover ul{ | |
animation:paused; | |
} | |
.tab ul { | |
list-style: none; | |
width: 1800px; | |
animation: move 5s linear infinite; | |
position: relative; | |
} | |
.tab ul:hover li{ | |
width: 150px; | |
z-index: 999; | |
} | |
@keyframes move { | |
from { | |
left: 0; | |
} | |
to { | |
left: -1000px; | |
} | |
} | |
.tab ul li { | |
width: 200px; | |
height: 300px; | |
float: left; | |
z-index: 0; | |
} | |
.tab ul li:hover{ | |
width: 400px; | |
} | |
.tab ul li:hover .windmill_mill{ | |
animation: zhuang 0.5s linear infinite; | |
} | |
.tab ul li:nth-child(1) { | |
background-color: #ffc3b6; | |
} | |
.tab ul li:nth-child(2) { | |
background-color: #d7ffac; | |
} | |
.tab ul li:nth-child(3) { | |
background-color: #b4d4ff; | |
} | |
.tab ul li:nth-child(4) { | |
background-color: #ffc2ff; | |
} | |
.tab ul li:nth-child(5) { | |
background-color: #fffec8; | |
} | |
.tab ul li:nth-child(6) { | |
background-color: #ffc3b6; | |
} | |
.tab ul li:nth-child(7) { | |
background-color: #d7ffac; | |
} | |
.tab ul li:nth-child(8) { | |
background-color: #b4d4ff; | |
} | |
.tab ul li:nth-child(9) { | |
background-color: #ffc2ff; | |
} | |
</style> | |
</head> | |
<body> | |
<div class="tab"> | |
<ul> | |
<li><div class="windmill"> | |
<div class="windmill_stock"></div> | |
<div class="windmill_mill"> | |
<div></div> | |
<div></div> | |
<div></div> | |
<div></div> | |
<div></div> | |
</div> | |
</div></li> | |
<li></li> | |
<li></li> | |
<li></li> | |
<li></li> | |
<li></li> | |
<li></li> | |
<li></li> | |
<li></li> | |
</ul> | |
</div> | |
<div class="windmill"> | |
<div class="windmill_stock"></div> | |
<div class="windmill_mill"> | |
<div></div> | |
<div></div> | |
<div></div> | |
<div></div> | |
<div></div> | |
</div> | |
</div> | |
</body> | |
</html> |
3
最新推荐文章于 2024-03-07 00:49:52 发布