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 相关文章推荐
纯CSS改变webkit内核浏览器的滚动条样式
Apr 17 HTML / CSS
使用css3实现的windows8开机加载动画
Dec 09 HTML / CSS
使用CSS3制作一个简单的Chrome模拟器
Jul 15 HTML / CSS
纯CSS3代码实现文字描边
Apr 25 HTML / CSS
详解CSS3选择器:nth-child和:nth-of-type之间的差异
Sep 18 HTML / CSS
localStorage 设置过期时间的方法实现
Dec 21 HTML / CSS
html特殊符号示例 html特殊字符编码对照表
Jan 14 HTML / CSS
HTML5 在canvas中绘制矩形附效果图
Jun 23 HTML / CSS
用HTML5制作烟火效果的教程
May 12 HTML / CSS
详解HTML5中的manifest缓存使用
Sep 09 HTML / CSS
HTML5拖拽API经典实例详解
Apr 20 HTML / CSS
微信小程序纯CSS实现无限弹幕滚动效果
Sep 23 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
模仿OSO的论坛(一)
2006/10/09 PHP
php中将html中的br换行符转换为文本输入中的换行符
2013/03/26 PHP
8个PHP数组面试题
2015/06/23 PHP
php ajax实现文件上传进度条
2016/03/29 PHP
php实现获取农历(阴历)、节日、节气的类与用法示例
2017/11/20 PHP
yii框架结合charjs实现统计30天数据的方法
2020/04/04 PHP
php中数组最简单的使用方法
2020/12/27 PHP
基于jquery的loading 加载提示效果实现代码
2011/09/01 Javascript
DOM 事件流详解
2015/01/20 Javascript
javascript字符串循环匹配实例分析
2015/07/17 Javascript
nodejs中全局变量的实例解析
2017/03/07 NodeJs
Vue resource中的GET与POST请求的实例代码
2017/07/21 Javascript
D3.js实现拓扑图的示例代码
2018/06/30 Javascript
小程序视频或音频自定义可拖拽进度条的示例代码
2018/09/30 Javascript
详解Vue组件插槽的使用以及调用组件内的方法
2018/11/13 Javascript
vscode 插件开发 + vue的操作方法
2020/06/05 Javascript
TensorFlow变量管理详解
2018/03/10 Python
Django中使用Celery的教程详解
2018/08/24 Python
在Python中使用defaultdict初始化字典以及应用方法
2018/10/31 Python
Django 实现前端图片压缩功能的方法
2019/08/07 Python
python调用Matplotlib绘制分布点图
2019/10/18 Python
基于Tensorflow一维卷积用法详解
2020/05/22 Python
python获取天气接口给指定微信好友发天气预报
2020/12/28 Python
html5 的a标签 Href 拨电话的写法
2013/11/04 HTML / CSS
HTML5+CSS3实现机器猫
2016/10/17 HTML / CSS
viagogo英国票务平台:演唱会、体育比赛、戏剧门票
2017/03/24 全球购物
小米俄罗斯授权商店:Xiaomi俄罗斯
2019/12/08 全球购物
为什么要有struct关键字
2012/05/08 面试题
党员四风问题对照检查材料思想汇报
2014/09/16 职场文书
个人融资协议书范本两则
2014/10/15 职场文书
2014年政教处工作总结
2014/12/20 职场文书
三孔导游词
2015/02/05 职场文书
2016年春季开学典礼新闻稿
2015/11/25 职场文书
详解jQuery的核心函数和事件处理
2022/02/18 jQuery
python中使用redis用法详解
2022/12/24 Redis
uniapp开发打包多端应用完整方法指南
2022/12/24 Javascript