html5怎么做大风车

html5怎么做大风车,第1张

<!DOCTYPE html>    

<html>    

<head>    

<meta charset="UTF-8">    

<title>动态风车</title>    

<style>    

* {    

margin: 0    

padding: 0    

}    

body {    

background-color: purple    

overflow: hidden    

}    

ul {    

position: relative    

width: 100px    

height: 100px    

top: 100px    

left: 50%    

margin-left: -50px    

transform-style: preserve-3d    

animation: sport 15s linear 0s infinite normal    

}    

ul:hover {    

animation: sport 1.5s linear 0s infinite normal    

}    

@keyframes sport {    

form {    

transform: rotateZ(0deg)    

}    

to {    

transform: rotateZ(360deg)    

}    

}    

ul li {    

position: absolute    

top: 0    

left: 0    

border: 50px solid transparent    

list-style: none    

}    

li.li_1st {    

border-bottom: 50px solid #5697FD    

transform: translateY(-70px) rotateZ(45deg)    

}    

li.a {    

border: 35px solid transparent    

border-bottom: 35px solid #5687E7    

transform: translate(50px,-20px) rotateZ(90deg)    

}    

li.li_2nd {    

border-bottom: 50px solid #A1BD76    

transform: translateX(70px) rotateZ(135deg)    

}    

li.b {    

border: 35px solid transparent    

border-bottom: 35px solid #3AA37A    

transform: translate(50px,50px) rotateZ(180deg)    

}    

li.li_3th {    

border-bottom: 50px solid #FFB12C    

transform: translateY(70px) rotateZ(225deg)    

}    

li.c {    

border: 50px solid transparent    

border-bottom: 50px solid #FFCD34    

transform: translate(0px,0px) rotateZ(45deg)    

z-index: 1    

}    

li.li_4th {    

border-bottom: 50px solid #EF7A64    

transform: translateX(-70px) rotateZ(315deg)    

}    

li.d {    

border: 35px solid transparent    

border-bottom: 35px solid #C1523E    

transform: translate(-20px,-20px) rotateZ(0deg)    

}    

div.e {    

position: relative    

width: 10px    

height: 200px    

background-color: gray    

top: 50px    

left: 49.5%    

z-index: -1    

}    

</style>    

</head>    

<body>    

<div class="box">    

<ul>    

<li class="li_1st"></li>    

<li class="a"></li>    

<li class="li_2nd"></li>    

<li class="b"></li>    

<li class="li_3th"></li>    

<li class="c"></li>    

<li class="li_4th"></li>    

<li class="d"></li>    

</ul>    

<div class="e"></div>    

</div>    

</body>    

</html>

<div style = "height:500pxwidth:500pxposition:staticfloat:left">

<div class="wrap">

<div class="red"></div>

<div class="yellow"></div>

<div class="pink"></div>

<div class="cyna"></div>

</div>

<div class="limb"></div>

</div>

<div style = "height:500pxwidth:500pxposition:staticfloat:left">

<div class="wrap">

<div class="red"></div>

<div class="yellow"></div>

<div class="pink"></div>

<div class="cyna"></div>

</div>

<div class="limb"></div>

</div>

<div style = "height:500pxwidth:500pxposition:staticfloat:left">

<div class="wrap">

<div class="red"></div>

<div class="yellow"></div>

<div class="pink"></div>

<div class="cyna"></div>

</div>

<div class="limb"></div>

</div>

<div style = "height:500pxwidth:500pxposition:staticfloat:left">

<div class="wrap">

<div class="red"></div>

<div class="yellow"></div>

<div class="pink"></div>

<div class="cyna"></div>

</div>

<div class="limb"></div>

</div>

<style>

div{ border-radius: 50%position: absolute}

.red{

border-top:100px solid red

border-right: 100px solid transparent

border-bottom: 100px solid transparent

border-left: 100px solid red

transform:rotate(-45deg)

left:150px

top:50px

}

.yellow{

border-top:100px solid yellow

border-right: 100px solid transparent

border-bottom: 100px solid transparent

border-left: 100px solid yellow

left:250px

top:150px

transform:rotate(45deg)

}

.pink{

border-top:100px solid pink

border-right: 100px solid transparent

border-bottom: 100px solid transparent

border-left: 100px solid pink

left:150px

top:250px

transform:rotate(135deg)

}

.cyna{

border-top:100px solid cyan

border-right: 100px solid transparent

border-bottom: 100px solid transparent

border-left: 100px solid cyan

left:50px

top:150px

transform:rotate(-135deg)

}

@keyframes run{

from{transform: rotate(0deg)}

to{transform: rotate(360deg)}

}

@-webkit-keyframes run{

from{transform: rotate(0deg)}

to{transform: rotate(360deg)}

}

.wrap{

width: 500px

height: 500px

line-height: 500px

text-align: center

border-radius: 0

position: relative

margin:0 auto

animation:run 2s linear infinite

}

.limb{

width: 10px

height: 300px

border-radius: 0

background-color: #000

margin: 0 auto

left: 245px

top: 0

margin-top: -250px

position: static

z-index: -1

}

<\style>


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/8371465.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-15
下一篇 2023-04-15

发表评论

登录后才能评论

评论列表(0条)

保存