【第22期】观点:IT 行业加班,到底有没有价值?

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

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

相关文章推荐

css3控制div无限旋转

div{ -webkit-transition-property: -webkit-transform; -webkit-transition-duration: 1s; -moz-...

用CSS3实现旋转的CD

用到了css3的@keyframes规则 (http://www.w3school.com.cn/cssref/pr_keyframes.asp),通过@keyframes规则能够创建动画。CSS3...

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

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

CSS3实现鼠标移动到图片上图片变大(缓慢变大,有过渡效果,放大的过程是有动画过渡的,这个过渡的时间可以自定义)

CSS3的transform:scale()可以实现按比例放大或者缩小功能。 CSS3的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对...

CSS3实现三角小图标

CSS3的transform可以实现页面元素的扭转、变形等功能。 实现如下图所示的三角形小图标只需要transform定义的一行代码即可,无需再使用图片。

HTML+CSS实现图片下半部分遮罩文字效果(仿微信推送信息的图片文字效果)

微信中推送的信息中有一种图文搭配的方式,即一张图片的下半部分有段阴影遮罩层,这个遮罩层上还有文字。 将微信的截图效果如下: 其中background-color: rgba(0, 0, 0, .5...

css实现鼠标悬停图片放大显示

* { margin: 0; padding: 0; font-family: "微软雅黑"; } .avatar { display: block; ...

图片在鼠标滑过的时候就放大,鼠标移开就恢复

外层容器设置宽高,超过的部分就隐藏。 a{        width: 250px;     height: 160px;     overflow: hidden;     bord...

PHPCMS整站迁移过程中URL地址更新替换

经常玩phpcms,但将一个项目从本地迁到服务器上测试,在进行域名地址更新这个环节总是有个三长两短,时不时要出点毛病,下面将正确的思路和可行的方案总结出来! 1.首先确保以下四个文件中的域名地址替换...

jq/css鼠标经过图片放大效果

img{display:block;} .box{width:200px;border:solid 2px gray;height:160px;overflow:hidden;} .box img{w...
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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