CSS3实现头像旋转功能

原创 2016年05月30日 10:53:31

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

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

div、css圆形头像

1578****854 CSS3圆形头像 header.png 效果图

用css让头像变圆且鼠标悬停在图片上时会发光

代码如下: index.html .img-circle { -moz-border-radius: 50%; -webkit-border-radius: 50%; border...

伪类:hover+css3实现图片动态旋转变化

伪类:hover+css3实现图片动态旋转变化 transform:rotate(360deg)scale(0.5); transition:1s :hover

CSS3实现头像旋转

在线展示:鼠标放上头像旋转 鼠标未放上效果: 鼠标放上之后旋转效果:transition: all 2.0s;表示所有的属性变换在2秒内完成;transform: rotate(360deg);表...

CSS3实现头像旋转功能

  • 2016-05-30 10:55
  • 124KB
  • 下载

CSS3----实现光芒旋转头像动画

CSS: @-webkit-keyframes spin { from {-webkit-transform: rotate(0deg);} to {-webkit-transfor...
  • damys
  • damys
  • 2014-05-08 11:54
  • 1701

巧用css3轻松实现箭头上下旋转

巧用css3的transform-origin、transform和transition属性轻松实现箭头上下旋转效果。看代码: 只要css就可以实现,对做前端的来说简直是福...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)