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 相关文章推荐
使用CSS实现阅读进度条
Feb 27 HTML / CSS
css图标制作教程制作云图标
Jan 19 HTML / CSS
纯css3制作网站后台管理面板
Dec 30 HTML / CSS
CSS3对背景图片的裁剪及尺寸和位置的设定方法
Mar 07 HTML / CSS
详解Html5中video标签那些属性和方法
Jul 01 HTML / CSS
HTML5 canvas画矩形时出现边框样式不一致的解决方法
Oct 14 HTML / CSS
移动端HTML5实现文件上传功能【附代码】
Mar 25 HTML / CSS
HTML5各种头部meta标签的功能(推荐)
Mar 13 HTML / CSS
html5使用canvas实现弹幕功能示例
Sep 11 HTML / CSS
详解H5 活动页之移动端 REM 布局适配方法
Dec 07 HTML / CSS
使用placeholder属性设置input文本框的提示信息
Feb 19 HTML / CSS
CSS3通过var()和calc()函数实现动画特效
Mar 30 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
Centos下升级php5.2到php5.4全记录(编译安装)
2015/04/03 PHP
PHP 二维数组和三维数组的过滤
2016/03/16 PHP
php实现文件与16进制相互转换的方法示例
2017/02/16 PHP
PHPMailer ThinkPHP实现自动发送邮件功能
2018/06/10 PHP
Javascript中暂停功能的实现代码
2007/03/04 Javascript
jquery判断RadioButtonList和RadioButton中是否有选中项示例
2013/09/29 Javascript
jquery获取checkbox的值并post提交
2015/01/14 Javascript
JavaScript随机生成信用卡卡号的方法
2015/04/07 Javascript
每天一篇javascript学习小结(Function对象)
2015/11/16 Javascript
关于javascript原型的修改与重写(覆盖)差别详解
2016/08/31 Javascript
JavaScript学习笔记整理_用于模式匹配的String方法
2016/09/19 Javascript
JavaScript中的 attribute 和 jQuery中的 attr 方法浅析
2017/01/04 Javascript
JavaScript编写一个贪吃蛇游戏
2017/03/09 Javascript
JavaScript 用fetch 实现异步下载文件功能
2017/07/21 Javascript
Vue动态组件实例解析
2017/08/20 Javascript
jQuery实现标签子元素的添加和赋值方法
2018/02/24 jQuery
react-native封装插件swiper的使用方法
2018/03/20 Javascript
浅谈Vue.js路由管理器 Vue Router
2018/08/16 Javascript
Javascript实现一朵从含苞到绽放的玫瑰
2019/03/30 Javascript
vue的列表交错过渡实现代码示例
2019/05/05 Javascript
javascript使用substring实现的展开与收缩文字功能示例
2019/06/17 Javascript
JavaScript this在函数中的指向及实例详解
2019/10/14 Javascript
解决vue项目axios每次请求session不一致的问题
2020/10/24 Javascript
在Python中使用Mako模版库的简单教程
2015/04/08 Python
django celery redis使用具体实践
2019/04/08 Python
使用Python的networkx绘制精美网络图教程
2019/11/21 Python
Skyscanner澳大利亚:全球领先的旅游搜索网站
2018/03/24 全球购物
世嘉游戏英国官方商店:SEGA Shop UK
2019/09/20 全球购物
如何使用PHP session
2015/04/21 面试题
银行毕业实习自我鉴定
2013/09/19 职场文书
《小松树和大松树》教学反思
2014/02/20 职场文书
三八妇女节活动总结
2014/05/04 职场文书
法律专业求职信
2014/05/24 职场文书
党的群众路线对照检查材料(个人)
2014/09/24 职场文书
党员“一帮一”活动总结
2015/05/07 职场文书
创业计划书之家教托管
2019/09/25 职场文书