css3.0 圖形構(gòu)成實例練習(xí)二

發(fā)布時間：2013-03-19 10:45:03 作者：佚名

css3.0 的出現(xiàn)給我們帶來了很大的影響，本文主要知識點 transform屬性/animate的應(yīng)用，感興趣的朋友可以參考并學(xué)習(xí)下實例，希望對你學(xué)習(xí)圖形構(gòu)成有所幫助

主要知識點
① transform屬性：
　　　　ratate（旋轉(zhuǎn)度數(shù)）
　　　　scale（等比例縮放）
　　　　skew(x , y);讓元素傾斜顯示,包含兩個參數(shù)值，分別表示X軸和Y軸傾斜的角度，如果第二個參數(shù)為空，則默認(rèn)為0，參數(shù)為負(fù)表示向相反方向傾斜。
②animate 適用于鼠標(biāo)經(jīng)過產(chǎn)生寬度，高度，left，top等等示例 transition:1s ease all;所有事件產(chǎn)生動畫！

復(fù)制代碼

代碼如下:

div {
-webkit-animation-name: pulse;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-direction: alternate;
}@-webkit-keyframes pulse {
from {
opacity: 0.0;
font-size: 100%;
}
to {
opacity: 1.0;
font-size: 200%;
}
}style
*{ margin: 0; padding: 0;}
body {
overflow: hidden;
}
#clouds{
background:-webkit-linear-gradient(top,#c9dbe9 0%,#fff 100%);/*等價于background:-webkit-gradient(linear,left top,left bottom,from(c9dbe9),to(#fff))*/
background:-moz-linear-gradient(top,#c9dbe9 0%,#fff 100%);
background:-o-linear-gradient(top,#c9dbe9 0%,#fff 100%);
padding:100px 0px;
}
.cloud{
width:200px;
height:60px;
background:#FFF;
border-radius:200px;
-webkit-border-radius:200px;
-moz-border-radius:200px;
-o-border-radius:200px;
position:relative;}
.cloud:after,.cloud:before{
content:'';
position:absolute;
background:#FFF;
width:100px;
height:80px;
top:-15px;
left:10px;
border-radius:100px;
-webkit-border-radius:100px;
-moz-border-radius:100px;
-o-border-radius:100px;}
.cloud:after{
width:120px;
height:120px;
top:-55px;
left:auto;
right:15px;}
.x1{
-webkit-animation:moveclouds 25s linear infinite;
-moz-animation:moveclouds 25s linear infinite;
-o-animation:moveclouds 25s linear infinite;}
.x2{
left:200px;
transform:scale(0.6);
-webkit-transform:scale(0.6);
-moz-transform:scale(0.6);
-o-transform:scale(0.6);
opacity:0.6;
animation:moveclouds 25s linear infinite;
-webkit-animation:moveclouds 25s linear infinite;
-moz-animation:moveclouds 25s linear infinite;
-o-animation:moveclouds 25s linear infinite;}
.x3{
top:-200px;
left:-250px;
transform:scale(0.6);
-webkit-transform:scale(0.6);
-moz-transform:scale(0.6);
-o-transform:scale(0.6);
opacity:0.6;
animation:moveclouds 25s linear infinite;
-webkit-animation:moveclouds 25s linear infinite;
-moz-animation:moveclouds 25s linear infinite;
-o-animation:moveclouds 25s linear infinite;}
.x4{
top:200px;
left:470px;
transform:scale(0.6);
-webkit-transform:scale(0.6);
-moz-transform:scale(0.6);
-o-transform:scale(0.6);
opacity:0.6;
animation:moveclouds 25s linear infinite;
-webkit-animation:moveclouds 25s linear infinite;
-moz-animation:moveclouds 25s linear infinite;
-o-animation:moveclouds 25s linear infinite;}
.x5{
left:470px;
top:-250px;
transform:scale(0.8);
-webkit-transform:scale(0.8);
-moz-transform:scale(0.8);
-o-transform:scale(0.8);
opacity:0.8;
animation:moveclouds 25s linear infinite;
-webkit-animation:moveclouds 18s linear infinite;
-moz-animation:moveclouds 18s linear infinite;
-o-animation:moveclouds 18s linear infinite;}
@-webkit-keyframes moveclouds{
0%{margin-left:1000px;}
100%{margin-left:-1000px;}
}
@-moz-keyframes moveclouds{
0%{margin-left:1000px;}
100%{margin-left:-1000px;}
}
@-o-keyframes moveclouds{
0%{margin-left:1000px;}
100%{margin-left:-1000px;}
}
html
<div id="clouds">
　　<div class="cloud x1"></div>
　　<div class="cloud x2"></div>
　　<div class="cloud x3"></div>
　　<div class="cloud x4"></div>
　　<div class="cloud x5"></div>
</div>