html花瓣旋转成花,CSS 风车（花瓣）旋转动画圆角

这是一个综合的案例，用到了transition(动画，动作在单位时间内完成)，transform(旋转)，border-radius(圆角)，absolute(定位)，linear-gradient(线性渐变),box-shadow(阴影)。

这里记录一下备忘，贴出源码，方便下次使用时理解，粘贴代码可以直接可以看效果。

Title

/*禁用所有元素的内外边距*/

*{

margin: 0;

padding: 0px;

}

/*禁用浏览器的滚动条*/

html,body{

height:100%;

overflow: hidden;

}

/*初始最外层的容器*/

#wrapper{

height:100%;

overflow: auto;

}

/*居中定位*/

#wrap{

position: absolute;

top:0px;

left:0px;

bottom:0px;

right:0px;

margin: auto;

width: 456px;

height: 456px;

/*150 s 完成动画(选装48000 度)*/

transition: 150s;

}

/*鼠标悬浮开启动画*/

#wrap:hover{

transform: rotate(48000deg);

}

/* > 代表直接下属的子元素*/

#wrap > div{

position: relative;

width: 150px;

height:150px;

/**/

float: left;

border-radius: 0 100%;

/*box-shadow: 10px 10px pink;*/

/*border: solid 1px black;*/

background-image: linear-gradient(deeppink,white);

}

/*选中直接下属的第一个子元素*/

#wrap > div:nth-child(1){

top:75px;

left:75px;

background-image: linear-gradient(green,pink);

}

#wrap > div:nth-child(2){

top: 43px;

right: 10px;

transform: rotate(40deg);

background-image: linear-gradient(yellow,pink);

}

#wrap > div:nth-child(3){

top: 63px;

right: 91px;

transform: rotate(80deg);

background-image: linear-gradient(red,pink);

}

#wrap > div:nth-child(4){

left: 256px;

top: -29px;

transform: rotate(120deg);

background-image: linear-gradient(orange,pink);

}

#wrap > div:nth-child(5){

left: 97px;

top: 43px;

transform: rotate(160deg);

background-image: linear-gradient(green,pink);

}

#wrap > div:nth-child(6){

left: -106px;

top: 95px;

transform: rotate(200deg);

background-image: linear-gradient(yellow,pink);

}

#wrap > div:nth-child(7){

left: 124px;

top: -51px;

transform: rotate(240deg);

background-image: linear-gradient(red,pink);

}

#wrap > div:nth-child(8){

left: -89px;

top: -92px;

transform: rotate(280deg);

background-image: linear-gradient(orange,pink);

}

#wrap > div:nth-child(9){

left: -259px;

top: -163px;

transform: rotate(320deg);

background-image: linear-gradient(#00ff80,pink);

/*width:75px;*/

}

#wrap > div:nth-child(9){

left: -259px;

top: -163px;

transform: rotate(320deg);

}

原文：https://www.cnblogs.com/spqin/p/12939912.html