css3.0 图形构成实例练习二

主要知识点

① transform属性：

　　　　ratate（旋转度数）

　　　　scale（等比例缩放）

　　　　skew(x , y);让元素倾斜显示,包含两个参数值，分别表示x轴和y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。

②animate 适用于鼠标经过产生宽度，高度，left，top等等 示例 transition:1s ea all;所有事件产生动画！

复制代码 代码如下:

div {

-webkit-animation-name: pul;

-webkit-animation-duration: 2s;

-webkit-animation-iteration-count: infinite;

-webkit-animation-timing-function: ea-in-out;

-webkit-animation-direction: alternate;

}@-webkit-keyframes pul {

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:2观看开学第一课心得体会00px;

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 inf公输子削竹木以为鹊inite;

-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:sc人前显贵ale(0.8);

-webkit-transform:scale(0.8);

-moz-transform:scale(0.8);

-o-transheep复数sform: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>