HTML,CSS实现滚动车轮效果

1.前言

今天翻看网页时发现汽车租赁服务公司宣传网站的loading效果很有意思,是一个向前滚动的轮胎的效果,我们尝试用HTML,CSS实现一下。

源网站:http://www.jqueryfuns.com/resource/view/6147

效果图

 2.代码实现

        HTML部分

        

<div class="box">
		<div class="box1">
			<div class="box2">
				<ul class="box3">
					<li></li>
					<li></li>
					<li></li>
					<li></li>
				</ul>
				<div class="box4"></div>
			</div>
		</div>
	</div>
	<div class="item"></div>

 以上便是基本的HTML代码结构,这里是使用大盒子套小盒子的方式,用覆盖的方法来实现盒子之间的空隙

ul,li标签来实现车轮的轮毂

box4盒子来实现出轮下面横线

CSS部分 

.box {
	width: 200px;
	height: 200px;
	background-color: #2cb9ad;
	border-radius: 50%;
	margin: 100px auto 0;
	display: flex;
	align-items: center;
	justify-content: center;
	animation: move 2s infinite linear; 
}
.box1{
	width: 160px;
	height: 160px;
	border-radius: 50%;
	background-color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
}
.box2 {
	width: 120px;
	height: 120px;
	border: 8px solid #7e7e7e;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}
.box3 {
	width: 40px;
	height: 40px;
	border: 8px solid #7e7e7e;
	background-color: transparent;
	border-radius: 50%;
	position: relative;
}
.box3>li:nth-child(1) {
	width: 8px;
	height: 132px;
	background-color: #7e7e7e;
	position: absolute;
	top: -45px;
    left: 16px;
    transform: rotate(10deg)
}
.box3>li:nth-child(2) {
	width: 8px;
	height: 132px;
	background-color: #7e7e7e;
	position: absolute;
	top: -45px;
    left: 16px;
    transform: rotate(53.57deg)
}
.box3>li:nth-child(3) {
	width: 8px;
	height: 132px;
	background-color: #7e7e7e;
	position: absolute;
	top: -45px;
    left: 16px;
    transform: rotate(97.5deg)
}
.box3>li:nth-child(4) {
	width: 8px;
	height: 132px;
	background-color: #7e7e7e;
	position: absolute;
	top: -45px;
    left: 16px;
    transform: rotate(141.25deg)
}
.box4 {
	width: 42px;
	height: 42px;
	border-radius:50%;
	background-color: #fff;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50% ,-50%);
}
@keyframes move {
	from {}
	to {
		transform: rotate(-360deg);
	}
}
.item {
	width: 600px;
	height: 10px;
	background-color: #2cb9ad;
	border-radius: 5px;
	margin:  auto;
	transform: translateX(-1265px);
	animation: mover 10s  linear forwards;
}
@keyframes mover {
	from {}
	to {
		transform: translateX(210px);
	}
}

首先我们给box盒子设置宽高圆角,来实现车轮最外层的轮胎部分,并且使用弹性盒子的方式,让box1垂直水平居中

给box1盒子设置白色的背景,覆盖box的中心,让box变成一个圆环,同样添加弹性盒子布局,

box2 设置好宽高后,给box2添加一个8px的边框来实现轮毂外侧

box3盒子使用的是ul标签,和上面的步骤一样,设置宽高,垂直首屏居中盒子内侧,给一个8px的边框来实现轮毂内侧,

我们设计的小车轮一共有八个轮毂,所以在这里,写了四个li标签,给每个li标签设置相同宽高

width: 8px;
height: 132px;

 我们使用定位,让li标签连接轮毂外侧的内边,之后使用 transform: rotate,给每个标签设置角度,让每个li标签旋转,就可以实现车轮轮毂了

之后box4盒子设置白色背景,使用绝对定位覆盖在li标签的交叉点,因为绝对定位脱离标准文档流,所以li标签的灰色交叉点就消失不见了,

下一步就是让我们的车轮转起来, 

使用的是CSS3的animation动画了,我们给box盒子动画时间设置为两秒,让他匀速播放重复执行,

之后通过@keyframes 来设置动画规则,通过transform: rotate,设置-360deg,这样盒子就会一直转动了,这里为什么设置-360deg而不是360degne?,因为给盒子设置成360deg,他是向后转动的,所以在这里,我们给设置成-360deg

360deg

,最后就剩下最后一个盒子.item了,在这里给item设置了宽600px,高10px,之后使用transform: translateX,gei负值让它移除视口,

之后item添加一个2秒的动画,让他向右匀速移动并让画面定格到最后一帧,

 3.总结

到这里,关于滚动的车轮的这个动画效果也是完成了

由于本人是第一次发布博客,如果有错误,不足,或者是侵权行为,请在评论区留言,小编在这里及时更改。