鼠标悬停,图片旋转360°特效代码
2016-09-07 16:33
309 查看
html代码
css代码
效果图
<div class="picxz"></div>
css代码
* { margin:0; padding:0; list-style:none; } body { background:#1F1F1F; } .picxz { width: 220px; height: 220px; margin: 0 auto; background: no-repeat url("http://farm9.staticflickr.com/8195/8098750703_797e102da2_z.jpg") left top; -webkit-background-size: 220px 220px; -moz-background-size: 220px 220px; background-size: 220px 220px; -webkit-border-radius: 110px; border-radius: 110px; -webkit-transition: -webkit-transform 2s ease-out; -moz-transition: -moz-transform 2s ease-out; -o-transition: -o-transform 2s ease-out; -ms-transition: -ms-transform 2s ease-out; } .picxz:hover { -webkit-transform: rotateZ(360deg); -moz-transform: rotateZ(360deg); -o-transform: rotateZ(360deg); -ms-transform: rotateZ(360deg); transform: rotateZ(360deg); }
效果图
相关文章推荐
- 非常平滑的JS图片滚动特效代码,无缝循环,速度可自定义,鼠标悬停时停止。它的特点是JS和图片地址分离,这样做你就经易的从数据库动态调用每张图片的地址,方便控制,因此它非常的应用。
- JS打造的一款响应鼠标变化很炫的图片特效代码
- 仿天猫商城鼠标移近图片变暗的jquery特效代码
- iHover实用的CSS3图片鼠标悬停动画特效插件
- CSS3鼠标悬停图片360度旋转效果
- 7款漂亮的图片鼠标悬停特效
- 随鼠标移动的图片或文字特效代码
- 鼠标放上去Div旋转特效代码
- 实用的html5 css3图片鼠标悬停动画特效
- js鼠标点击按钮切换图片-图片自动切换-点击左右按钮切换特效代码
- 淘宝商城首页鼠标经过整个区域图片变暗变亮的JS特效代码
- js鼠标移上去当前放大图片突出显示特效代码
- CSS3图片旋转特效(360/60/-360度)
- js鼠标点击按钮切换图片-图片自动切换-点击左右按钮切换特效代码
- 随鼠标移动的图片或文字特效代码
- jquery 视觉特效(鼠标悬停时依次显示图片)
- jquery 视觉特效(当鼠标悬停时,放大小图片本身)
- 鼠标经过图片变亮离开变暗的js特效代码
- 网页图片旋转的网页特效代码
- iOS 旋转动画(图片360°旋转)关键代码