首页 HTML/CSS HTML/CSS 悬停图片旋转

HTML/CSS 悬停图片旋转

GavinWu 2022年05月25日 7:05 HTML/CSS 540 Views

这是主要是应用一个transition的效果rotateZ,他定义了一个转换,它可以让一个元素围绕横Z轴旋转,而不会对其进行变形。
本文右侧的文章作者卡片的头像就应用了这个效果。

代码如下

先看CSS代码,内容有详细的说明

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.avatar {
  box-shadow        : inset 0 -1px 0 #333;
  /*设置图像阴影效果*/
  -webkit-box-shadow: inset 0 -1px 0 #333;
  -webkit-transition: 0.5s;
  -webkit-transition: -webkit-transform 0.5s ease-out;
  transition        : transform 0.5s ease-out;
  /*图像旋转变化时间设置为0.5秒*/
  -moz-transition   : -moz-transform 0.5s ease-out;
}

.avatar:hover {
  /*鼠标悬浮在头像时的CSS样式*/
  transform        : rotateZ(360deg);
  /*图像旋转360度*/
  -webkit-transform: rotateZ(360deg);
  -moz-transform   : rotateZ(360deg);
}

HTML结构如下

1
2
3
4
5
  <div class="author-avatar">
<a href="https://wuean.com/author/wcglove" title="GavinWu" rel="author">
 <img src="https://wuean.com/wp-content/uploads/2022/03/wcglove_avatar-80x80.png" class="avatar">
</a>
</div>

相关文章

  • 暂无相关文章
七牛

发表评论

QR Code

本页二维码