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

CSS 中鼠标悬停,图片旋转

懋和道人6天前代码440

20191022153523945.gif

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

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

分享给朋友:

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

网站标题及关键词地址随IP变化而变

网站标题及关键词地址随IP变化而变

有人问伍林堂官网的标题为什么在不同的地区显示不同的地址加名称,如下图:怎么变的?根据https://www.liuzhixi.cn/的提供方法如下:第一步:引入js<script sr...

Windows11安卓子系统安装步骤

Windows11安卓子系统安装步骤

一、Android子系统的要求1、确保Windows11版本为22000.XXX或者更高;2、硬件必须支持并启用BIOS/UEFI虚拟化;3、确保微软商店版本为22110.1402.6.0或更高版本,...

所谓权限

所谓权限

面板删除文件会有chattr进程,这个chattr进程是用于设置文件特殊权限的,如何检查是否有防篡改的开启,lsattr命令可以看下文件特殊权限,chattr命令可以解除文件的特殊权限。lsattr用...

所谓违禁词

所谓违禁词

需要全局替换某个违禁词,在/www/server/nginx/conf/nginx.conf 文件的include proxy.conf;下方添加如下:sub_filter &qu...

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

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

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

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。