css3.0的图形构成

这篇文章主要介绍了关于css3.0的图形构成，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下

css3.0 的出现给我们带来了很大的影响，本文主要知识点 transform属性/animate的应用，感兴趣的朋友可以参考并学习下实例，希望对你学习图形构成有所帮助

主要知识点
① transform属性：
　　　　ratate（旋转度数）
　　　　scale（等比例缩放）
　　　　skew(x , y);让元素倾斜显示,包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。
②animate 适用于鼠标经过产生宽度，高度，left，top等等 示例 transition:1s ease all;所有事件产生动画！ 

p { 
-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 
<p id="clouds"> 
　　<p class="cloud x1"></p> 
　　<p class="cloud x2"></p> 
　　<p class="cloud x3"></p> 
　　<p class="cloud x4"></p> 
　　<p class="cloud x5"></p> 
</p>

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

CSS3中Transition动画属性的用法介绍

CSS实现网页背景渐变的四种代码设置

以上是css3.0的图形构成的详细内容。更多信息请关注PHP中文网其他相关文章！