您的位置：首页 > Web前端 > CSS

CSS3-鼠标经过图片旋转、缩放、还原

2017-03-13 16:35 357 查看

在线演示

html:

<body>
<div class="box">
<a href="#"><img src="img/02.jpg" alt=""></a>
</div>
</body>

css：

<style>
.box img{
width: 250px;
height: 450px;
}
@-webkit-keyframes pic {
0% {
-webkit-transform: rotate(0deg) scale(1);
opacity: 0.3;  /*透明度*/
}
40% {
-webkit-transform: rotate(30deg) scale(1.5);
opacity: 0.6;
}
60% {
-webkit-transform: rotate(15deg) scale(1.2);
opacity: 0.9;
}
90% {
-webkit-transform: rotate(0deg) scale(0.8);
opacity: 1;
}
}
@-moz-keyframes pic {
0% {
-moz-transform: rotate(0deg) scale(1);
opacity: 0.3;  /*透明度*/
}
40% {
-moz-transform: rotate(30deg) scale(1.5);
opacity: 0.6;
}
60% {
-moz-transform: rotate(15deg) scale(1.2);
opacity: 0.9;
}
90% {
-moz-transform: rotate(0deg) scale(0.8);
opacity: 1;
}
}
.box:hover img { /*鼠标经过box盒子时img动画情况*/
animation-name: pic;  /*动画名字是pic，与上面定义的名字一样*/
-webkit-animation-name: pic;
-moz-animation-name: pic;
-ms-animation-name: pic;
-o-animation-name: pic;
animation-duration: 1s;  /*动画用时1s*/
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-ms-animation-duration: 1s;
-o-animation-duration: 1s;
animation-timing-function: linear;  /*匀速动画*/
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
-o-animation-timing-function: linear;
}
</style>

解析：

-webkit-transform: rotate(30deg) scale(1.5); 是chrome浏览器兼容

rotate(30deg) 顺时针旋转30度；

scale(1.5) 放大1.5倍；

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css3 图片

相关文章推荐

新的分享

章节导航