如何用纯 CSS 创作一个货车 loader

简介: 效果预览在线演示按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。https://codepen.io/comehope/pen/vaPGRz可交互视频此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。

效果预览

在线演示

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

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

可交互视频

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

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

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

源代码下载

本地下载

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

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

代码解读

定义 dom,容器代表卡车,包含的 2 个子元素代表车头和尾气;<hr> 代表道路:

&lt;div class="truck"&gt;
    &lt;span class="cab"&gt;&lt;/span&gt;
    &lt;span class="smoke"&gt;&lt;/span&gt;
&lt;/div&gt;
&lt;hr&gt;
AI 代码解读

居中显示,同时道路与页面之间留出空间:

body {
    margin: 10%;
    padding-top: 10%;
}
AI 代码解读

画出卡车车厢:

.truck {
    width: 15em;
    height: 5em;
    font-size: 10px;
    background-color: #444;
    border-radius: 0.4em;
}
AI 代码解读

用伪元素画出车厢的车轮:

.truck {
    position: relative;
}

.truck::before,
.truck::after {
    content: '';
    position: absolute;
    box-sizing: border-box;
    width: 2em;
    height: 2em;
    background-color: #444;
    border: 0.1em solid white;
    border-radius: 50%;
    bottom: -1em;
}

.truck::before {
    left: 0.6em;
}

.truck::after {
    right: 0.6em;
}
AI 代码解读

画出车头:

.cab {
    position: absolute;
    width: 3.3em;
    height: 2.5em;
    background-color: #333;
    left: -3.5em;
    bottom: 0;
    border-radius: 40% 0 0.4em 0.4em;
}

.cab::before {
    content: '';
    position: absolute;
    width: 2em;
    height: 1.5em;
    background-color: #333;
    top: -1.5em;
    right: 0;
    border-radius: 100% 0 0 0;
}
AI 代码解读

画出车头的车轮:

.cab::after {
    content: '';
    position: absolute;
    box-sizing: border-box;
    width: 2em;
    height: 2em;
    background-color: #444;
    border: 0.1em solid white;
    border-radius: 50%;
    bottom: -1em;
    left: 0.5em;
}
AI 代码解读

画出尾气的初始状态:

.smoke,
.smoke::before,
.smoke::after {
    content: '';
    position: absolute;
    width: 1em;
    height: 1em;
    background-color: #333;
    right: -0.1em;
    bottom: -0.5em;
    border-radius: 50%;
}
AI 代码解读

增加排出尾气的动画:

.smoke {
    animation: smoke-1 2s infinite;
}

.smoke::before {
    animation: smoke-2 2s infinite;
}

.smoke::after {
    animation: smoke-3 2s infinite;
}

@keyframes smoke-1 {
    to {
        width: 3em;
        height: 3em;
        right: -3em;
        bottom: 0.5em;
    }
}

@keyframes smoke-2 {
    to {
        width: 2.5em;
        height: 2.5em;
        right: -6em;
        bottom: 0.8em;
    }
}

@keyframes smoke-3 {
    to {
        width: 3.5em;
        height: 3.5em;
        right: -4em;
        bottom: 0.2em;
    }
}
AI 代码解读

增加尾气的飘散效果:

.smoke {
    animation:
        drift 2s infinite,
        smoke-1 2s infinite;
}

.smoke::before {
    animation: 
        drift 3s infinite,
        smoke-2 3s infinite;
}

.smoke::after {
    animation: 
        drift 4s infinite,
        smoke-3 4s infinite;
}

@keyframes drift {
    0%, 100% {
        filter: opacity(0);
    }

    15% {
        filter: opacity(0.9);
    }
}
AI 代码解读

增加卡车行驶的动画效果:

.truck {
    animation: 
        move 5s infinite;
}

@keyframes move {
    0% {
        margin-left: 90%;
    }

    50% {
        margin-left: 45%;
    }

    100% {
        margin-left: 0;
    }

    0%, 100% {
        filter: opacity(0);
    }

    10%, 90% {
        filter: opacity(1);
    }
}
AI 代码解读

增加卡片行驶中颠簸的动画效果:

.truck {
    animation: 
        put-put 2s infinite,
        move 10s infinite;
}

@keyframes put-put {
    0% {
        margin-top: 0;
        height: 5em;
    }

    5% {
        margin-top: -0.2em;
        height: 5.2em;
    }

    20% {
        margin-top: -0.1em;
        height: 5em;
    }

    35% {
        margin-top: 0.1em;
        height: 4.9em;
    }

    40% {
        margin-top: -0.1em;
        height: 5.1em;
    }

    60% {
        margin-top: 0.1em;
        height: 4.9em;
    }

    75% {
        margin-top: 0;
        height: 5em;
    }

    80% {
        margin-top: -0.4em;
        height: 5.2em;
    }

    100% {
        margin-top: 0.1em;
        height: 4.9em;
    }
}
AI 代码解读

大功告成!

原文地址:https://segmentfault.com/a/1190000015982054
目录
打赏
0
0
0
0
108
分享
相关文章
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
2天前
css3 svg制作404页面动画效果HTML源码
css3 svg制作404页面动画效果HTML源码
53 34
|
6天前
html+js+css实现的建筑方块立体数字时钟源码
html+js+css实现的建筑方块立体数字时钟源码
58 33
|
27天前
一个好看的小时钟html+js+css源码
一个好看的小时钟html+js+css源码
105 24
2s 利用 HTML+css动画实现企业官网效果
2s 利用 HTML+css动画实现企业官网效果
如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤
本文深入介绍了如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤。通过实例展示了主页、关于我们、产品展示、新闻动态及联系我们等页面的设计与实现,强调了合理布局、美观设计及用户体验的重要性。旨在为企业打造一个既专业又具吸引力的线上平台。
97 7
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
56 6
打造个人博客网站:从零开始的HTML和CSS之旅
【9月更文挑战第32天】在这个数字化的时代,拥有一个个人博客不仅是展示自我的平台,也是技术交流的桥梁。本文将引导初学者理解并实现一个简单的个人博客网站的搭建,涵盖HTML的基础结构、CSS样式的美化技巧以及如何将两者结合来制作一个完整的网页。通过这篇文章,你将学会如何从零开始构建自己的网络空间,并在互联网世界留下你的足迹。
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等