Html
    Css
    Js

    
                        
main {
	width:100%;
	height:529px;
	display:flex;
	flex-direction:column;
	align-items:center;
}
.path {
	width:300px;
	height:300px;
	border-radius:50%;
	margin:100px auto;
	position:relative;
	display:flex;
	border:1px solid #456eff;
}
.logo {
	width:52px;
	margin:auto;
	background:#FFF;
}
.avatar {
	width:50px;
	position:absolute;
	top:124px;
	left:124px;
	animation:circular-smooth-spin 7.5s infinite linear;
	animation-play-state:running;
}
.avatar > img {
	width:inherit;
	border-radius:50%;
	overflow:hidden;
}
.path:hover .avatar {
	animation-play-state:paused;
}
.avatar:nth-of-type(2) {
	animation-delay:-1.5s;
}
.avatar:nth-of-type(3) {
	animation-delay:-3s;
}
.avatar:nth-of-type(4) {
	animation-delay:-4.5s;
}
.avatar:nth-of-type(5) {
	animation-delay:-6s;
}
@keyframes circular-smooth-spin {
	from {
	transform:rotate(0turn) translateY(-154px) rotate(1turn)
}
to {
	transform:rotate(1turn) translateY(-154px) rotate(0turn)
}
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:2.1.4
 立即下载

纯css实现摩天轮效果

更新时间:2023-12-12 23:34:28

此效果巧妙利用rotate(0turn) > rotate(1turn),函数进行旋转

0