效果预览

按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。

https://codepen.io/comehope/pen/mGdXGJ

可交互视频

此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。

请用 chrome, safari, edge 打开观看。

https://scrimba.com/p/pEgDAM/c3qL7Sz

源代码下载

每日前端实战系列的全部源代码请从 github 下载:

https://github.com/comehope/front-end-daily-challenges

代码解读

定义 dom,容器中包含 1 个 .car 元素,它的 2 个子元素分别代表车身和车轮:

<figure class="loader">
<div class="car">
<span class="body"></span>
<span class="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: 0 5em 1em 0 / 0 4em 1em 0;
}

画出尾冀:

.car::before {
content: '';
position: absolute;
width: 0;
height: 0;
border: 0.6em solid transparent;
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.4em solid;
border-radius: 3em 4.5em 0 0 / 3em 4em 0 0;
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.3em solid #333;
background-image:
linear-gradient(
135deg,
transparent 45%,
currentColor 46%, currentColor 54%,
transparent 55%
),
linear-gradient(
90deg,
transparent 45%,
currentColor 46%, currentColor 54%,
transparent 55%
),
linear-gradient(
45deg,
transparent 45%,
currentColor 46%, currentColor 54%,
transparent 55%
),
linear-gradient(
0deg,
transparent 45%,
currentColor 46%, currentColor 54%,
transparent 55%
),
radial-gradient(
currentColor 29%,
transparent 30%, transparent 50%,
currentColor 51%
);
}

把车轮定位到左右两侧:

.wheels::before {
left: 1.2em;
} .wheels::after {
right: 0.8em;
}

接下来制作动画效果。

增加表示风影的 dom 元素 .strikes,它包含 5 个子元素:

<figure class="loader">
<div class="car">
<span class="body"></span>
<span class="wheels"></span>
</div>
<div class="strikes">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</figure>

画出 5 段短细线:

.strikes {
position: absolute;
width: 1em;
height: inherit;
border: 1px dashed white;
display: flex;
flex-direction: column;
justify-content: space-between;
} .strikes span {
height: 0.1em;
background-color: lightcyan;
}

增加风影飘逝的动画效果,定义 css 变量,设置动画延时:

.strikes span {
animation: drift 0.2s linear infinite;
animation-delay: calc((var(--n) - 1) * 0.05s);
} @keyframes drift {
from {
transform: translate(3.5em);
} to {
transform: translate(-8em);
filter: opacity(0);
}
} .strikes span:nth-child(1) {
--n: 1;
} .strikes span:nth-child(2) {
--n: 2;
} .strikes span:nth-child(3) {
--n: 3;
} .strikes span:nth-child(4) {
--n: 4;
} .strikes span:nth-child(5) {
--n: 5;
}

增加轮子转动动画效果:

.wheels::before,
.wheels::after {
animation: rotating 0.5s linear infinite;
} @keyframes rotating {
to {
transform: rotate(1turn);
}
}

增加车身颠簸的动画效果:

.car {
animation: run 0.25s linear infinite;
} @keyframes run {
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);
}
}

大功告成!

前端每日实战:113# 视频演示如何用纯 CSS 创作一个赛车 loader的更多相关文章

  1. 前端每日实战:45# 视频演示如何用纯 CSS 创作一个菱形 loader 动画

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/eKzjqK 可交互视频教程 此视频 ...

  2. 前端每日实战:65# 视频演示如何用纯 CSS 创作一个摇摇晃晃的 loader

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览.https://codepen.io/comehope/pen/oyJvpe 可交互视频 此视频是可以 ...

  3. 前端每日实战:146# 视频演示如何用纯 CSS 创作一个脉动 loader

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/wYvGwr 可交互视频 此视频是可 ...

  4. 前端每日实战:42# 视频演示如何用纯 CSS 创作一个均衡器 loader 动画

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/oybWBy 可交互视频教程 此视频 ...

  5. 前端每日实战:8# 视频演示如何用纯 CSS 创作一个充电 loader 特效

    效果预览 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/deNqdV 可交互视频教程 此视频是可以交 ...

  6. 前端每日实战:122# 视频演示如何用纯 CSS 创作一个苹果系统的相册图标

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/zJKwbO 可交互视频 此视频是可 ...

  7. 前端每日实战:157# 视频演示如何用纯 CSS 创作一个棋盘错觉动画(实际上每一行都是平行的)

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/VEyoGj 可交互视频 此视频是可 ...

  8. 前端每日实战:158# 视频演示如何用纯 CSS 创作一个雨伞 toggle 控件

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/pxLbjv 可交互视频 此视频是可 ...

  9. 前端每日实战:156# 视频演示如何用纯 CSS 创作一个飞机舷窗风格的 toggle 控件

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/jeaOrw 可交互视频 此视频是可 ...

随机推荐

  1. xcode7 上传APPStore错误ERROR ITMS-90474: iPad Multitasking support requires these orientations

    在使用Xcode7 上传AppStore时候发现ERROR ITMS-90474错误.报错描述如下: ERROR ITMS-90474: “Invalid Bundle. iPad Multitask ...

  2. C - The Battle of Chibi HDU - 5542 (树状数组+离散化)

    Cao Cao made up a big army and was going to invade the whole South China. Yu Zhou was worried about ...

  3. How Cocoa Beans Grow And Are Harvested Into Chocolate

    What is Cocoa Beans Do you like chocolate? Most people do. The smooth, brown candy is deliciously sw ...

  4. VB.Net 正则表达式测试器

    VB.Net制作的正则表达式工具,查询结果可以导出到Excel. 界面截图: 软件下载 Regexp.rar

  5. 忘记mysql root用户密码的解决办法(skip-grant-tables)

    skip-grant-tables顾名思义,数据库启动的时候 跳跃权限表的限制,不用验证密码,直接登录. 注意: 这种情况只有在忘记root密码 不得已重启数据库的情况下使用的.现网环境慎用,需要重启 ...

  6. xshell+xftp将项目部署到远程服务器上

    Xshell 简介: Xshell 是一个强大的安全终端模拟软件,它支持SSH1, SSH2, 以及Microsoft Windows 平台的TELNET 协议. Xshell 通过互联网到远程主机的 ...

  7. 利用VLC解码youtube视频链接

    一.需求 现在有youtube视频播放链接(I),需要得到可以直接播放的视频链接(O). 输入链接(I): https://www.youtube.com/watch?v=xAsjRRMMg_Q 输出 ...

  8. Part-Linux-2

    1.cgi #1.创建cgi-bin目录#2.创建hi.json -> {"hi":"hello"}#3.python2 -m CGIHTTPServer ...

  9. 吴裕雄--天生自然 Hadoop大数据分布式处理:centos7修改系统时间、时区

    cp -f /usr/share/zoneinfo/Asia/Shanghai /etc/localtime 修改完后需要重启.

  10. django的引入安装

    一 django引入 1 web应用介绍 1 什么是web应用 Web应用程序是一种可以通过Web访问的应用程序,程序的最大好处是用户很容易访问应用程序,用户只需要有浏览器即可,不需要再安装其他软件 ...