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


Posted in HTML / CSS onMarch 19, 2013

主要知识点
① transform属性:

ratate(旋转度数)

scale(等比例缩放)

skew(x , y);让元素倾斜显示,包含两个参数值,分别表示X轴和Y轴倾斜的角度,如果第二个参数为空,则默认为0,参数为负表示向相反方向倾斜。
②animate 适用于鼠标经过产生宽度,高度,left,top等等 示例 transition:1s ease all;所有事件产生动画!

复制代码
代码如下:

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>

HTML / CSS 相关文章推荐
CSS3 渐变(Gradients)之CSS3 线性渐变
Jul 08 HTML / CSS
用CSS3实现背景渐变的方法
Jul 14 HTML / CSS
css3 transform过渡抖动问题解决
Oct 23 HTML / CSS
CSS3.0实现霓虹灯按钮动画特效的示例代码
Jan 12 HTML / CSS
前端面试必备之html5的新特性
Sep 05 HTML / CSS
利用html5 file api读取本地文件示例(如图片、PDF等)
Mar 07 HTML / CSS
html5 viewport使用方法示例详解
Dec 02 HTML / CSS
简单html5代码获取地理位置
Mar 31 HTML / CSS
html5 初试 indexedDB(推荐)
Jul 21 HTML / CSS
H5 meta小结(前端必看篇)
Aug 24 HTML / CSS
AmazeUI导航的示例代码
Aug 14 HTML / CSS
纯html+css实现打字效果
Aug 02 HTML / CSS
css3.0 图形构成实例练习一
Mar 19 #HTML / CSS
基于css3实现漂亮便签样式
Mar 18 #HTML / CSS
css3 按钮 利用css3实现超酷下载按钮
Mar 18 #HTML / CSS
利用css3制作3D样式按钮实现代码
Mar 18 #HTML / CSS
css3 按钮样式简单可扩展创建
Mar 18 #HTML / CSS
css3气泡 css3关键帧动画创建的动态通知气泡
Feb 26 #HTML / CSS
css 省略号 css3让多余的字符串消失并附加省略号的实现代码
Feb 07 #HTML / CSS
You might like
php遍历文件夹下的所有文件和子文件夹示例
2014/03/20 PHP
PHP实现的简单对称加密与解密方法实例小结
2017/08/28 PHP
PHP创建自己的Composer包方法
2018/04/09 PHP
PHP使用curl_multi_select解决curl_multi网页假死问题的方法
2018/08/15 PHP
js脚本学习 比较实用的基础
2006/09/07 Javascript
麦鸡的TAB切换功能结合了javascript和css
2007/12/17 Javascript
jQuery的强大选择器小结
2009/12/27 Javascript
让IE8支持DOM 2(不用框架!)
2009/12/31 Javascript
用JQuery调用Session的实现代码
2010/10/29 Javascript
$.format,jquery.format 使用说明
2011/07/13 Javascript
给事件响应函数传参数的四种方式小结
2013/12/05 Javascript
jQuery中on()方法用法实例详解
2015/02/06 Javascript
jquery实现聚光灯效果的方法
2015/02/06 Javascript
浅谈Javascript线程及定时机制
2015/07/02 Javascript
Vue.js实现无限加载与分页功能开发
2016/11/03 Javascript
javascript中Number的方法小结
2016/11/21 Javascript
JavaScript实现经典排序算法之插入排序
2016/12/28 Javascript
js实现用户输入的小写字母自动转大写字母的方法
2017/01/21 Javascript
微信小程序 下拉列表的实现实例代码
2017/03/08 Javascript
Vue计算属性的使用
2017/08/04 Javascript
Angular在模板驱动表单中自定义校验器的方法
2017/08/09 Javascript
Angular简单验证功能示例
2017/12/22 Javascript
nodejs npm错误Error:UNKNOWN:unknown error,mkdir 'D:\Develop\nodejs\node_global'at Error
2019/03/02 NodeJs
详解ES6中的Map与Set集合
2019/03/22 Javascript
微信小程序批量监听输入框对按钮样式进行控制的实现代码
2019/10/12 Javascript
python 处理dataframe中的时间字段方法
2018/04/10 Python
如何使用selenium和requests组合实现登录页面
2020/02/03 Python
Python集成开发工具Pycharm的安装和使用详解
2020/03/18 Python
关于keras.layers.Conv1D的kernel_size参数使用介绍
2020/05/22 Python
HTML5 语义化结构化规范化
2008/10/17 HTML / CSS
专业毕业生个性的自我评价
2013/10/03 职场文书
网络技术专业求职信
2014/07/13 职场文书
我们的节日中秋节活动总结
2015/03/23 职场文书
党小组推荐意见
2015/06/02 职场文书
高性能跳频抗干扰宽带自组网电台
2022/02/18 无线电
《堡垒之夜》联动《刺客信条》 4月7日正式上线
2022/04/06 其他游戏