简单就是美

化繁为简

CSS3实现头像旋转功能

CSS3中的transform:rotate()可以实现旋转功能,效果如下图所示:

1、鼠标未移动到图片上的样式:


2、鼠标放到该图片上后,会有动画过渡,旋转图片:


代码如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			img{
				border: #000 solid 2px;
				display: block;
				margin: 50px auto;
				border-radius: 50%;
				transition: all 2.0s;
			}
			img:hover{
				transform: rotate(360deg);
			}
		</style>
	</head>
	<body>
		<img src="img/6.png" />
	</body>
</html>


其中:

transition: all 2.0s;表示所有的属性变换在2秒内完成;

transform: rotate(360deg);表示图片旋转360度。


代码下载地址:http://download.csdn.net/detail/u014175572/9535093

阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u014175572/article/details/51536271
个人分类: HTML5 CSS3
上一篇CSS3实现鼠标移动到图片上图片变大(缓慢变大,有过渡效果,放大的过程是有动画过渡的,这个过渡的时间可以自定义)
下一篇基于JQuery的Swiper插件实现移动手机端幻灯片切换(可在每一张幻灯片div中插入自定义的元素,代码简介,扩展性好。)
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭