CSS3 小动画练习——行驶的汽车

最新推荐文章于 2022-10-09 11:45:56 发布
最新推荐文章于 2022-10-09 11:45:56 发布
阅读量1.3k 收藏 11
点赞数 3
分类专栏： 笔记 文章标签： css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35370002/article/details/111331948
版权

CSS3 小动画练习——行驶的汽车

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uEkRwqu3-1608209001966)(JKK{`Z7N6V0~VSD156@EIBB.png)]

今天来使用 CSS3 中的 animotion 动画绘制一个在公路上行走的汽车。
首先我们在网上随便找到一张免扣的汽车素材。
\制,建议将图失败,源站可能有防盗链机制,建议将图片保存下来直接上传片保存下来(img-83exHVRd-1608209001969)(car.png)(

首先我们绘制公路

<div class="road">
  <img src="car.png" alt="" class="car" />
  <ul>
    <li></li>
    //马路的白色虚线
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

.road {
  width: 100%;
  height: 175px;
  background-color: #333;
  position: relative;
  border: 1px solid transparent;
}
ul {
  overflow: hidden;
  white-space: nowrap;//行内元素超出父级宽度后不换行
  height: 20px;
  margin: 75px auto 0;
}
li {
  list-style: none;
  width: 100px;
  display: inline-block;
  height: 20px;
  background-color: #fff;
  margin-right: 30px;
  margin-left: 30px;
  position: relative;
  left: 0;
}

我们首先将 road 设置宽高以及背景颜色。然后利用 ul 无序列表快速生成一堆块级标签，其中 li 用来当作马路上的白色虚线使用。
绘制好之后就是这样：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-snJtv0ZL-1608209001971)(BJ1}XOW80W]JMM7Z@ZJKOUY.png)]

这时的白色虚线太方了，没有一点视觉立体效果，让它们倾斜一些产生点视觉效果可以在 ul 中加入transform: skew(-45deg);,向右倾斜 45°。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-c5xS1Myl-1608209001973)(3.png)]

这样看起来舒服多了。

给马路添加动画效果

首先自定义动画，设置关键帧。

@keyframes road {
  0% {
    left: 0px;
  }
  100% {
    left: -165px;
  }
}

然后使用animotion：动画名 动画时间 动画速度 动画播放次数。在li中插入animation: road 0.5s linear infinite;样式，以0.5s速度匀速完成播放，并且一直循环。
完成后效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mTtfD9Xw-1608209001974)(4.gif)]

好了，剩下的汽车如何让它动起来应该也就知道该怎么做了吧。剩下的感兴趣的可以自己动手实践一下。

源码

素材图

在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="ch">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .sky {
        width: 100%;
        height: 550px;
        background-color: #03a9f4;
        position: relative;
        z-index: -2;
      }
      .cloud {
        width: 100px;
        animation: wind 10s ease-in infinite;
      }
      @keyframes wind {
        50% {
          /* transform: translate(10px); */
          left: 5px;
        }
      }
      .cloud1 {
        position: relative;
        left: 0;
      }
      .cloud2 {
        position: relative;
        left: -70px;
        top: 20px;
      }
      .cloud3 {
        position: relative;
        left: -10px;
        top: 100px;
        z-index: 2;
      }
      .cloud4 {
        position: relative;
        left: -80px;
        top: 70px;
      }

      .cloud5 {
        position: relative;
        left: -11px;
        top: 44px;
      }
      .cloud6 {
        position: relative;
        left: -80px;
        top: 70px;
      }
      .cloud7 {
        position: relative;
        left: -56px;
        top: 70px;
      }
      .cloud8 {
        position: relative;
        left: 24px;
        top: 19px;
      }
      .cloud9 {
        position: relative;
        left: 10px;
        top: 70px;
      }
      .cloud10 {
        position: relative;
        left: 90px;
        top: 40px;
      }
      .cloud11 {
        position: relative;
        left: 158px;
        top: 7px;
      }
      .cloud12 {
        position: relative;
        left: 98px;
        top: 74px;
      }
      .rainbow {
        position: relative;
        width: 220px;
        height: 110px;
        overflow: hidden;
        transform: rotate(3deg);
        left: 1100px;
        top: -89px;
        z-index: -1;
        animation: wind2 8.2s ease-in infinite;
      }
      @keyframes wind2 {
        50% {
          left: 1050px;
        }
      }
      .rainbow-r {
        border: 10px solid #ff0000;
        border-radius: 50%;
        width: 200px;
        height: 200px;
        position: absolute;
      }
      .rainbow-o {
        border: 10px solid #ffa500;
        border-radius: 50%;
        width: 181px;
        position: absolute;
        height: 181px;
        left: 9px;
        top: 9px;
      }
      .rainbow-y {
        border: 10px solid #ffff00;
        border-radius: 50%;
        width: 164px;
        position: absolute;
        height: 161px;
        left: 18px;
        top: 18px;
      }
      .rainbow-g {
        border: 10px solid #008000;
        border-radius: 50%;
        width: 148px;
        position: absolute;
        height: 141px;
        left: 27px;
        top: 27px;
      }
      .rainbow-b {
        border: 10px solid #0000ff;
        border-radius: 50%;
        width: 131px;
        position: absolute;
        height: 131px;
        left: 36px;
        top: 36px;
      }
      .rainbow-p {
        border: 10px solid #4b0082;
        border-radius: 50%;
        width: 113px;
        position: absolute;
        height: 115px;
        left: 45px;
        top: 45px;
      }
      .rainbow-pink {
        border: 10px solid #ee82ee;
        border-radius: 50%;
        width: 97px;
        position: absolute;
        height: 107px;
        left: 53px;
        top: 54px;
      }
      .road {
        width: 100%;
        height: 175px;
        background-color: #333;
        position: relative;
        border: 1px solid transparent;
      }
      li {
        list-style: none;
        width: 100px;
        display: inline-block;
        height: 20px;
        background-color: #fff;
        margin-right: 30px;
        margin-left: 30px;
        position: relative;
        left: 0;
        animation: road 0.5s linear infinite;
      }
      @keyframes road {
        
          0%{
              left: 0px;
          }
          100%{
              left: -165px;
          }
          
      }
      ul {
        overflow: hidden;
        white-space:nowrap;
        height: 20px;
        margin: 75px auto 0;
        transform: skew(-45deg);
      }
      .road .car {
        position: absolute;
        z-index: 20;
        top: -90px;
        left: 0;
        animation: car 26s ease infinite;
      }
      @keyframes car {
        50% {
          left:1000px;
        }
        
      }
    </style>
  </head>
  <body>
    <div class="sky">
      <img src="cloud.png" alt="" class="cloud cloud1" />
      <img src="cloud.png" alt="" class="cloud cloud2" />
      <img src="cloud.png" alt="" class="cloud cloud3" />
      <img src="cloud.png" alt="" class="cloud cloud4" />
      <img src="cloud.png" alt="" class="cloud cloud5" />
      <img src="cloud.png" alt="" class="cloud cloud6" />
      <img src="cloud.png" alt="" class="cloud cloud7" />
      <img src="cloud.png" alt="" class="cloud cloud8" />
      <img src="cloud.png" alt="" class="cloud cloud9" />
      <img src="cloud.png" alt="" class="cloud cloud10" />
      <img src="cloud.png" alt="" class="cloud cloud11" />
      <img src="cloud.png" alt="" class="cloud cloud12" />
      <div class="rainbow">
        <div class="rainbow-r"></div>
        <div class="rainbow-o"></div>
        <div class="rainbow-y"></div>
        <div class="rainbow-g"></div>
        <div class="rainbow-b"></div>
        <div class="rainbow-p"></div>
        <div class="rainbow-pink"></div>
      </div>
    </div>

    <div class="road">
      <img src="car.png" alt="" class="car" />
      <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
  </body>
</html>
帮我砍刀拼多多
关注
  • 3
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
纯CSS3实现汽车行驶动画特效代码
03-20
纯CSS3实现汽车行驶动画是一款纯css制作的额汽车行驶特效
css3蒙版运动,纯CSS3制作逼真的汽车运动动画
weixin_39639518的博客
08-04 453
简要教程这是一款使用纯CSS3制作的逼真汽车运动动画特效。该特效中，所有元素都是通过CSS渲染得到的，没有使用任何图片。它通过公路斑马线的左右晃动来制作出汽车运动的视觉效果。使用方法HTML结构整个汽车运动动画的HTML结构如下：CSS样式CSS样式中主要通过各个汽车组件的:before和:after伪元素来构造汽车。整个特效使用了4个animation动画，分别是：shine前挡风玻璃的流光动画...
css车的操作,纯CSS汽车动画设计(示例代码)
weixin_29463587的博客
08-03 432
Documenthtml {box-sizing: border-box;}*,*:before,*:after {box-sizing: inherit;}body {overflow: hidden;height: 100vh;background: linear-gradient(180deg, #09283d, #1b415c, #29516c, #6e8ea5, #7cadd0, #7c...
html汽车跑动特效,纯CSS3实现汽车行驶动画 特效源码！
weixin_39681621的博客
06-10 1449
效果图各位朋友大家好！今天给大家带来的是 纯CSS3实现汽车行驶动画看完效果图以后 是不是很炫酷！想要文件版源码的，请加穷522323792废话不多说，上源码CSS：body{margin:0;color:#444;background:#00c380;font:300 18px/18px Roboto, sans-serif;}*,:after,:before{box-sizing:border...
纯CSS3制作卡通场景汽车动画效果
weixin_30611509的博客
08-13 231
前言 今天分享一下我昨晚做的CSS3动画效果——卡通场景汽车动画。在接触CSS3动画之前，我之前实现一些简单的动画效果都是使用flash完成的。但是自从CSS3横空出世，在移动端对CSS3动画的运用越来越多。今天这个分享是PC端的案例，因为我做的是大场景来的，起因还是我无意间看到一张卡通图片。于是我突发灵感，就趁热打铁使用CSS3动画把它按照自己的想法实现了出来。接下来，就让我们一起进入这个好玩...
【CSS】animation动画-奔跑的小车
菜鸟码农
04-18 1726
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>animation</title> <style type="text/css"> div { border: 1px solid #ccc; paddi...
CSS3——制作人物走路的小动画
木落
08-02 823
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #walk { width: 47px; height: 175px; border: 1px solid black; margin: 250px auto; background
CSS3动画属性练习-小熊跑跑
angry_rooster的博客
06-06 698
小熊跑跑 通过CSS的动画属性"animation"和at-rule关键帧@keyframe实现一个小熊在雪山奔跑的效果 图片素材见文末 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewpor
css3练习——动画练习
lqh的博客
07-31 233
用css3动画，仿照千寻浏览器气球的动画效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edg
【css动画】移动的小车
m0_62360527的博客
10-09 2048
css3 移动小车
纯CSS3实现汽车行驶动画.zip
07-04
纯CSS3实现汽车行驶动画是一款纯css制作的额汽车行驶特效
html5 css3 小汽车动画
09-09
html5 css3 小汽车动画
css3酷炫特斯拉汽车行驶动画特效
06-11
css3绘制的酷炫特斯拉汽车行驶动画特效，汽车开着前后灯行驶在道路上场景动画，如果轮子会旋转就更完美了。
纯css3汽车公路上行驶特效
07-24
纯css3汽车公路上行驶特效是一款卡通汽车高速行驶在公路上动画场景动画特效。
纯CSS3绘制汽车路上行驶特效
07-24
纯CSS3绘制汽车路上行驶特效是一款卡通汽车动画，没有终点的汽车在路上行驶动画场景特效。
纯CSS3实现汽车行驶动画.rar_纯CSS3实现汽车行驶动画
09-23
一款纯CSS3汽车行驶动画就非常逼真，汽车是用CSS绘制的，同样行驶动画也是CSS3动画特性实现的
HTML5 实现小车动画效果(Canvas/CSS3/JQuery)
tansitongba
02-03 1972
HTML5正在变得越来越流行。在这个移动设备日益增长的时代，对来自Adobe的Flash插件的改造需求也正在快速增长。因为就在最近，Adobe宣布Flash将不再支持移动设备。这意味着，Adobe自身也认为对移动设备来讲HTML5是一项重要的技术。而桌面系统的改变也是迟早的事。 HTML的一大劣势就是对于多媒体技术支持的缺乏。在HTML中，你无法直接显示一个视频或在屏幕上绘画。在HTML5中...
css实现:一辆汽车在一个弯曲的广场上行驶
liuhao9999的博客
07-04 362
css实现:一辆汽车在一个弯曲的广场上行驶
css动画之奔跑的小车
qq_43228357的博客
07-20 588
自学html/css,写了几个小案例供大家参考,同时也希望各位能指点在下的不足之处.在下继续改进. 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>无缝滚动</title> <style type="text/css"&...
CSS从入门到精通——基础知识
最新发布
09-18
CSS是层叠样式表（Cascading Style Sheets）的缩写，用于为网页添加样式和布局。在CSS中，可以通过选择器选中HTML元素，然后为这些元素应用样式。CSS的基础知识包括以下几个方面： 1. 选择器：CSS使用选择器来选中...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值