css3的transition效果和transfor效果示例介绍


Posted in HTML / CSS onOctober 30, 2013

复制代码
代码如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>css3的transition效果</title>
<style type="text/css">body{ background:#000;}
*{margin:0; padding:0; list-style:none; outline:none;}
div{ width:960px; margin:50px auto;}
li{ width:130px; height:450px; background:#fff; float:left; text-align:center; line-height:450px; border:1px solid #666; position:relative; border-radius:5px; box-shadow:0 0 5px #666; -webkit-transition:all 0.5s ease-in-out; -moz-transition:all 0.5s ease-in-out; transition:all 0.5s ease-in-out; -o-transition:all 0.5s ease-in-out;}
#card1{ -webkit-transform:rotate(-20deg);-moz-transform:rotate(-20deg);-ms-transform:rotate(-20deg);-o-transform:rotate(-20deg); left:130px; top:40px; z-index:1;}
#card2{ -webkit-transform:rotate(-10deg);-moz-transform:rotate(-10deg);-ms-transform:rotate(-10deg);-o-transform:rotate(-10deg); left:40px; top:15px; z-index:2;}
#card3{ z-index:6;}
#card4{ -webkit-transform:rotate(10deg); -moz-transform:rotate(10deg); -ms-transform:rotate(10deg);-o-transform:rotate(10deg); right:40px; top:15px; z-index:5;}
#card5{ -webkit-transform:rotate(20deg); -moz-transform:rotate(20deg); -ms-transform:rotate(20deg);-o-transform:rotate(20deg); right:130px; top:40px; z-index:4;}
#transform li:hover{ z-index:7;}
#card1:hover{ background:orange; -webkit-transform:scale(1.1) rotate(-18deg);-moz-transform:scale(1.1) rotate(-18deg); -ms-transform:scale(1.1) rotate(-18deg);-o-transform:scale(1.1) rotate(-18deg);}
#card2:hover{ border:5px solid red; -webkit-transform:scale(1.1) rotate(-8deg);-moz-transform:scale(1.1) rotate(-8deg); -ms-transform:scale(1.1) rotate(-8deg);-o-transform:scale(1.1) rotate(-8deg);}
#card3:hover{ -webkit-transform:scale(1.1) rotate(2deg);-moz-transform:scale(1.1) rotate(2deg); -ms-transform:scale(1.1) rotate(2deg);-o-transform:scale(1.1) rotate(2deg);}
#card4:hover{ -webkit-transform:scale(1.1) rotate(8deg);-moz-transform:scale(1.1) rotate(8deg); -ms-transform:scale(1.1) rotate(8deg);-o-transform:scale(1.1) rotate(8deg);}
#card5:hover{ -webkit-transform:scale(1.1) rotate(18deg);-moz-transform:scale(1.1) rotate(18deg); -ms-transform:scale(1.1) rotate(18deg);-o-transform:scale(1.1) rotate(18deg);}</style>
</head>
<body>
<div>
<ul id="transform">
<li id="card1">1</li>
<li id="card2">2</li>
<li id="card3">3</li>
<li id="card4">4</li>
<li id="card5">5</li>
</ul>
</div>
</body>
</html>

1.transform:变形
其属性有:rotate(10deg)旋转度数;skew(10deg)倾斜;scale(1.5)按比例缩放,负数为缩小,translate(120px,0)移位,向右移动120px,负数表示向左或向上

2.transition 允许css的属性值在一定的时间区间内平滑地过渡
transition:all(执行变换的属性) 0.5s(变换延续的时间) ease-in-out(变换的速率变化)

HTML / CSS 相关文章推荐
CSS3弹性布局内容对齐(justify-content)属性使用详解
Jul 31 HTML / CSS
检测用户浏览器是否支持CSS3的方法
Aug 29 HTML / CSS
css3 边框、背景、文本效果的实现代码
Mar 21 HTML / CSS
CSS3制作圆形滚动进度条动画的示例
Nov 05 HTML / CSS
前端canvas动画如何转成mp4视频的方法
Jun 17 HTML / CSS
值得收藏的HTML5资源(学习html5的朋友可以收藏下)
Jul 20 HTML / CSS
HTML5 Canvas实现平移/放缩/旋转deom示例(附截图)
Jul 04 HTML / CSS
HTML5新增加的功能详解
Sep 05 HTML / CSS
html5 移动端视频video的android兼容(去除播放控件、全屏)
Mar 26 HTML / CSS
amazeui页面分析之登录页面的示例代码
Aug 25 HTML / CSS
Html5+CSS3+EL表达式问题小结
Dec 19 HTML / CSS
前端使用svg图片改色实现示例
Jul 23 HTML / CSS
CSS3之多背景background使用示例
Oct 18 #HTML / CSS
CSS3之背景尺寸Background-size使用介绍
Oct 14 #HTML / CSS
CSS3之边框多颜色Border-color属性使用示例
Oct 11 #HTML / CSS
CSS3文本换行word-wrap解决英文文本超过固定宽度不换行
Oct 10 #HTML / CSS
CSS3图片旋转特效(360/60/-360度)
Oct 10 #HTML / CSS
使用CSS3在触屏上为按钮实现激活效果
Sep 27 #HTML / CSS
纯CSS3实现带动画效果导航菜单无需js
Sep 27 #HTML / CSS
You might like
PHP操作Memcache实例介绍
2013/06/14 PHP
PHP四大安全策略
2014/03/12 PHP
php进行md5加密简单实例方法
2019/09/19 PHP
php7 图形用户界面GUI 开发示例
2020/02/22 PHP
PHP超全局变量实现原理及代码解析
2020/09/01 PHP
js+xml生成级联下拉框代码
2012/07/24 Javascript
jquery实现页面图片等比例放大缩小功能
2014/02/12 Javascript
Egret引擎开发指南之创建项目
2014/09/03 Javascript
JavaScript中实现异步编程模式的4种方法
2014/09/24 Javascript
javaScript中with函数用法实例分析
2015/06/08 Javascript
在AngularJS中如何使用谷歌地图把当前位置显示出来
2016/01/25 Javascript
javascript实现PC网页里的拖拽效果
2016/03/14 Javascript
AngularJS基础 ng-mouseenter 指令示例代码
2016/08/02 Javascript
Bootstrap 实现查询的完美方法
2016/10/26 Javascript
js记录点击某个按钮的次数-刷新次数为初始状态的实例
2017/02/15 Javascript
解决Angular4项目部署到服务器上刷新404的问题
2018/08/31 Javascript
Vue中ref和$refs的介绍以及使用方法示例
2021/01/11 Vue.js
[01:14]英雄,所敬略同——2018完美盛典宣传视频4K
2018/12/05 DOTA
python让图片按照exif信息里的创建时间进行排序的方法
2015/03/16 Python
django实现同一个ip十分钟内只能注册一次的实例
2017/11/03 Python
Django中间件实现拦截器的方法
2018/06/01 Python
详解PyCharm配置Anaconda的艰难心路历程
2018/08/13 Python
python3发送request请求及查看返回结果实例
2020/04/30 Python
Python通过类的组合模拟街道红绿灯
2020/09/16 Python
Python内置函数及功能简介汇总
2020/10/13 Python
橄榄树药房:OLIVEDA
2019/09/01 全球购物
计算机系毕业生推荐信
2013/11/06 职场文书
阿德的梦教学反思
2014/02/06 职场文书
新闻编辑自荐书范文
2014/02/12 职场文书
人身损害赔偿协议书范本
2014/09/27 职场文书
教师学习三严三实心得体会
2014/10/13 职场文书
老员工辞职信范文
2015/05/12 职场文书
如何制定一份可行的计划!
2019/06/21 职场文书
python爬虫之爬取笔趣阁小说
2021/04/22 Python
Python基础详解之描述符
2021/04/28 Python
python三子棋游戏
2022/05/04 Python