纯CSS3打造自行车动画效果（代码实例）

最新推荐文章于 2024-03-12 20:14:58 发布

猿说前端

最新推荐文章于 2024-03-12 20:14:58 发布

阅读量603

点赞数

文章标签： css html 前端 web前端前端教程

本文链接：https://blog.csdn.net/ITZ1992/article/details/106192234

版权

本文通过代码实例详细讲解如何使用纯CSS3创建自行车动画效果。包含关键代码展示，并分享了学习前端开发的经验与注意事项，适合初学者和进阶者参考。同时提供了交流群号，以供前端学习者共同进步。

摘要由CSDN通过智能技术生成

纯CSS3如何打造自行车动画效果？下面本篇文章通过代码实例给大家介绍一下。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

我们先来看看效果图吧，看了效果图之后你们就会有动力去打造属于你们自己的自行车啦

代码如下，复制即可用

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>快来打造属于你们自己的自行车吧</title>
<style type="text/css">
* {
  margin: 0;
  padding: 0
}

ol,
ul {
  list-style: none/*去掉圆点或数字*/
}

.cycle-outer {
  width: 534px;
  height: 260px;
  position: absolute;
  /*绝对定位*/
  top: 50%;
  /*距离顶部*/
  margin: -160px 0 0 -267px;
  /*距离外边距*/
  left: 50%;
}

.cycle-wrapper {
  width: 534px;
  height: 260px;
  margin: 0 auto;
  position: relative;
  /*相对定位*/
}

.cycle-wheel-front {
  /*前轮*/
  margin: 100px 0 0 330px;
}

.cycle-wheel-back {
  /*后轮*/
  margin: 100px 0 0 0px;
}

.cycle-wheel-outer {
  background: transparent;
  border: 5px solid #aaa;
  border-radius: 50%;
  /*画外轮圆圈*/
  width: 190px;
  height: 190px;
  position: absolute;
  margin-top: 5px;
  animation: wheel-rotate 2s linear infinite;
  /*定义动画*/
}
/*轮胎开始旋转*/
@keyframes wheel-rotate {
  from {
      transform: rotate(0deg);
  }
  to {
      transform: rotate(360deg);
  }
}

.cycle-wheel-outer:after {
  /*插入内轮胎圆圈*/
  background: transparent;
  border: 4px solid #EF9058;
  border-radius: 50%;
  width: 176px;
  height: 176px;
  position: absolute;
  margin: 3px;
  content: "";
}

.spoke {
  /*开始画车轮线条*/
  position: absolute;
  width: 1px;
  height: 200px;
  background: #ccc;
  margin: -5px 0 0 95px;
  z-index: 0;
}

.spoke:after {
  /*在后面插入两条*/
  content: "";
  position: absolute;
  width: 1px;
  height: 200px;
  background: #ccc;
  transform: rotate(120deg);
}

.spoke:before {
  /*在前面插入两条*/
  content: "";
  position: absolute;
  width: 1px;
  height: 200px;
  background: #ccc;
  transform: rotate(240deg);
}
/*轮胎线条完成*/

.spoke-container li:nth-child(2) {
  /*中心点旋转*/
  transform: rotate(30deg);
}

.inner-disc {
  /*画中心轴圆点*/
  background: #666;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  margin: -10px 0 0 -10px;
  top: 50%;
}

.inner-disc-2 {
  /*画轮胎中心轴的圆圈*/
  background: transparent;
  width: 6px;
  height: 6px;
  border: 2px solid #FFF;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  margin: -5px 0 0 -5px;
  top: 50%;
}

.cycle-wheel-back .inner-disc-2:after {
  /*插入后轮轴心齿轮*/
  content: "";
  background: transparent;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  position