使用纯CSS如何实现一个转动的自行车车轮的动画效果 - 行业资讯

　　介绍

这篇文章给大家分享的是有关使用纯CSS如何实现一个转动的自行车车轮的动画效果的内容。小编觉得挺实用的,因此分享给大家做个参考。一起跟随小编过来看看吧。

源代码下载https://github.com/comehope/front-end-daily-challenges

代码解读

定义dom,容器中包含6个元素:

& lt; div类=皐heel"比; 　　& lt; span> & lt;/span> 　　& lt; span> & lt;/span> 　　& lt; span> & lt;/span> 　　& lt; span> & lt;/span> 　　& lt; span> & lt;/span> 　　& lt; span> & lt;/span> 　　& lt;/div>

居中显示:

身体{ 　　保证金:0; 　　身高:100 vh; 　　显示:flex; 　　对齐项目:中心; 　　justify-content:中心; 　　背景图片:线性渐变(# 555,# 222); 　　}

画出轮圈:

。轮{ 　　宽度:9 em; 　　高度:9 em; 　　字体大小:25 px; 　　边界:0.4 em固体# 777; 　　这个特性:50%; 　　不必:0 0 0 0.5 em # 111; 　　}

定义辐条的样式:

。轮{ 　　显示:flex; 　　对齐项目:中心; 　　justify-content:中心; 　　} 　　　　.wheel跨度{ 　　位置:绝对的; 　　宽度:8 em; 　　身高:1 em; 　　边界:0.1 em固体; 　　边框颜色:# ccc透明; 　　}

定义变量,画出多根幅条:

。轮跨越{ 　　变换:旋转(calc ((var (- n) - 1) * 30度)); 　　} 　　　　.wheel跨度:nth-child (1) { 　　——n: 1; 　　} 　　　　.wheel跨度:nth-child (2) { 　　——n: 2; 　　} 　　　　.wheel跨度:nth-child (3) { 　　——n: 3; 　　} 　　　　.wheel跨度:nth-child (4) { 　　——n: 4; 　　} 　　　　.wheel跨度:nth-child (5) { 　　——n: 5; 　　} 　　　　.wheel跨度:nth-child (6) { 　　——n: 6; 　　}

让车轮转动起来:

。轮跨越{ 　　动画:跑4 s线性无限; 　　} 　　　　@keyframes运行{ 　　,{ 　　变换:旋转(calc ((var (- n) - 1) * 30度+ 360度)); 　　} 　　}

用伪元素画出地面上的线条:

。轮{ 　　位置:相对; 　　} 　　　　{前.wheel:: 　　内容:& # 39;& # 39;; 　　位置:绝对的; 　　宽度:15他们; 　　高度:0.2 em; 　　上图:11 em; 　　背景图片:线性渐变( 　　到右, 　　银0,4, 　　透明4 em、透明5 em, 　　银5 em、银10 em, 　　10 em透明,透明的12个新兴市场, 　　银12 em,银14 em, 　　15他们透明14 em、透明　　); 　　}

最后,让地面上的线条动起来,形成车轮向前走的效果:

。轮:{之前　　背景位置:15他们; 　　动画:run2 6 s线性无限; 　　} 　　@keyframes run2 { 　　,{ 　　背景位置:-15 em; 　　} 　　}

感谢各位的阅读!关于使用纯CSS如何实现一个转动的自行车车轮的动画效果就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到吧!