首页 > 编程开发 > CSS

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

来自：互联网
时间：2020-09-29
阅读：

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

纯<a href=https://www.freexyz.cn/dev/css/ target=_blank class=infotextkey>CSS</a>3如何打造自行车动画效果？（代码实例）

代码如下，复制即可用

<!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: absolute;
  left: 50%;
  margin: -13px 0 0 -13px;
  top: 50%;
  border: 4px dotted #666;
}
.cycle-body {
  margin-left: 125px;
}
.front-wheel-frame {/*前叉*/
  background: #5E999B;
  width: 8px;
  height: 180px;
  position: absolute;
  z-index: 2;
  transform: rotate(-25deg);
  margin: -72px 0 0 260px;
}
.top-frame {/*上管*/
  background: #5E999B;
  width: 180px;
  height: 8px;
  position: absolute;
  z-index: 2;
  margin: -20px 0 0 62px;
  transform: rotate(-8deg);
}
.front-frame {/*下管*/
  background: #5E999B;
  width: 8px;
  height: 160px;
  position: absolute;
  z-index: 2;
  transform: rotate(41deg);
  margin: -36px 0 0 189px;
}
.center-frame { /*坐杆*/
  background: #5E999B;
  width: 8px;
  height: 205px;
  position: absolute;
  z-index: 2;
  transform: rotate(-33deg);
  margin: -84px 0 0 75px;
}
.back-frame {/*后管*/
  background: #5E999B;
  width: 8px;
  height: 136px;
  position: absolute;
  z-index: 2;
  transform: rotate(39deg);
  margin: -23px 0 0 19px;
}
.bottom-frame {/*后叉or平管*/
  background: #5E999B;
  width: 159px;
  height: 8px;
  position: absolute;
  z-index: 2;
  margin: 100px 0 0 -16px;
}
.handlebar-front {/*车把*/
  width: 60px;
  height: 8px;
  background: #5E999B;
  z-index: 2;
  position: absolute;
  margin: -68px 0 0 222px;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}
.handlebar-curve {/*车把手*/
  width: 40px;
  height: 40px;
  border: 8px solid #666;
  border-top-right-radius: 100%;
  border-bottom-right-radius: 100%;
  border-bottom-left-radius: 100%;
  background: transparent;
  position: absolute;
  margin: -68px 0 0 258px;
  border-left: 8px solid transparent;
  border-top: 8px solid #666;
  border-bottom: 8px solid #666;
}
/*座垫*/
.seat { 
  width: 50px;
  height: 10px;
  background: #666;
  border-radius: 44%;
  position: absolute;
  margin: -73px 0 0 15px;
}

.seat:after {
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 0 40px 16px 40px;
  border-color: transparent transparent #666 transparent;
  content: "";
  position: absolute;
  z-index: 3;
  transform: rotate(-12deg);
  position: absolute;
  border-radius: 100%;
  margin: 0 0 0 -26px;
}
.seat:before {
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 0 40px 16px 40px;
  border-color: transparent transparent #666 transparent;
  content: "";
  position: absolute;
  z-index: 3;
  transform: rotate(179deg);
  position: absolute;
  border-radius: 100%;
  margin: 0 0 0 -26px;
}
.seat span {
  width: 32px;
  height: 19px;
  background: #666;
  border-radius: 100%;
  position: absolute;
  margin: 1px 0 0 -22px;
  transform: rotate(-11deg);
}
/*去掉中心轴的*/
.chain-rotation {
  position: absolute;
  z-index: 16;
}
/*中心轴*/
.chain-disc-inner {
  background: #666;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  position: absolute;
  margin: 2px;
  z-index: 4;
}
.chain-disc-outer {
  background: #FFF;
  width: 22px;
  height: 22px;
  border: 5px solid #666;
  border-radius: 50%;
  position: absolute;
  margin: 87px 0 0 250px;
  z-index: 3;
  content: "";
}
/*牙盘*/
.chain-rods {
  height: 70px;
  width: 6px;
  background: #666;
  position: absolute;
  margin: 67px 0 0 263px;
  z-index: 15;
  animation: wheel-rotate 2s linear infinite;
}
.chain-rods:before {
  content: "";
  height: 70px;
  width: 6px;
  background: #666;
  position: absolute;
  transform: rotate(120deg);
}
.chain-rods:after {
  content: "";
  height: 70px;
  width: 6px;
  background: #666;
  position: absolute;
  transform: rotate(240deg);
  -webkit-transform: rotate(240deg);
  -moz-transform: rotate(240deg);
}
.outer-axle {
  height: 70px;
  width: 70px;
  border-radius: 50%;
  background: transparent;
  border: 5px solid #666;
  position: absolute;
  margin: 62px 0 0 226px;
  z-index: 3;
}

.outer-axle:after {
  content: "";
  height: 74px;
  width: 74px;
  border-radius: 50%;
  background: transparent;
  border: 5px dotted #666;
  margin: -7px;
  position: absolute;
  z-index: 3;
  animation: wheel-rotate 2s linear infinite;
}
/*车链子*/
.chain-up {
  background-color: transparent;
  background-size: 8px 2px;
  background-position: 0 0, 30px 30px;
  width: 155px;
  height: 4px;
  position: absolute;
  z-index: 9;
  background: #EEE;
  transform: rotate(-11deg);
  margin: 76px 0 0 98px;
}
.chain-up:before {
  content: "";
  background-color: transparent;
  background-image: linear-gradient(90deg, #666 25%, transparent 25%,
   transparent 75%, #666 75%, #666);
  background-size: 8px 2px;
  background-position: 0 0, 30px 30px;
  width: 155px;
  height: 4px;
  animation: chainUp 2s linear infinite;
  position: absolute;
  z-index: 10;
}
.chain-bottom {
  background-color: transparent;
  background-size: 8px 2px;
  background-position: 0 0, 30px 30px;
  width: 155px;
  height: 4px;
  position: absolute;
  z-index: 9;
  background: #EEE;
  -webkit-transform: rotate(9deg);
  -moz-transform: rotate(9deg);
  transform: rotate(9deg);
  margin: 127px 0 0 98px;
}

.chain-bottom:before {
  content: "";
  background-color: transparent;
  background-image: linear-gradient(90deg, #666 25%, transparent 25%,
   transparent 75%, #666 75%, #666);
  background-size: 8px 2px;
  background-position: 0 0, 30px 30px;
  width: 155px;
  height: 4px;
  animation: chainDown 2s linear infinite;
  position: absolute;
  z-index: 10;
}
/*脚踏*/
.pedal-rod {
  height: 120px;
  width: 6px;
  background: #666;
  position: absolute;
  margin: -25px 0 0 0px;
}

.pedal-rod:before {
  width: 40px;
  height: 10px;
  background: #666;
  position: absolute;
  margin: 10px;
  content: "";
  margin: -7px -17px;
  animation: pedal1 2s linear infinite;
}

.pedal-rod:after {
  width: 40px;
  height: 10px;
  background: #666;
  position: absolute;
  margin: 10px;
  content: "";
  margin: 119px -17px;
  animation: pedal2 2s linear infinite;
}
/*水壶架*/
.bottle-holder {
  width: 20px;
  height: 36px;
  background: #daeded;
  border: 3px solid #5E999B;
  position: absolute;
  margin: 54px 0 0 -25px;
}

.bottle-holder:after {
  width: 20px;
  height: 3px;
  content: "";
  background: #5E999B;
  position: absolute;
  margin: 24px 0 0 0px;
}
/*水壶*/
.bottle-holder:before {
  background-color: #daeded;
  width: 18px;
  height: 10px;
  border-radius: 30% / 100%;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  content: "";
  position: absolute;
  margin-top: -13px;
  border: 1px solid #98baba;
  border-bottom: 0;
}
.bottle-holder span {
  position: absolute;
  width: 9px;
  height: 4px;
  background: #666;
  margin: -17px 0 0 5px;
}
/*车链子动画*/
@keyframes chainUp {
  0% {
      background-position: 0 25%;
  }
  100% {
      background-position: 100% 0;
  }
}
@keyframes chainDown {
  0% {
      background-position: 100% 0;
  }
  100% {
      background-position: 0 25%;
  }
}
/*脚踏动画*/
@keyframes pedal1 {
  0% {
      transform: rotate(00deg);
  }
  25% {
      transform: rotate(-140deg);
  }
  50% {
      transform: rotate(-180deg);
  }
  75% {
      transform: rotate(-240deg);
  }
  100% {
      transform: rotate(-360deg);
  }
}
@keyframes pedal2 {
  0% {
      transform: rotate(00deg);
  }
  25% {
      transform: rotate(-60deg);
  }
  50% {
      transform: rotate(-180deg);
  }
  75% {
      transform: rotate(-340deg);
  }
  100% {
      transform: rotate(-360deg);
  }
}
</style>
</head>
<body>
<div class="cycle-outer">
<div class="cycle-wrapper">
  <!--
      描述：车架
  -->
  <div class="cycle-body">
      <div class="seat">
          <span></span>
      </div>
      <div class="front-wheel-frame"></div>
      <div class="top-frame"></div>
      <div class="front-frame">
          <div class="bottle-holder">
              <span></span>
          </div>
      </div>
      <div class="center-frame"></div>
      <div class="back-frame"></div>
      <div class="bottom-frame"></div>
      <div class="handlebar-front"></div>
      <div class="handlebar-curve"></div>
  </div>
  <!--
      描述：后轮
  -->
  <div class="cycle-wheel cycle-wheel-back">
      <div class="cycle-wheel-outer">
          <div class="cycle-wheel-inner">
              <div class="cycle-wheel-inner-padding">
                  <ul class="spoke-container">
                      <li class="spoke"></li>
                      <li class="spoke"></li>
                  </ul>
                  <div class="inner-disc"></div>
                  <div class="inner-disc-2"></div>
              </div>
          </div>
      </div>
  </div>
  <!--
      描述：前轮
  -->
  <div class="cycle-wheel cycle-wheel-front">
      <div class="cycle-wheel-outer">
          <div class="cycle-wheel-inner">
              <div class="cycle-wheel-inner-padding">
                  <ul class="spoke-container">
                      <li class="spoke"></li>
                      <li class="spoke"></li>
                  </ul>
                  <div class="inner-disc"></div>
                  <div class="inner-disc-2"></div>
              </div>
          </div>
      </div>
  </div>
  <!--
      描述：中心轴  车链子 牙盘 水壶架  水壶   脚踏
  -->
  <div class="chain-up"></div>
  <div class="chain-bottom"></div>
  <div class="chain-rotation">
      <div class="outer-axle"></div>
      <div class="chain-disc-outer">
          <div class="chain-disc-inner"></div>
      </div>
  </div>
  <div class="chain-rods">
      <div class="pedal-rod"></div>
  </div>
</div>
</div>
<div style="text-align:center;clear:both;">
</body>
</html>
最新文章 相关文章

三种方式使用纯 CSS 实现星级评分

本文介绍三种使用纯 CSS 实现星级评分的方式。每种都值得细品一番~五角星取自 Element Plus 的 svg 资源<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"

2024-03-15 00:54:05

现代 CSS 解决方案：accent-color 强调色

accent-color 是从 Chrome 93 开始被得到支持的一个不算太新属性。之前一直没有好好介绍一下这个属性。直到最近在给一些系统整体切换主题色的时候，更深入的了解了一下这个属

2024-02-27 16:07:16

CSS布局技巧：实现全屏背景图片的最佳实践

在网页设计中，全屏背景图片是一种常见的技巧，可以为网页增添视觉上的冲击力和吸引力。在CSS中，有几种方法可以实现全屏背景图片，本文将介绍其中的最佳实践，并提供具体的代码示例

2024-01-24 21:14:41

CSS 列表属性优化技巧：list-style-type 和 list-style-position

在网页设计中，列表是一个常见且重要的元素。通过使用 CSS 列表属性，我们可以对列表的样式和位置进行优化，以提升用户体验。本文将重点介绍两个列表属性：list-style-type 和 list

2024-01-24 21:14:24

CSS实现无缝滚动效果的技巧和方法

随着互联网技术的发展，无缝滚动效果在网页设计中被广泛应用。它可以给用户带来更好的浏览体验，也能增加网页的动感和视觉效果。在本文中，我将介绍几种常用的CSS实现无缝滚动效

2024-01-24 21:13:57

利用CSS实现鼠标悬停时的弹出特效的技巧和方法

在网页的设计中，常常会遇到鼠标悬停时需要弹出特效的需求，这一特效能够提升用户体验和页面交互性。本文将介绍利用CSS实现鼠标悬停时的弹出特效的技巧和方法，并提供具体的代码

2024-01-24 21:13:39

CSS 3D 变换属性：transform 和 perspective

CSS 3D 变换属性是一种强大的技术，可以通过一些简单的代码实现令人惊叹的视觉效果。其中，最常用的两个属性是 transform 和 perspective。一、transform 属性transform 属性用

2024-01-24 21:13:18

如何使用CSS制作旋转动画的实现步骤

在现代网页设计中，动画效果是非常重要和受欢迎的一个元素。其中，旋转动画可以给网页注入活力和吸引力。本文将介绍如何使用CSS制作旋转动画的具体步骤，并提供一些代码示例。步

2024-01-24 21:13:01

CSS 变形属性优化技巧：transform 和 transition

引言：
随着Web前端技术的不断发展，CSS的应用变得愈发广泛，其中包括对元素的变形和动画效果的实现。CSS的transform和transition属性提供了一种简便有效的方式来实现元素的变形

2024-01-24 21:12:44

CSS 字间距属性指南：letter-spacing 和 word-spacing

CSS （层叠样式表）是一种用于描述网页上元素外观和样式的标记语言。在CSS中，有一些属性可以帮助我们调整字间距，使文本更易于阅读和美观。本文将详细介绍两个常用的字间距属性：let

2024-01-24 21:12:28

CSS 选择器属性进阶：伪类和伪元素

引言：
在CSS中，选择器是一个重要的概念，它能够帮助开发者准确地选择DOM元素并应用样式。除了常见的元素选择器（如标签选择器和类选择器）之外，CSS还提供了伪类和伪元素这两个选择器

2024-01-24 21:12:10

CSS布局指南：实现网格布局的最佳实践

引言：
在现代网页设计中，网格布局已经成为一种非常流行的布局方式。它可以帮助我们更好地组织页面结构，使其更具有层次感和可读性。本篇文章将介绍网格布局的最佳实践，以及具体

2024-01-24 21:11:54

CSS 相对布局属性详解：position 和 relative

在前端开发中，布局常常是开发者需要面对的问题，为了更好地控制元素在页面中的位置，CSS 提供了多种布局方式。其中，相对布局是一种非常常用的布局方式，通过使用 position 和 relat

2024-01-24 21:11:38

CSS布局教程：实现圆形布局的最佳方法

在网页设计中，常常需要实现一些独特的布局效果来吸引用户的注意力。其中，圆形布局是一种非常常见且有趣的布局效果，可以用来展示图片、图标或者其他内容。本文将介绍实现圆形布

2024-01-24 21:11:20

CSS 外边距属性指南：margin-top，margin-right，margin-bottom 和 margin-left

引言：
在 CSS 中，外边距（margin）是定位元素与其周围元素之间的间距，可以用来控制元素与其他元素的距离，给网页设计带来更多的灵活性和美观性。本文将详细介绍 CSS 外边距的四个属

2024-01-24 21:11:04

如何使用CSS制作倒计时效果的实现步骤

倒计时效果是网页开发中常见的一个功能，可以为用户呈现倒计时的动态效果，给人以紧迫感和期待感。本文将介绍如何使用CSS来实现倒计时效果，并给出详细的实现步骤和代码示例。实

2024-01-24 21:10:47

通用好看的8款纯CSS3搜索框前端样式

全部代码如下：<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>8款纯CSS3搜索框</title

2024-01-24 21:10:24

css background-size与背景图片填满div的具体研究包括cover contain属性测试

background-size与背景图片填满div在开发中，常有需要将一张图片作为一个div的背景图片充满div的需求background-size的取值及解释background-size共有三种属性，分别为backgrou

2024-01-24 21:10:05

CSS行内元素和块级元素简介：了解它们的特点和区别

CSS行内元素和块级元素简介：了解它们的特点和区别，需要具体代码示例CSS是一种用于网页样式设计的语言，它允许我们通过不同的属性和值来控制网页中元素的外观和布局。在CSS中，元

2024-01-24 21:09:49

CSS行内元素和块级元素的常见示例：让你对它们有更深入的了解

CSS行内元素和块级元素的常见示例：让你对它们有更深入的了解，需要具体代码示例引言：
在CSS中，行内元素和块级元素是我们常常遇到的两种元素类型。对于网页布局和样式设计来说，理

2024-01-24 21:09:31

详解CSS伪类和伪元素的用法以及它们之间的区别

CSS伪类和伪元素的区别及用法详解伪类和伪元素是在CSS中经常使用的概念，它们可以帮助我们选择和样式化HTML中的特定元素。虽然它们的名字相似，但它们有不同的用法和功能。在本

2024-01-24 21:09:12

探索CSS伪类与伪元素的基础概念和使用场景

了解CSS伪类和伪元素的基本概念及应用场景CSS（Cascading Style Sheets）是一种用于描述网页样式的标记语言，它可以控制网页中的元素的外观和布局。在CSS中，伪类和伪元素是非常有

2024-01-24 21:08:54

如何正确选择行内元素和块级元素：学会根据需求合理运用它们

如何正确选择行内元素和块级元素：学会根据需求合理运用它们，需要具体代码示例作为前端开发人员，正确选择行内元素和块级元素对于构建网页布局至关重要。不同的元素类型具有不同

2024-01-24 21:08:35

掌握CSS常见伪类和伪元素的使用技巧和要注意的事项

学习CSS中常见的伪类和伪元素的使用技巧和注意事项CSS是网页开发中不可或缺的一部分，它控制着网页的样式和布局。在CSS中，伪类和伪元素是强大的工具，可以用来选择和修改页面中

2024-01-24 21:08:19

解析CSS伪类和伪元素的常见用法和实例

深入探讨CSS伪类和伪元素的常见用法和实例解析在前端开发中，CSS是我们常用的样式设计语言之一。除了基本的选择器和属性，CSS还提供了一些特殊的选择器，称为伪类和伪元素。本文

2024-01-24 21:07:53

CSS行内元素与块级元素的使用场景和方法详解

CSS行内元素和块级元素详解：探索它们的应用场景和使用方法在CSS中，元素可以根据其显示特性分为两种类型：行内元素和块级元素。对于网页开发者来说，理解这两个概念非常重要，因为它

2024-01-24 21:07:29

CSS布局中行内元素和块级元素的作用及对页面结构的影响

行内元素和块级元素在CSS布局中的角色： 发现它们对页面结构的影响，需要具体代码示例引言：
在进行网页设计和开发时，CSS布局扮演着至关重要的角色。了解行内元素和块级元素在CSS

2024-01-24 21:07:11

CSS语法检查利器之csslint

背景前段时间研究使用YUI Compressor压缩项目里的js和CSS文件，研究了两天之后，终于在周三晚上把YUI Compressor集成进了打包流程中；于是周四（2015-11-12）早晨一到办公室，第一件事

2024-01-24 21:06:39

flex布局之美，以后就靠它来布局了

写在前面在很久很久以前，网页布局基本上通过table 元素来实现。通过操作table 中单元格的align 和valign可以实现水平垂直居中等再后来，由于CSS 不断完善，便演变出了：标准文档流

2024-01-24 21:06:04

如何通过纯CSS实现导航栏的下拉菜单效果

在Web设计中，导航栏是一个非常常见的组件，而下拉菜单则是导航栏中的一种常见效果。在本文中，我们将学习如何仅使用CSS来实现导航栏的下拉菜单效果，并提供详细的代码示例。首先，我

2024-01-24 21:05:45

热点内容

详解如何修改el-select的样式：popper-append-to-body和popper-class
2020-10-16
css左边距怎么设置？
2019-11-10
各种字体显示效果
2018-08-13
CSS html文字的跑马灯(流光)特效
2019-10-05
css如何让padding不占宽度？
2020-10-14
调整input里面的输入光标大小
2018-08-14
Bootstrap 4设置响应式字体大小
2020-03-21
css中a标签不显示下划线怎么设置？
2019-11-10
Css3中text-shadow属性使用方法及各参数所代表的含义
2019-09-18
[CSS]让子容器高度占满父容器
2018-10-20
返回顶部
顶部