项目实战经验分享，素材特效源码定制
语法
transition：[ transition-property ] || [ transition-duration ] || [ transition-timing-function ] || [ transition-delay ] 默认值：看每个独立属性
取值
[ transition-property ]： 检索或设置对象中的参与过渡的属性 [ transition-duration ]： 检索或设置对象过渡的持续时间 [ transition-timing-function ]： 检索或设置对象中过渡的动画类型 [ transition-delay ]： 检索或设置对象延迟过渡的时间
没有设置任何属性的样子
<div class="box">
<div class="content">
<a href="###" class="pic">
<a href='' target='_blank'><img src='cat.jpg' alt='点击预览效果|CSS3变形过渡,transition' /></a>
</a>
</div>
</div> 
加上过渡效果后
body{background-color:#E9E9E9; color:#333333; font-family:"Lucida handwriting",Arial,Helvetica,sans-serif; font-size:16px;}
a,a:hover{color:#333333; text-decoration:none;}
.box{width:500px; margin:100px auto 0; font-size:0.75em;}
.title{font-size:1.5em;}
.pic img{
width:256px;
border: 0px;
}
.pic{
display:block;
width:256px;
margin:60px 0 0;
padding:10px 10px 15px;
text-align:center;
background:white;
border:1px solid #bfbfbf;
-webkit-transform:rotate(10deg);
-webkit-box-shadow:2px 2px 3px rgba(135, 139, 144, 0.4);
-webkit-transition:all 1.5s ease-in;
}
.pic:hover{
border-color:#9a9a9a;
border-radius: 15px;
-webkit-box-shadow:15px 15px 20px rgba(50, 50, 50, 0.4);
-webkit-transform:rotate(0deg) scale(1.3);
} 加上样式后，鼠标没有放在盒子上的样子
当鼠标放在盒子上是
图片变正了，其综合还有过度效果未展示
1. 本站所有素材（未指定商用），仅限学习交流请勿用于商业用途。
2. 原创商用和VIP素材，未经合法授权，会员不得以任何形式发布、传播、复制、转售该素材，否则一律封号处理。
3. 如果素材损害你的权益请联系客服vx：13230981129给予处理。
咨询TA
查看(274)次
下载
