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中Color的一些特性介绍
May 27 HTML / CSS
css3弹性盒模型(Flexbox)详细介绍
Oct 08 HTML / CSS
html5+css3气泡组件的实现
Nov 21 HTML / CSS
使用CSS3创建动态菜单效果
Jul 10 HTML / CSS
CSS3 text shadow字体阴影效果
Jan 08 HTML / CSS
HTML5+CSS3实现无插件拖拽上传图片(支持预览与批量)
Jan 05 HTML / CSS
HTML5 使用 sessionStorage 进行页面传值的方法
Jul 02 HTML / CSS
HTML5资源预加载(Link prefetch)详细介绍(给你的网页加速)
May 07 HTML / CSS
html5 canvas手势解锁源码分享
Jan 07 HTML / CSS
详解如何解决H5开发使用wx.hideMenuItems无效果不生效
Jan 20 HTML / CSS
5个HTML5的常用本地存储方式详解与介绍
Mar 27 HTML / CSS
CSS 实现Chrome标签栏的技巧
Aug 04 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
音乐朗读剧《MARS RED》2021年TV动画化决定!
2020/03/06 日漫
PHP 中的类
2006/10/09 PHP
很让人受教的 提高php代码质量36计
2012/09/05 PHP
PHP5.4中json_encode中文转码的变化小结
2013/01/30 PHP
php查询及多条件查询
2017/02/26 PHP
JavaScript CSS修改学习第三章 修改样式表
2010/02/19 Javascript
js清空form表单中的内容示例
2014/05/20 Javascript
javascript使用switch case实现动态改变超级链接文字及地址
2014/12/16 Javascript
javascript实现图片上传前台页面
2015/08/18 Javascript
详解VueJs前后端分离跨域问题
2017/05/24 Javascript
JS+canvas动态绘制饼图的方法示例
2017/09/12 Javascript
Javascript中JSON数据分组优化实践及JS操作JSON总结
2017/12/22 Javascript
微信小程序实现上传图片功能
2018/05/28 Javascript
微信小程序dom操作的替代思路实例分析
2018/12/06 Javascript
详解vuex之store源码简单解析
2019/06/13 Javascript
vue项目中实现缓存的最佳方案详解
2019/07/11 Javascript
vue实现的封装全局filter并统一管理操作示例
2020/02/02 Javascript
js实现单元格拖拽效果
2020/02/10 Javascript
浅谈webpack构建工具配置和常用插件总结
2020/05/11 Javascript
Python网络爬虫与信息提取(实例讲解)
2017/08/29 Python
python re模块findall()函数实例解析
2018/01/19 Python
python序列化与数据持久化实例详解
2019/12/20 Python
Django中的session用法详解
2020/03/09 Python
Django REST Framework 分页(Pagination)详解
2020/11/30 Python
iframe跨域的几种常用方法
2019/11/11 HTML / CSS
德国机场停车位比较和预订网站:Ich-parke-billiger
2018/01/08 全球购物
Pretty You London官网:英国拖鞋和睡衣品牌
2019/05/08 全球购物
int *p=NULL和*p= NULL有什么区别
2014/10/23 面试题
大学生应聘推荐信范文
2013/11/19 职场文书
办公室助理岗位职责
2013/12/25 职场文书
《凡卡》教学反思
2014/04/09 职场文书
难以忽视的真相观后感
2015/06/05 职场文书
灵魂歌王观后感
2015/06/17 职场文书
编写python程序的90条建议
2021/04/14 Python
如何在C++中调用Python
2021/05/21 Python
vue数据字典取键值项目的字典问题
2022/04/12 Vue.js