效果图

各位朋友大家好！

今天给大家带来的是 纯CSS3实现汽车行驶动画

看完效果图以后 是不是很炫酷！

想要文件版源码的，请加穷522323792

废话不多说，上源码

CSS：

body{

margin:0;

color:#444;

background:#00c380;

font:300 18px/18px Roboto, sans-serif;

}

*,:after,:before{box-sizing:border-box}

.pull-left{float:left}

.pull-right{float:right}

.clearfix:after,.clearfix:before{content:'';display:table}

.clearfix:after{clear:both;display:block}

body{text-align:center;padding:80px;padding-top:

0;overflow:hidden}

.car .mirror-wrap:before,

.car .mirror-wrap:after,

.car .mirror-inner:before,

.car .mirror-inner:after,

.car .middle .top:before,

.car .middle .top:after,

.car .lights:before,

.car .lights:after,

.car .bumper .top:before,

.car .bumper .top:after,

.car .bumper .middle:before,

.car .tyres .tyre:before,

.car .tyres .tyre:after

{

content:'';

position:absolute;

}

.car{

z-index:1;

margin:0 auto;

position:relative;

display:inline-block;

}

.car .body{

z-index:1;

position:relative;

-webkit-animation:suspension 4s linear infinite;

animation:suspension 4s linear infinite;

}

.car .mirror-wrap{

width:88px;

height:30px;

margin:auto;

position:relative;

background-color:#fff;

border-top-left-radius:45px 10px;

border-top-right-radius:45px 10px;

}

.car .mirror-wrap:before,

.car .mirror-wrap:after{

top:8px;

border:5px solid #1a1c20;

border-top:15px solid transparent;

}

.car .mirror-wrap:before{

left:-5px;

border-left:0 solid transparent;

}

.car .mirror-wrap:after{

right:-5px;

border-right:0 solid transparent;

}

.car .mirror-inner{

top:2px;

width:inherit;

height:inherit;

margin:inherit;

position:inherit;

background-color:#1a1c20;

border-top-left-radius:50px 8px;

border-top-right-radius:50px 8px;

}

.car .mirror-inner:before,

.car .mirror-inner:after{

bottom:0;

width:10px;

height:8px;

background-color:#252525;

}

.car .mirror-inner:before{

left:-12px;

border-radius:2px 0 0 5px;

}

.car .mirror-inner:after{

right:-12px;

border-radius:0 2px 5px 0;

}

.car .mirror{

width:100%;

z-index:10;

height:25px;;

overflow:hidden;

position:relative;

border-top-left-radius:45px 10px;

border-top-right-radius:45px 10px;

}

.car .mirror .shine{

left:50%;

width:5px;

z-index:-1;

height:40px;

position:absolute;

margin-left:-2.5px;

background-color:#3d3e3e;

-webkit-animation:shine 4s linear infinite;

animation:shine 4s linear infinite;

}

.car .middle{

z-index:1;

margin-top:-2px;

}

.car .middle .top{

width:98px;

height:14px;

margin:auto;

position:relative;

background-color:#f7f7f7;

}

.car .middle .top:before,

.car .middle .top:after{

top:0;

border:5px solid #f7f7f7;

border-top:9px solid transparent;

}

.car .middle .top:before{

left:-7px;

border-left:2px solid transparent;

}

.car .middle .top:after{

right:-7px;

border-right:2px solid transparent;

}

.car .middle .top .line{

top:2px;

height:1px;

width:44px;

margin:auto;

position:relative;

background-color:#bebebe;

}

.car .middle .bottom{

margin:auto;

width:115px;

height:20px;

margin-top:-2px;

background-color:#dfdfdf;

border-top-left-radius:4px 5px;

border-top-right-radius:4px 5px;

}

.car .lights{

top:5px;

width:111px;

height:12px;

margin:auto;

position:relative;

border-radius:2px;

background-color:#6a6a6a;

}

.car .lights:before,

.car .lights:after{

top:50%;

width:16px;

height:16px;

margin-top:-8px;

border-radius:50%;

background-color:#fff;

border:1px solid #777;

}

.car .lights:before{left:3px}

.car .lights:after{right:3px}

.car .lights .line{

top:50%;

left:50%;

width:50%;

height:1px;

background:#fff;

position:absolute;

-webkit-transform:translateX(-50%);

transform:translateX(-50%);

}

.car .bumper .top{

width:110px;

height:10px;

margin:auto;

position:relative;

background-color:#202428;

border-radius:0 0 6px 6px;

border-top:1px solid #474949;

border-bottom:1px solid #474949;

}

.car .bumper .top:before,

.car .bumper .top:after{

top:50%;

width:10px;

height:4px;

margin-top:-2px;

border-radius:1px;

background-color:#FB8C00;

}

.car .bumper .top:before{left:5px}

.car .bumper .top:after{right:5px}

.car .bumper .middle{

height:8px;

width:102px;

margin:auto;

position:relative;

background-color:#cfcfcf;

border-radius:0 0 6px 6px;

}

.car .bumper .middle:before{

top:50%;

left:50%;

color:#fff;

height:12px;

font-size:8px;

padding:1px 4px;

font-weight:500;

margin-top:-6px;

line-height:10px;

text-align:center;

white-space:nowrap;

content:attr(data-numb);

background-color:#E9573F;

-webkit-transform:translateX(-50%);

transform:translateX(-50%);

}

.car .bumper .bottom{

height:6px;

width:85px;

margin:auto;

position:relative;

background-color:#202428;

border-radius:0 0 6px 6px;

box-shadow:0 1px 11px rgba(0,0,0,.75);

}

.car .tyres{

margin:auto;

width:110px;

position:relative;

}

.car .tyres .tyre{

width:100%;

height:40px;

bottom:-6.5px;

position:absolute;

}

.car .tyres .tyre:before{

left:-5px;

box-shadow:-2px 2px 0 #b7b7b8 inset;

}

.car .tyres .tyre:after{

right:-5px;

box-shadow:2px 2px 0 #b7b7b8 inset;

}

.car .tyres .tyre:before,

.car .tyres .tyre:after{

width:18px;

height:40px;

border-radius:6px;

background-color:#1a1c20;

background:-webkit-linear-gradient(left,#333 50%,#555 50%);

background:linear-gradient(to right,#333 50%,#555 50%);

background-size:2px;

}

.car .tyres .tyre.back:before,

.car .tyres .tyre.back:after{bottom:3px}

.car .tyres .tyre.back:before{left:12px}

.car .tyres .tyre.back:after{right:12px}

.road-wrap{

-webkit-perspective:160px;

perspective:160px;

}

.road-wrap .road{

margin-top:-360px;

-webkit-transform:rotateX(80deg);

transform:rotateX(80deg);

}

.road-wrap .lane-wrap{

-webkit-animation:steer 4s linear infinite;

animation:steer 4s linear infinite;

}

.road-wrap .lane{

width:20px;

margin:auto;

}

.road-wrap .lane>div{

width:100%;

margin:auto;

margin-top:30px;

margin-bottom:30px;

background-color:#fff;

-webkit-animation:lane 4s linear infinite;

animation:lane 4s linear infinite;

}

.road-wrap .lane>div:nth-child(1){height:15px}

.road-wrap .lane>div:nth-child(2){height:20px}

.road-wrap .lane>div:nth-child(3){height:30px}

.road-wrap .lane>div:nth-child(4){height:50px}

.road-wrap .lane>div:nth-child(5){height:40px}

.road-wrap .lane>div:nth-child(6){height:50px}

.road-wrap .lane>div:nth-child(7){height:40px}

.road-wrap .lane>div:nth-child(8){height:50px}

.road-wrap .lane>div:nth-child(9){height:30px}

.road-wrap .lane>div:nth-child(10){height:20px}

.road-wrap .lane>div:nth-child(11){height:15px}

@-webkit-keyframes shine{

0%,80%,100%{

-webkit-transform:translateX(-55px) rotate(24deg);

transform:translateX(-55px) rotate(24deg);

}

5%,15%,25%,35%,45%,55%,65%,75%,85%,95%{background-color:#2d2d2d}

0%,10%,20%,30%,40%,50%,60%,70%,80%,90%,100%{background-color:#4d4d4d}

33%,44%{

-webkit-transform:translateX(30px) rotate(-14deg);

transform:translateX(30px) rotate(-14deg);

}

66%{

-webkit-transform:translateX(0px) rotate(-10deg);

transform:translateX(0px) rotate(-10deg);

}

}

@keyframes shine{

0%,80%,100%{

-webkit-transform:translateX(-55px) rotate(24deg);

transform:translateX(-55px) rotate(24deg);

}

5%,15%,25%,35%,45%,55%,65%,75%,85%,95%{background-color:#2d2d2d}

0%,10%,20%,30%,40%,50%,60%,70%,80%,90%,100%{background-color:#4d4d4d}

33%,44%{

-webkit-transform:translateX(30px) rotate(-14deg);

transform:translateX(30px) rotate(-14deg);

}

66%{

-webkit-transform:translateX(0px) rotate(-10deg);

transform:translateX(0px) rotate(-10deg);

}

}

@-webkit-keyframes lane{

0%{

-webkit-transform:translateY(320px);

transform:translateY(320px);

}

100%{

-webkit-transform:translateY(-160px);

transform:translateY(-160px);

}

}

@keyframes lane{

0%{

-webkit-transform:translateY(320px);

transform:translateY(320px);

}

100%{

-webkit-transform:translateY(-160px);

transform:translateY(-160px);

}

}

@-webkit-keyframes steer{

0%,100%{

-webkit-transform:translateX(-15px) rotate(5deg);

transform:translateX(-15px) rotate(5deg);

}

50%{

-webkit-transform:translateX(15px) rotate(-5deg);

transform:translateX(15px) rotate(-5deg)

}

}

@keyframes steer{

0%,100%{

-webkit-transform:translateX(-15px) rotate(5deg);

transform:translateX(-15px) rotate(5deg);

}

50%{

-webkit-transform:translateX(15px) rotate(-5deg);

transform:translateX(15px) rotate(-5deg)

}

}

@-webkit-keyframes suspension{

0%,75%,100%{

-webkit-transform:rotate(3deg);

transform:rotate(3deg)

}

10%,30%,50%,70%,90%{top:0}

20%,40%,60%,80%,100%{top:-1px}

25%,50%{

-webkit-transform:rotate(-3deg);

transform:rotate(-3deg)

}

20%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}

90%{-webkit-transform:rotate(-1deg);transform:rotate(-1deg)}

}

@keyframes suspension{

0%,75%,100%{

-webkit-transform:rotate(3deg);

transform:rotate(3deg)

}

10%,30%,50%,70%,90%{top:0}

20%,40%,60%,80%,100%{top:-1px}

25%,50%{

-webkit-transform:rotate(-3deg);

transform:rotate(-3deg)

}

20%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}

90%{-webkit-transform:rotate(-1deg);transform:rotate(-1deg)}

}

html汽车跑动特效,纯CSS3实现汽车行驶动画 特效源码！相关推荐

  1. css滑动星星评分,纯css3滑动星星打分动画特效

    特效描述:纯css3 滑动星星打分动画.纯css3滑动星星打分动画特效 代码结构 1. 引入CSS 2. HTML代码 基本样式: Basic star rating: 5 stars 4 stars ...

  2. 2014圣诞节一款纯css3实现的雪人动画特效

    在2014年的圣诞节,爱编程小编给大家分分享一款纯css3实现的雪人动画特效.该实例实现一个雪人跳动的特效,效果图如下: 在线预览   源码下载 实现的代码. html代码: <span cla ...

  3. 纯CSS3实现写轮眼进化动画特效，在别的素材网站要20积分哟，不过我在这里的就直接免费输出了

    纯CSS3实现写轮眼进化动画特效 html <body><div class="container"><!--左眼开始--><div cl ...

  4. 2款不同样式的CSS3 Loading加载动画 附源码

    原文:2款不同样式的CSS3 Loading加载动画 附源码 我们经常看到的Loading加载很多都是转圈圈的那种,今天我们来换一种有创意的CSS3 Loading加载动画,一种是声波形状的动画,另一 ...

  5. html飞机动画,基于纯CSS3纸飞机炫酷动画特效

    简要教程 Flyaway.css是一款使用纯CSS3制作的炫酷纸飞机动画特效.Flyout模式可以应用于登录页面,信息发送成功,如果填的信息有误,可以使用Shake模式,代表信息输入有误. Flyaw ...

  6. 纯css3 夜晚天空月亮动画特效（源码公益站）

    特效截图样式

  7. 纯CSS3绘制神奇宝贝伊布动画特效

    在线演示       本地下载

  8. css3上升悬浮粒子特效,HTML5 CSS3星空背景悬浮粒子动画特效

    CSS 语言: CSSSCSS 确定 /* Config */ /* Styles */ html, body { height: 100%; } body { display: -webkit-bo ...

  9. html加载特效大全,10种炫酷的CSS3 loading加载动画特效

    这是一组效果非常炫酷的纯CSS3 loading加载动画特效.这组loading动画共10种不同的效果,全部使用animation帧动画制作而成.这些特效代码简洁,效果炫酷,非常值得学习借鉴. 制作方 ...

最新文章

  1. Gradle 使用技巧(四) - 如何定位和解决依赖冲突
  2. 无序列表属性 隐藏方式 JS简介
  3. class pybind11::module 没有成员 def
  4. 【dfs】【bfs】【链表】 求连通分量 （ssl 1759）
  5. Mybatis各种模糊查询及#和$区别
  6. 30万手表推荐_一年收入20万—30万的小生意，市场上有哪些呢？推荐几个供参考...
  7. 使用Javascript来创建一个响应式的超酷360度全景图片查看幻灯效果
  8. Oier's little dream
  9. 用php做盒子模型,什么是CSS盒子模型？一文带你了解CSS盒子模型
  10. Android编译判定BoardConfig.mk的宏控是否打开或者有效的验证方法
  11. 为什么我们应该使用 HTML5 开发网站
  12. linux搭建ddos发包机脚本_分享一个linux下自动封IP防御DDOS的脚本-网络教程与技术 -亦是美网络...
  13. 超全超详细的安装nvidia显卡驱动教程
  14. linux就该这么学【进程地址空间】
  15. 频繁默认网关不可用_win7系统默认网关不可用频繁掉线的解决方法
  16. ios 自带录屏框架replayKit的使用
  17. MLY翻译 -- 3.Prerequisites and Notation
  18. Computer Transformation UVA - 1647
  19. 【转】编写高质量代码改善C#程序的157个建议——建议64：为循环增加Tester-Doer模式而不是将try-catch置于循环内...
  20. 导出Excel功能代码

热门文章

  1. iperf测试带宽的问题 -- 上下行带宽差距大
  2. 2021年熔化焊接与热切割证考试及熔化焊接与热切割作业考试题库
  3. 最优质的移动办公工具，TOM VIP邮箱-随心邮
  4. 【2019.09.30】“福大同好”——原型设计展示~（软工实践第四次作业）
  5. 二分法python上机实验报告_数值分析上机实验报告..doc
  6. java毕业生设计学校旧书交易网站计算机源码+系统+mysql+调试部署+lw
  7. 南通大学python期末考试试卷_python期末考试复习试卷
  8. SQLZOO学习，答案
  9. Python淘宝客户自动回复
  10. 数码宝贝大师_数码宝贝大冒险 新TV动画要来了！2020年4月开播！