源代码下载
https://github.com/comehope/front-end-daily-challenges
代码解读
定义dom，容器中包含1个.car元素，它的2个子元素分别代表车身和车轮：
<figureclass="loader">
<divclass="car">
<spanclass="body"></span>
<spanclass="wheels"></span>
</div>
</figure>
居中显示：
body{
margin:0;
height:100vh;
display:flex;
align-items:center;
justify-content:center;
background-color:#333;
}
定义容器尺寸和车的颜色：
.loader{
width:11.7em;
height:4.2em;
color:lightcyan;
position:relative;
}
画出底盘：
.car{
position:absolute;
width:inherit;
height:2em;
background-color:currentColor;
top:1.5em;
border-radius:05em1em0/04em1em0;
}
画出尾冀：
.car::before{
content:'';
position:absolute;
width:0;
height:0;
border:0.6emsolidtransparent;
border-left-width:0;
border-right-color:currentColor;
transform-origin:left;
transform:rotate(-45deg);
top:-0.5em;
}
（这时看起来有点儿像飞机，哈哈~~）
画出车身：
.body{
position:absolute;
width:7.5em;
height:3.5em;
box-sizing:border-box;
border:0.4emsolid;
border-radius:3em4.5em00/3em4em00;
top:-1.5em;
left:1.2em;
}
用伪元素画出车窗：
.body::before{
content:'';
position:absolute;
width:3.5em;
height:inherit;
background-color:currentColor;
border-top-left-radius:inherit;
left:-0.4em;
top:-0.4em;
}
画出车轮的轮廓：
.wheels::before,
.wheels::after{
content:'';
position:absolute;
box-sizing:border-box;
width:2.6em;
height:2.6em;
background-color:#333;
border-radius:50%;
bottom:-1em;
}
画出轮毂：
.wheels::before,
.wheels::after{
border:0.3emsolid#333;
background-image:
linear-gradient(
135deg,
transparent45%,
currentColor46%,currentColor54%,
transparent55%
),
linear-gradient(
90deg,
transparent45%,
currentColor46%,currentColor54%,
transparent55%
),
linear-gradient(
45deg,
transparent45%,
currentColor46%,currentColor54%,
transparent55%
),
linear-gradient(
0deg,
transparent45%,
currentColor46%,currentColor54%,
transparent55%
),
radial-gradient(
currentColor29%,
transparent30%,transparent50%,
currentColor51%
);
}
把车轮定位到左右两侧：
.wheels::before{
left:1.2em;
}
.wheels::after{
right:0.8em;
}
接下来制作动画效果。
增加表示风影的dom元素.strikes，它包含5个子元素：
<figureclass="loader">
<pclass="car">
<spanclass="body"></span>
<spanclass="wheels"></span>
</p>
<pclass="strikes">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</p>
</figure>
画出5段短细线：
.strikes{
position:absolute;
width:1em;
height:inherit;
border:1pxdashedwhite;
display:flex;
flex-direction:column;
justify-content:space-between;
}
.strikesspan{
height:0.1em;
background-color:lightcyan;
}
增加风影飘逝的动画效果，定义css变量，设置动画延时：
.strikesspan{
animation:drift0.2slinearinfinite;
animation-delay:calc((var(--n)-1)*0.05s);
}
@keyframesdrift{
from{
transform:translate(3.5em);
}
to{
transform:translate(-8em);
filter:opacity(0);
}
}
.strikesspan:nth-child(1){
--n:1;
}
.strikesspan:nth-child(2){
--n:2;
}
.strikesspan:nth-child(3){
--n:3;
}
.strikesspan:nth-child(4){
--n:4;
}
.strikesspan:nth-child(5){
--n:5;
}
增加轮子转动动画效果：
.wheels::before,
.wheels::after{
animation:rotating0.5slinearinfinite;
}
@keyframesrotating{
to{
transform:rotate(1turn);
}
}
增加车身颠簸的动画效果：
.car{
animation:run0.25slinearinfinite;
}
@keyframesrun{
0%{
transform:translate(0.2em,0.1em)rotate(0deg);
}
20%{
transform:translate(0.1em,0.2em)rotate(1deg);
}
40%{
transform:translate(0.1em,-0.1em)rotate(-1deg);
}
60%{
transform:translate(-0.1em,0.2em)rotate(0deg);
}
80%{
transform:translate(-0.1em,0.1em)rotate(1deg);
}
100%{
transform:translate(0.2em,0.1em)rotate(-1deg);
}
}
本文转载自中文网
本文转载自中文网
如需转载，请注明文章出处和来源网址：http://www.divcss5.com/css3-style/c55518.shtml
