滚动的轮胎css3动画案例

一、介绍

二、思路分析

三、轮胎制作

1.HTML代码

2.css

3.运行结果

四、轮胎动画

五、路的制作

1.HTML

2.css

六、运行结果

七、结束语

一、介绍

本节内容我们来制作一个轮胎滚动的案例，可以当作一个loading,其中我们的轮胎是纯css完成的，那么我们看下图所示，就是我们今天要讲的案例。

二、思路分析

首先需要画一个轮胎
1.先画一个圆给他一个外边框，以及一个outline属性制作外面的轮廓。
2.再利用一个盒子并且利用伪元素制作轮胎的轴
给主体盒子加一个动画，让其旋转360度，循环播放
制作一条路，给其添加平移动画

三、轮胎制作

1.HTML代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>轮胎</title><link rel="stylesheet" href="./index.css">
</head><body><div class="id"><div class="wheel"><div class="wheel1"></div></div></div>
</body></html>

2.css

html,body{margin: 0;padding: 0;
}
.id{/* 最大层盒子 */width: 100%;height: 200px;/* 让其水平居中，距离顶部100px */margin: 100px auto;display: flex;position: relative;overflow: hidden;
}
.wheel{/* 轮胎主体 */width: 50px;height: 50px;/* 添加灰色外边框 */border: 3px solid rgb(126, 126, 126);/* 设置圆形 */border-radius: 50%;/* 设置外边框以及偏移量 */outline: 18px rgb(44, 185, 173) solid;outline-offset: 3px;/* 让其居中显示 */margin: auto;/* 设置父级flex布局，子级margin:auto让其垂直水平居中显示 */display: flex;position: relative;
}
.wheel::after{/* 制作轮轴 */content: "";display: block;position: absolute;width: 3px;height: 23px;border: solid rgb(126, 126, 126);border-width: 17px 0 16px 0;top: -3px;left: 24px;
}
.wheel::before{content: "";display: block;position: absolute;width: 3px;height: 23px;border: solid rgb(126, 126, 126);border-width: 17px 0 16px 0;transform: rotate(90deg);top: -3px;left: 24px;
}
.wheel1{/* 制作最里层的圆 */width: 20px;height: 20px;border: 3px solid rgb(126, 126, 126);border-radius: 50%;margin: auto;position: relative;
}
.wheel1::after{/* 利用伪元素制作另外两条轮轴 */content: "";display: block;position: absolute;width: 3px;height: 23px;border: solid rgb(126, 126, 126);border-width: 16px 0 16px 0;transform: rotate(45deg);top: -18px;left: 10px;
}
.wheel1::before{content: "";display: block;position: absolute;width: 3px;height: 23px;border: solid rgb(126, 126, 126);border-width: 16px 0 16px 0;transform: rotate(-45deg);top: -18px;left: 10px;
}

3.运行结果

四、轮胎动画

@keyframes circle{0%{}100%{transform: rotate(360deg);}
}

给主体添加动画属性，我们就可以得到一个旋转的轮胎了

.wheel{/* 轮胎主体 */width: 50px;height: 50px;/* 添加灰色外边框 */border: 3px solid rgb(126, 126, 126);/* 设置圆形 */border-radius: 50%;/* 设置外边框以及偏移量 */outline: 18px rgb(44, 185, 173) solid;outline-offset: 3px;/* 让其居中显示 */margin: auto;/* 设置父级flex布局，子级margin:auto让其垂直水平居中显示 */display: flex;position: relative;animation:circle 1s infinite linear  ;
}

五、路的制作

1.HTML

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>轮胎</title><link rel="stylesheet" href="./index.css">
</head><body><div class="id"><div class="wheel"><div class="wheel1"></div></div><div class="road"></div></div>
</body></html>

2.css

.road{width: 700px;height: 10px;border-radius: 20px;background-color: rgb(44, 185, 173);position: absolute;top: 148px;left: -700px;animation: road 2s infinite linear;
}
@keyframes road{0%{}100%{left: 100vw;}
}