龙空技术网

前端CSS学习笔记:旋转头像效果

曾也疯 76

前言:

当前大家对“css自我旋转”大约比较关怀,各位老铁们都想要剖析一些“css自我旋转”的相关知识。那么小编在网络上网罗了一些有关“css自我旋转””的相关知识,希望咱们能喜欢,大家快快来了解一下吧!

实现效果视频

视频加载中...

实现代码

<!DOCTYPE html><html lang="en"><head>	<meta charset="UTF-8">	<title></title>	<style>		.tx span img {			/* 设置对象使用圆角边框 */			border-radius: 50%;			margin: 100px;			/* 设置对象变换时的过渡效果 */			transition: all 1s;		}		/* 设置元素在鼠标悬停时的样式 */		.tx span img:hover {			/* 逆时针旋转 */			transform: rotate(-360deg);		}	</style></head><body>	<div class="tx">		<span>			<img src="罪业狂屠-暖心女仆.jpg" height="80" width="80" alt="">		</span>	</div></body></html>

标签: #css自我旋转