摘要:效果预览按下右侧的点击预览按钮可以在当前页面预览,点击链接可以全屏预览。可交互视频此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。
效果预览
按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。
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 个子元素代表车头和尾气;
代表道路:
居中显示,同时道路与页面之间留出空间:
body { margin: 10%; padding-top: 10%; }
画出卡车车厢:
.truck { width: 15em; height: 5em; font-size: 10px; background-color: #444; border-radius: 0.4em; }
用伪元素画出车厢的车轮:
.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; }
画出车头:
.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; }
画出车头的车轮:
.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; }
画出尾气的初始状态:
.smoke, .smoke::before, .smoke::after { content: ""; position: absolute; width: 1em; height: 1em; background-color: #333; right: -0.1em; bottom: -0.5em; border-radius: 50%; }
增加排出尾气的动画:
.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; } }
增加尾气的飘散效果:
.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); } }
增加卡车行驶的动画效果:
.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); } }
增加卡片行驶中颠簸的动画效果:
.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; } }
大功告成!
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/113709.html
摘要:效果预览按下右侧的点击预览按钮可以在当前页面预览,点击链接可以全屏预览。可交互视频此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。 showImg(https://segmentfault.com/img/bVbfdO7?w=400&h=300); 效果预览 按下右侧的点击预览按钮可以在当前页面预览,点击链接可以全屏预览。 https://codepen.io/comehop...
摘要:过往项目年月份项目汇总共个项目年月份项目汇总共个项目年月份项目汇总共个项目年月份发布的项目前端每日实战专栏每天分解一个前端项目,用视频记录编码过程,再配合详细的代码解读,是学习前端开发的活的参考书视频演示如何用纯创作一台咖啡机视频演示如何用 过往项目 2018 年 6 月份项目汇总(共 27 个项目) 2018 年 5 月份项目汇总(共 30 个项目) 2018 年 4 月份项目汇总(...
摘要:过往项目年月份项目汇总共个项目年月份项目汇总共个项目年月份项目汇总共个项目年月份发布的项目前端每日实战专栏每天分解一个前端项目,用视频记录编码过程,再配合详细的代码解读,是学习前端开发的活的参考书视频演示如何用纯创作一台咖啡机视频演示如何用 过往项目 2018 年 6 月份项目汇总(共 27 个项目) 2018 年 5 月份项目汇总(共 30 个项目) 2018 年 4 月份项目汇总(...
阅读 2844·2021-11-11 10:58
阅读 1875·2021-10-11 10:59
阅读 3463·2019-08-29 16:23
阅读 2301·2019-08-29 11:11
阅读 2765·2019-08-28 17:59
阅读 3791·2019-08-27 10:56
阅读 2023·2019-08-23 18:37
阅读 3084·2019-08-23 16:53