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制作动感导航条示例
Jan 26 HTML / CSS
在HTML5中如何使用CSS建立不可选的文字
Oct 17 HTML / CSS
CSS3 text-shadow实现文字阴影效果
Feb 24 HTML / CSS
CSS3 新增选择器的实例
Nov 13 HTML / CSS
使用HTML5的File实现base64和图片的互转
Aug 01 HTML / CSS
使用HTML5里的classList操作CSS类
Jun 28 HTML / CSS
微信html5页面调用第三方位置导航的示例
Mar 14 HTML / CSS
AmazeUI底部导航栏与分享按钮的示例代码
Aug 18 HTML / CSS
前端使用canvas生成盲水印的加密解密的实现
Dec 16 HTML / CSS
CSS极坐标的实例代码
Jun 03 HTML / CSS
css3带你实现3D转换效果
Feb 24 HTML / CSS
HTML中实现音乐或视频自动播放案例详解
May 30 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
AM/FM收音机的安装与调试
2021/03/02 无线电
PHP在同一域名下两个不同的项目做独立登录机制详解
2017/09/22 PHP
php实现的中秋博饼游戏之绘制骰子图案功能示例
2017/11/06 PHP
jQuery 技巧大全(新手入门篇)
2009/05/12 Javascript
jquery.validate分组验证代码
2011/03/17 Javascript
用JS在浏览器中创建下载文件
2014/03/05 Javascript
jQuery照片伸缩效果不影响其他元素的布局
2014/05/09 Javascript
js去除输入框中所有的空格和禁止输入空格的方法
2014/06/09 Javascript
jquery的总体架构分析及实现示例详解
2014/11/08 Javascript
Vue 2.x教程之基础API
2017/03/06 Javascript
ES6中Array.copyWithin()函数的用法实例详解
2017/09/16 Javascript
详解react服务端渲染(同构)的方法
2017/09/21 Javascript
Angularjs添加排序查询功能的实例代码
2017/10/24 Javascript
vue 组件的封装之基于axios的ajax请求方法
2018/08/11 Javascript
Python中为feedparser设置超时时间避免堵塞
2014/09/28 Python
使用Python脚本将文字转换为图片的实例分享
2015/08/29 Python
总结python爬虫抓站的实用技巧
2016/08/09 Python
python输入错误密码用户锁定实现方法
2017/11/27 Python
pyhton列表转换为数组的实例
2018/04/04 Python
对python 读取线的shp文件实例详解
2018/12/22 Python
python3爬虫怎样构建请求header
2018/12/23 Python
python时间与Unix时间戳相互转换方法详解
2020/02/13 Python
python实现吃苹果小游戏
2020/03/21 Python
python缩进长度是否统一
2020/08/02 Python
GAP欧盟网上商店:GAP EU
2016/09/13 全球购物
DeinDesign德国:设计自己的手机壳
2019/12/14 全球购物
奥地利手表、香水、化妆品和珠宝购物网站:Brasty.at
2021/01/17 全球购物
岗位职责范本
2013/11/23 职场文书
好军嫂事迹材料
2014/01/15 职场文书
旷课检讨书大全
2014/01/21 职场文书
经济类毕业生求职信
2014/06/26 职场文书
物业保安辞职信
2015/05/12 职场文书
航班延误投诉信
2015/07/02 职场文书
Python中的pprint模块
2021/11/27 Python
《堡垒之夜》联动《刺客信条》 4月7日正式上线
2022/04/06 其他游戏
VUE之图片Base64编码使用ElementUI组件上传
2022/04/09 Vue.js