使用transition制作头像边框，鼠标移入旋转效果

最新推荐文章于 2023-05-30 17:31:37 发布

吾等汝多时

最新推荐文章于 2023-05-30 17:31:37 发布

阅读量474

点赞数 1

分类专栏： css3 文章标签： css3

本文链接：https://blog.csdn.net/ice__wine/article/details/111193823

版权

css3 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在这里插入图片描述

CSS3中的过渡Transition有四个中心属性：

transition-property
transition-duration
transition-delay
transition-timing

（1）transition-property

none：transition马上停止执行
all：元素产生任何属性值变化时都将执行transition效果
attr：指定要运动的样式

（2）transition-duration

transition-duration是指定元素转换过程的持续时间，单位为秒(s)。
transition-duration可以作用于所有元素
包括:before和:after伪元素，默认值是0。

（3）transition-delay

transition-delay是用来指定一个动画开始执行的时间，也就是说当改变元素属性值后多长时间开始执行transition效果，单位为s(秒)

（4）transition-timing

transition-timing-function ： ease(逐渐变慢) | linear(匀速) | ease-in(加速) | ease-out(减速) | ease-in-out(先加速然后减

速) | cubic-bezier(该值允许你去自定义一个时间曲线)(number, number, number, number>)

实际效果

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
	<style>
		dl{
			width:200px;
			height:200px;
			margin:50px auto;
			border:1px solid;
			display:flex;
			justify-content:center;
			align-items:center;
		}
		dt{
		  position:relative;
		}
		img{
			display:block;
			width:100px;
			height:100px;
			border-radius:50%;
		}
		em{
				position:absolute;
				top:-15px;
				left:-15px;
				display: block;
				transition: transform .6s ease-out;
				width:100px;
				height:100px;
				border: 5px solid #e5e5e5;
				border-left-color: #7ebdfa;
				border-right-color: #7ebdfa;
				border-radius: 100%;
				padding:10px;
				overflow:hidden;
		}
		em:hover{
			transform:rotate(270deg);
		}
	</style>
</head>
<body>
<dl>
	<dt>
		<img class="headImg" src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1819216937,2118754409&fm=26&gp=0.jpg">
		<em></em>
	</dt>
</dl>
</body>
</html>

吾等汝多时

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
2
评论
使用transition制作头像边框，鼠标移入旋转效果

CSS3中的过渡Transition有四个中心属性：transition-propertytransition-durationtransition-delaytransition-timing（1）transition-propertynone：transition马上停止执行all：元素产生任何属性值变化时都将执行transition效果attr：指定要运动的样式（2）transition-durationtransition-duration是指定元素转换过程的持续时间..
复制链接

扫一扫