web前端|css教程
前端,html5,css,animation,position
web前端-css教程
仿分销王源码,keras在ubuntu运行,财务爬虫软件入门,几率php,商店SEO排名lzw
效果预览
搜读小说网站源码,vscode主题切换,ubuntu内存使用情况,执行tomcat,sqlite 忘了密码,上海那个服务器,美团插件平台是什么,微软云 前端框架,新浪微博爬虫 数据,学生php培训,seo优化培训哪家好,html博客网站,掷骰子网页,go html 模板,帝国cms搜索页面支持,网格化管理系统 源代码,易语言控制台程序是什么lzw
网页自助下单源码,ubuntu卸载桌面命令,爬虫经典书籍推荐,php白杨,张开辉SEOlzw
源代码下载
/comehope/front-end-daily-challenges
代码解读
定义 dom，容器中包含 1 个.car元素，它的 2 个子元素分别代表车身和车轮：
居中显示：
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 个子元素：
画出 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); }}
大功告成！
如何使用纯CSS实现彩虹条纹文字的效果（附代码）
如何使用CSS和混色模式实现loader动画效果（附代码）
