这篇文章主要介绍了关于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
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！
相关推荐：
CSS3中Transition动画属性的用法介绍
立即学习“前端免费学习笔记（深入）”；
CSS实现网页背景渐变的四种代码设置
以上就是css3.0的图形构成的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1610750.html
微信扫一扫 
支付宝扫一扫 
