前端

鼠标悬停图片360度旋转效果

菠萝猫 · 8月14日 · 2019年 223次已读
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>鼠标悬停图片360度旋转效果</title>
	<style>
	.xwcms {
	    width: 220px;
	    height: 220px;
	    /*margin外边距属性*/
	    margin: 0 auto;
	    /*no-repeat不重复*/
	    background: no-repeat url(https://www.liuzhi.org.cn/wp-content/uploads/2019/07/GHO.jpg);
	    /*兼容问题*/
	    /*指定背景图像的大小*/
	    -webkit-background-size: 220px 220px;
	    -moz-background-size: 220px 220px;
	    background-size: 220px 220px;
	    /*圆形显示图片*/
	    -webkit-border-radius: 110px;
	    border-radius: 110px;
	    /*transform将鼠标悬停在一个元素上,逐步改变:*/
	    /*ease-out规定以慢速结束的过渡效果*/
	    -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;
	}
	.xwcms:hover {
		/*rotate(angle)	定义 2D 旋转,在参数中规定角度。*/
	    -webkit-transform: rotateZ(360deg);
	    -moz-transform: rotateZ(360deg);
	    -o-transform: rotateZ(360deg);
	    -ms-transform: rotateZ(360deg);
	    transform: rotateZ(360deg);
	}

	</style>
</head>
<body>
	<div class="xwcms"></div>
</body>
</html>

版权声明:本站采用 “知识共享署名 – 非商业性使用 – 相同方式共享 4.0 中国大陆许可协议” 进行许可,您可以转载本站文章,转载时请以超链接形式标明文章原始出处,Thanks.
0 条回应