欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS3 制作旋轉(zhuǎn)的大風(fēng)車(充滿童年回憶)

  發(fā)布時(shí)間：2013-01-30 18:19:55   作者：佚名   我要評(píng)論
很久以前的作品,于是就使用css3做了個(gè)于是就做了個(gè)充滿童年回憶的大風(fēng)車的大風(fēng)車,感興趣的朋友可以了解下啊，或許對(duì)你學(xué)習(xí)css3動(dòng)畫有所幫助，好了，話不多說(shuō)，看代碼
發(fā)一個(gè)很久以前的作品，當(dāng)開始得知CSS3可以做動(dòng)畫時(shí)，就很想玩玩，于是就做了個(gè)充滿童年回憶的大風(fēng)車。

提示：您可以先修改部分代碼再運(yùn)行

HTML：

復(fù)制代碼
代碼如下:

<div class="windmill">
<div class="red"></div>
<div class="yellow"></div>
<div class="blue"></div>
<div class="green"></div>
<div class="dot"></div>
</div>

實(shí)現(xiàn)過(guò)程：首先來(lái)一個(gè)容器里面四個(gè)風(fēng)扇、 一個(gè)中心點(diǎn) 結(jié)構(gòu)很簡(jiǎn)單，使用絕對(duì)分別定好位。然后再使用border-radius把風(fēng)扇矩形變成半圓，形狀就有了，再分別給其上色，紅黃藍(lán)綠四種漸變顏色。最后給容器加個(gè)animation使整個(gè)容器開始旋轉(zhuǎn)即可。
CSS：

復(fù)制代碼
代碼如下:

.windmill{
padding:10px; width:400px; height:400px; position:relative;
animation-name:moveWindmill;
animation-duration:4s;
animation-timing-function:linearanimation-delay:0;
animation-iteration-count:infinite;
animation-play-state:running;
/* 動(dòng)畫: */
-moz-animation-name:moveWindmill;
-moz-animation-duration:4s;
-moz-animation-timing-function:linear;
-moz-animation-delay:0;
-moz-animation-iteration-count:infinite;
-moz-animation-play-state:running;
-webkit-animation-name:moveWindmill;
-webkit-animation-duration:4s;
-webkit-animation-timing-function:linear;
-webkit-animation-delay:0;
-webkit-animation-iteration-count:infinite;
-webkit-animation-play-state:running;
-ms-animation-name:moveWindmill;
-ms-animation-duration:4s;
-ms-animation-timing-function:linear;
-ms-animation-delay:0;
-ms-animation-iteration-count:infinite;
-ms-animation-play-state:running;
}
.windmill div{ position:absolute; width:100px; height:50px;left:50%; top:50%; border-radius:0 0 50px 50px ; -moz-transform-origin:0% 0%;-webkit-transform-origin:0% 0%;-ms-transform-origin:0% 0%;}
.windmill .red{ background-color:red; background: -moz-radial-gradient(right, circle,red , #000);
background: -webkit-radial-gradient(right, circle,red , #000);
}
.windmill .yellow{transform:rotate(90deg); -ms-transform:rotate(90deg); -moz-transform:rotate(90deg); -webkit-transform:rotate(90deg); background-color:yellow; background: -moz-radial-gradient(right, circle,yellow , #000); background: -webkit-radial-gradient(right, circle,yellow , #000); background: -ms-radial-gradient(right, circle,yellow , #000);}
.windmill .blue{transform:rotate(180deg);-ms-transform:rotate(180deg); -moz-transform:rotate(180deg); -webkit-transform:rotate(180deg); background-color:blue; background: -moz-radial-gradient(right, circle,blue , #000); background: -webkit-radial-gradient(right, circle,blue , #000); }
.windmill .green{transform:rotate(270deg); -ms-transform:rotate(270deg);-moz-transform:rotate(270deg);-webkit-transform:rotate(270deg); background-color:green; background:radial-gradient(right, circle,green , #000);background: -moz-radial-gradient(right, circle,green , #000); background: -webkit-radial-gradient(right, circle,green , #000); background: -ms-radial-gradient(right, circle,green , #000); }.windmill .dot{ width:50px; height:50px; border-radius:50px ; position:absolute; left:50%;top:50%; margin-left:-25px; margin-top:-25px;background:#fff; background: -moz-radial-gradient(center, circle,#fff , #666); background: -webkit-radial-gradient(center, circle,#fff , #666);}
@keyframes moveWindmill /* Firefox */
{
% { -ms-transform: rotate(0deg)}
% { -ms-transform: rotate(90deg)}
% { -ms-transform: rotate(180deg)}
% { -ms-transform: rotate(270deg)}
% { -ms-transform: rotate(360deg)}
}
@-ms-keyframes moveWindmill /* ms*/
{
% { -ms-transform: rotate(0deg)}
% { -ms-transform: rotate(90deg)}
% { -ms-transform: rotate(180deg)}
% { -ms-transform: rotate(270deg)}
% { -ms-transform: rotate(360deg)}
}
@-webkit-keyframes moveWindmill /*webkit*/
{
% { -webkit-transform: rotate(0deg)}
% { -webkit-transform: rotate(90deg)}
% { -webkit-transform: rotate(180deg)}
% { -webkit-transform: rotate(270deg)}
% { -webkit-transform: rotate(360deg)} }
@-moz-keyframes moveWindmill /* Firefox */
{
% { -moz-transform: rotate(0deg)}
% { -moz-transform: rotate(90deg)}
% { -moz-transform: rotate(180deg)}
% { -moz-transform: rotate(270deg)}
% { -moz-transform: rotate(360deg)}
}

相關(guān)文章

最新評(píng)論