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实现颜色渐变效果(包含环形渐变、线性渐变、彩虹效果等)
May 07 HTML / CSS
使用CSS3来绘制一个月食图案
Jul 18 HTML / CSS
CSS3实现银灰色动画效果的导航菜单代码
Sep 01 HTML / CSS
CSS3制作炫酷带方向感应的鼠标滑过图片3D动画
Mar 16 HTML / CSS
Html5实现如何在两个div元素之间拖放图像
Mar 29 HTML / CSS
仿CSDN Blog返回页面顶部功能实现原理及代码
Jun 30 HTML / CSS
html5 迷宫游戏(碰撞检测)实例一
Jul 25 HTML / CSS
简单介绍HTML5中的文件导入
May 08 HTML / CSS
HTML5+WebSocket实现多文件同时上传的实例
Dec 29 HTML / CSS
html5 Canvas实现图片旋转的示例
Jan 15 HTML / CSS
canvas简单连线动画的实现代码
Feb 04 HTML / CSS
html5实现九宫格抽奖可固定抽中某项奖品
Jun 15 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
PHPExcel读取Excel文件的实现代码
2011/12/06 PHP
PHP rawurlencode与urlencode函数的深入分析
2013/06/08 PHP
PHP合并静态文件详解
2014/11/14 PHP
PHP常用算法和数据结构示例(必看篇)
2017/03/15 PHP
ExtJS GridPanel 根据条件改变字体颜色
2010/03/08 Javascript
Jquery工作常用实例 使用AJAX使网页进行异步更新
2011/07/26 Javascript
jQuery提交多个表单的小例子
2013/06/30 Javascript
使用javascript实现ListBox左右全选,单选,多选,全请
2013/11/07 Javascript
JS中实现replaceAll的方法(实例代码)
2013/11/12 Javascript
JavaScript获取图片的原始尺寸以宽度为例
2014/05/04 Javascript
js与css实现弹出层覆盖整个页面的方法
2014/12/13 Javascript
Node.js 日志处理模块log4js
2016/08/28 Javascript
从setTimeout看js函数执行过程
2017/12/19 Javascript
JS获取url参数,JS发送json格式的POST请求方法
2018/03/29 Javascript
详解JavaScript添加给定的标签选项
2018/09/17 Javascript
vue与bootstrap实现简单用户信息添加删除功能
2019/02/15 Javascript
JavaScript 截取字符串代码实例
2019/09/05 Javascript
layer.open提交子页面的form和layedit文本编辑内容的方法
2019/09/27 Javascript
angular组件间传值测试的方法详解
2020/05/07 Javascript
[47:42]Fnatic vs Liquid 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[01:54]TI珍贵瞬间系列(五):压力
2020/08/29 DOTA
Python实现的中国剩余定理算法示例
2017/08/05 Python
Python及PyCharm下载与安装教程
2017/11/18 Python
python+pandas生成指定日期和重采样的方法
2018/04/11 Python
Python递归求出列表(包括列表中的子列表)的最大值实例
2020/02/27 Python
Python写捕鱼达人的游戏实现
2020/03/31 Python
德国网上药房:Apotal
2017/04/04 全球购物
衰败城市英国官网:Urban Decay英国
2020/04/29 全球购物
自荐信封面
2013/12/04 职场文书
安全生产网格化管理实施方案
2014/03/01 职场文书
事业单位分类改革实施方案
2014/03/21 职场文书
搞笑爱情保证书
2014/04/29 职场文书
分公司经理任命书
2014/06/05 职场文书
怒海潜将观后感
2015/06/11 职场文书
导游词之徐州-云龙山
2019/09/29 职场文书
GoFrame框架数据校验之校验结果Error接口对象
2022/06/21 Golang