登录  /  注册
首页 > web前端 > css教程 > 正文

css3.0的图形构成

不言
发布: 2018-06-28 14:45:24
原创
1387人浏览过

这篇文章主要介绍了关于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中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号