CSS3新属性transition-property transform box-shadow实例学习


Posted in HTML / CSS onJune 06, 2013

先看效果图:
正常显示:
CSS3新属性transition-property transform box-shadow实例学习 
鼠标经过时候的效果:
CSS3新属性transition-property transform box-shadow实例学习 

复制代码
代码如下:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>CSS3新属性2013-05-21</title>
<style>
.test li:hover{border-color:#999;background-color:#bbb;color:#999;}
.text{ margin:5px;float:left; background:#FFF; height:250px; width:200px; border:1px solid #CCC; transition-property:all; transition-duration:.5s; transition-timing-function:ease-out;-moz-transition-property:all;-ms-transition-property:all;-o-transition-property:all;-webkit-transition-property:all;-moz-transition-duration:.5s;-ms-transition-duration:.5s;-o-transition-duration:.5s;-webkit-transition-duration:.5s;-moz-transition-timing-function:ease-out;-ms-transition-timing-function:ease-out;-o-transition-timing-function:ease-out;-webkit-transition-timing-function:ease-in;}
.text:hover{ box-shadow:0 0 10px #CCCCCC;-moz-box-shadow:0 0 10px #CCCCCC;-ms-box-shadow:0 0 10px #CCCCCC;-o-box-shadow:0 0 10px #CCCCCC;-webkit-box-shadow:0 0 10px #CCCCCC; transform:scale(1.2);-moz-transform:scale(1.2);-ms-transform:scale(1.2);-o-transform:scale(1.2);-webkit-transform:scale(1.2);}
</style>
</head>
<body>
<div class="text">
<p>请测试css3</p>
</div>
<div class="text">
<p>请测试css3</p>
</div>
<div class="text">
<p>请测试css3</p>
</div>
<div class="text">
<p>请测试css3</p>
</div>
<div class="text">
<p>请测试css3</p>
</div>
</body>
</html>
HTML / CSS 相关文章推荐
35款精致的 CSS3 和 HTML5 网页模板 推荐
Aug 03 HTML / CSS
CSS3 制作旋转的大风车(充满童年回忆)
Jan 30 HTML / CSS
css3动画效果小结(推荐)
Jul 25 HTML / CSS
css3实现3D文本悬停改变效果的示例代码
Jan 16 HTML / CSS
详解background属性的8个属性值(面试题)
Nov 02 HTML / CSS
详解canvas drawImage()方法绘制图片不显示的问题
Oct 08 HTML / CSS
html5调用摄像头功能的实现代码
May 07 HTML / CSS
HTML5制作表格样式
Nov 15 HTML / CSS
HTML5实现无刷新修改URL的方法
Nov 14 HTML / CSS
HTML文本属性&amp;颜色控制属性的实现
Dec 17 HTML / CSS
html5视频自动横过来自适应页面且点击播放功能的实现
Jun 03 HTML / CSS
Html5饼图绘制实现统计图的方法
Aug 05 HTML / CSS
CSS3旋转——彩色扇子兼容firefox浏览器
Jun 04 #HTML / CSS
CSS3+font字体文件实现圆形半透明菜单具体步骤(图解)
Jun 03 #HTML / CSS
css3弹性盒模型实例介绍
May 27 #HTML / CSS
深入CSS3 动画效果的总结详解
May 09 #HTML / CSS
基于CSS3特效之动画:animation的应用
May 09 #HTML / CSS
纯CSS3实现手风琴风格菜单具体步骤
May 06 #HTML / CSS
CSS3——齿轮转动关键代码
May 02 #HTML / CSS
You might like
PHP strstr 函数判断字符串是否否存在的实例代码
2013/09/28 PHP
PHP7之Mongodb API使用详解
2015/12/26 PHP
PHP面向对象程序设计之对象生成方法详解
2016/12/02 PHP
JavaScript Event学习补遗 addEventSimple
2010/02/11 Javascript
基于JavaScript 下namespace 功能的简单分析
2013/07/05 Javascript
JS小功能(checkbox实现全选和全取消)实例代码
2013/11/28 Javascript
JS实现把鼠标放到链接上出现滚动文字的方法
2016/04/06 Javascript
js定时器实例分享
2016/12/20 Javascript
Vue.js双向绑定实现原理详解
2016/12/22 Javascript
input输入密码变黑点密文的实现方法
2017/01/09 Javascript
JS简单判断字符在另一个字符串中出现次数的2种常用方法
2017/04/20 Javascript
js+html5实现页面可刷新的倒计时效果
2017/07/15 Javascript
详解Vue 事件修饰符capture 的使用
2017/12/29 Javascript
详解webpack+ES6+Sass搭建多页面应用
2018/11/05 Javascript
JS实现点击发送验证码 xx秒后重新发送功能
2019/07/30 Javascript
javascript设计模式 ? 职责链模式原理与用法实例分析
2020/04/16 Javascript
vue-axios同时请求多个接口 等所有接口全部加载完成再处理操作
2020/11/09 Javascript
[49:54]Ti4 循环赛第三日 LGD vs Titan
2014/07/12 DOTA
Python中表示字符串的三种方法
2017/09/06 Python
用pytorch的nn.Module构造简单全链接层实例
2020/01/14 Python
python实现IOU计算案例
2020/04/12 Python
浅谈python 调用open()打开文件时路径出错的原因
2020/06/05 Python
python dict乱码如何解决
2020/06/07 Python
One.com挪威:北欧成长最快的网络托管公司
2016/11/19 全球购物
中医专业职业生涯规划书范文
2014/01/04 职场文书
孝敬父母的活动方案
2014/08/31 职场文书
党员自我评议对照检查材料
2014/09/27 职场文书
老龙头导游词
2015/02/11 职场文书
2015个人半年总结范文
2015/03/09 职场文书
2015年妇委会工作总结
2015/05/22 职场文书
2016庆祝教师节新闻稿
2015/11/25 职场文书
《老人与海鸥》教学反思
2016/02/16 职场文书
Nginx配置https的实现
2021/11/27 Servers
Win11局域网共享权限在哪里设置? Win11高级共享的设置技巧
2022/04/05 数码科技
MySql分区类型及创建分区的方法
2022/04/13 MySQL