当前位置：首页 > 技术 > 代码 > CSS 中鼠标悬停，图片旋转

CSS 中鼠标悬停，图片旋转

懋和道人4个月前 (11-24)代码1390

当鼠标放到图片上之后图片旋转, 这里的图片给的是背景图

transform: rotate(angle) 指定元素的 2D 旋转
transition: all 0.6s 设定旋转的动画时间

div

<div class="UserImg-box">
	<div class="img" :style="{backgroundImage: `url(${user_img})`}"></div>
</div>

css

.UserImg-box {
	margin: 0 auto;
	width: 120px;
	height: 120px;
	text-align: center;
}
.UserImg-box:hover .img{
	transform: rotate(-360deg);
}
.img {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background-size: cover;
	background-position: 50%;
	transition: all 0.6s;
}

扫描二维码推送至手机访问。

版权声明：本文由懋和道人发布，如需转载请注明出处。

本文链接：https://www.lizhichen.cn/new/20221124136.shtml

标签: 鼠标悬停图片旋转

分享给朋友：

返回列表

上一篇：何谓“人生倒计时”

下一篇：CardLink 让自己的网站URL统一样式

“CSS 中鼠标悬停，图片旋转” 的相关文章

简单添加个“本站已经安全运行XX年XX天XX秒”教程

简单添加个“本站已经安全运行XX年XX天XX秒”教程

第一种第一步：在需要展示“本网站运行了XX年XX天XX秒”的地方，插进去：<span id="sitetime"></span>第二步：在插进去的...

何谓“人生倒计时”

何谓“人生倒计时”

css部分body {background:linear-gradient(to right,#9796f0,#fbc7d4);color:#333;display:flex;fl...

CardLink 让自己的网站URL统一样式

CardLink 让自己的网站URL统一样式

当我们访问知乎时，时常看到知乎的所有URL特别地美观，或者问题中的链接是卡片式的。将卡片式链接与普通的链接相比，卡片式链接不仅美观，还展示更多信息，如：标题、图片、网址等。效果如下https://ww...

发表评论