CSS3 图片悬浮缩放效果
2015-12-01 17:27
676 查看
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题</title> <style> .demo1{ width:200px; height:200px; border:1px solid blue; display: block; padding:5px; } img{ -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s; } a:hover img{ -webkit-transform:scale(0.8); -webkit-box-shadow:0px 0px 30px #ccc; -moz-transform:scale(0.8); -moz-box-shadow:0px 0px 30px #ccc; -o-transform:scale(0.8); -o-box-shadow:0px 0px 30px #ccc; } </style> </head> <body> <a href="#" class="demo1"> <img src="1.jpg" width=200 height=200 alt=""> </a> </body> </html>
相关文章推荐
- 浏览器默认样式
- 浏览器默认样式
- CSS3旋转球3D视觉效果
- 搜索样式键盘的Return按钮是否可点击
- 0px<div>的妙用
- css中的hover ,关于li与a标签的问题
- CSS布局属性
- html表格边框样式
- Windows右键新建菜单中添加PHP,JS,CSS等文件
- CSS JQuyer 元素选择
- 用css样式和脚本js结合打开链接
- CSS属性的私有前缀
- CSS进阶知识
- ReportingService 通过RowNumber函数获取行号和生成隔行变色样式
- css transition动画效果案例
- 文字过长 用 ... 表示 CSS实现单行、多行文本溢出显示省略号
- 实现鼠标移上去变样式
- 未知尺寸图片在固定高度容器中的水平和垂直居中
- CSS预处理器们
- 学习使用:before和:after伪元素