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 动画技术
Jul 27 HTML / CSS
CSS3 :nth-child()伪类选择器实现奇偶行显示不同样式
Nov 05 HTML / CSS
纯CSS实现菜单、导航栏的3D翻转动画效果
Apr 23 HTML / CSS
纯CSS3实现的阴影效果
Dec 24 HTML / CSS
CSS3+Sprite实现僵尸行走动画特效源码
Jan 27 HTML / CSS
CSS超出文本指定宽度用省略号代替和文本不换行
May 05 HTML / CSS
如何在网站上添加谷歌定位信息
Apr 16 HTML / CSS
如何用canvas实现在线签名的示例代码
Jul 10 HTML / CSS
HTML5 body设置自适应全屏
May 07 HTML / CSS
CSS3 菱形拼图实现只旋转div 背景图片不旋转功能
Mar 30 HTML / CSS
html+css实现环绕倒影加载特效
Jul 07 HTML / CSS
HTML中的表格元素介绍
Feb 28 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
同台服务器使用缓存APC效率高于Memcached的演示代码
2010/02/16 PHP
thinkphp3.x连接mysql数据库的方法(具体操作步骤)
2016/05/19 PHP
PHP实现登录搜狐广告获取广告联盟数据的方法【附demo源码】
2016/10/14 PHP
php 常用的系统函数
2017/02/07 PHP
nginx 设置多个站跨域
2021/03/09 Servers
效率高的Javscript字符串替换函数的benchmark
2008/08/02 Javascript
JQuery中$之选择器用法介绍
2011/04/05 Javascript
Javascript this 的一些学习总结
2012/08/02 Javascript
利用window.name实现windowStorage代码分享
2014/01/02 Javascript
一个字符串反转函数可实现字符串倒序
2014/09/15 Javascript
Bootstrap3 input输入框插入glyphicon图标的方法
2016/05/16 Javascript
js和jquery中获取非行间样式
2017/05/05 jQuery
在Js页面通过POST传递参数跳转到新页面详解
2017/08/25 Javascript
浅谈Vue.js中的v-on(事件处理)
2017/09/05 Javascript
JS打印彩色菱形的实例代码
2018/08/15 Javascript
JSON的parse()方法介绍
2019/01/31 Javascript
vue项目打包之开发环境和部署环境的实现
2020/04/23 Javascript
[14:00]DOTA2国际邀请赛史上最长大战 赛后专访B神
2013/08/10 DOTA
[01:11:37]完美世界DOTA2联赛PWL S2 SZ vs FTD.C 第一场 11.19
2020/11/19 DOTA
python实现基本进制转换的方法
2015/07/11 Python
人生苦短我用python python如何快速入门?
2018/03/12 Python
Python实现找出数组中第2大数字的方法示例
2018/03/26 Python
Python2和Python3.6环境解决共存问题
2018/11/09 Python
解决python xlrd无法读取excel文件的问题
2018/12/25 Python
在Python中字典根据多项规则排序的方法
2019/01/21 Python
应届毕业生简历自我评价
2014/01/31 职场文书
关于读书的活动方案
2014/08/14 职场文书
社区党员群众路线教育实践活动心得体会
2014/11/03 职场文书
2015年个人实习工作总结
2014/12/12 职场文书
行政司机岗位职责
2015/04/10 职场文书
惹女朋友生气检讨书
2015/05/06 职场文书
2015毕业设计工作总结
2015/07/24 职场文书
2016国培研修心得体会
2016/01/08 职场文书
曾国藩励志经典名言37句,蕴含哲理
2019/10/14 职场文书
mapstruct的用法之qualifiedByName示例详解
2022/04/06 Java/Android
tomcat默认最大连接数及相关调整方法
2022/05/06 Servers