html5 摆动的花朵,CSS3实现一个旋转的花朵
要效果圖如下：
實現原理：
其實很簡單，就是中間的圓圈定位在中間，其他的6個圓圈，進行不同的絕對定位，然后進行旋轉！
代碼：
CSS實現的旋轉的花朵*{
margin: 0;
padding: 0;
}
*,*:before,*:after{
box-sizing: border-box;
}
html body{
height: 100%;
}
.container {
background: #f39c12;
height: 300px;
position: relative;
}
.loader{
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
.loader .spinnerBlock{
-webkit-animation: rotate 1000ms linear infinite;
animation: rotate 1000ms linear infinite;
-webkit-transform-origin: center;
transform-origin: center;
display: block;
width: 50px;
height: 50px;
}
.loader span{
display: block;
border: 2px solid #fff;
border-radius: 50%;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
}
.loader soan:nth-child(1){
border-color: #eee;
}
.loader span:nth-child(2){
left: -18px;
top: 10px;
}
.loader span:nth-child(3){
left: -18px;
top: -10px;
}
.loader span:nth-child(4){
left: 0;
top: -18px;
}
.loader span:nth-child(5){
left: 18px;
top: -10px;
}
.loader span:nth-child(6){
left: 18px;
top: 10px;
}
.loader span:nth-child(7){
left: 0;
top: 18px;
}
@-webkit-keyframes rotate {
from{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to{
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes rotate {
from{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to{
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
運行代碼便能看到完整的旋轉效果！
總結
以上是生活随笔為你收集整理的html5 摆动的花朵,CSS3实现一个旋转的花朵的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 要启用实时(jit)调试 该应用计算机,
- 下一篇： CSS 基本样式