利用纯CSS3实现动态的自行车特效源码-前端开发

下面是 “利用纯CSS3实现动态的自行车特效源码” 的完整攻略：

下面是 “利用纯CSS3实现动态的自行车特效源码” 的完整攻略：

简介

本攻略将会使用纯 CSS3 实现一个动态的自行车特效。该特效包括了车轮旋转、自行车行驶和车把的移动。这也是一个非常适合用来锻炼 CSS3 技能的例子。

开始

第一步 - HTML 结构

为了让特效能够呈现出来，我们首先需要一个 HTML 结构来呈现自行车图形。

<div class="bicycle">
  <div class="wheel wheel-1"></div>
  <div class="wheel wheel-2"></div>
  <div class="frame"></div>
  <div class="handlebar"></div>
  <div class="handle"></div>
</div>

第二步 - 初始化CSS样式

为了让我们的自行车开始形状渲染及其样式定义，以下是初始化 CSS 的代码：

*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.bicycle{
  position: relative;
  width: 200px;
  height: 200px;
  background: #fff;
  border-radius: 0 0 40px 40px;
  box-shadow: 0 0 0 10px #9cc8ff, inset 0 0 80px rgba(0,0,0,.1);
}

.frame{
  position: absolute;
  top: 20px;
  left: 60px;
  width: 80px;
  height: 120px;
  background: #333;
  border-radius: 6px;
}

.wheel{
  position: absolute;
  top: 70px;
  width:60px;
  height: 60px;
  border-radius: 50%;
  background: #111;
  box-shadow: 0 0 10px rgba(17, 17, 17, .5);
}

.wheel-1{
  left: 30px;
}

.wheel-2{
  left: 130px;
}

.handlebar{
  position: absolute;
  top: 54px;
  left: 74px;
  width: 20px;
  height: 6px;
  background: #333;
  border-radius: 6px;
  transform-origin: 50% 100%;
  transform: rotate(-15deg);
}

.handle{
  position: absolute;
  top: 40px;
  left: 70px;
  width: 10px;
  height: 10px;
  background: #333;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(17, 17, 17, .5);
}

第三步 - 添加动画效果

在以上 CSS 代码的基础上，我们需要加入以下代码才能实现动态特效效果：

@keyframes wheel-rotate{
  from{
    transform: rotate(0deg);
  }
  to{
    transform: rotate(360deg);
  }
}

@keyframes bike-move {
  from{
    left: -20%;
    transform: rotate(0deg);
  }
  to{
    left: 100%;
    transform: rotate(360deg);
  }
}

.handlebar.animate{
  animation: bike-move 2s linear infinite;
}

.wheel-1.animate{
  animation: wheel-rotate 300ms linear infinite;
}

.wheel-2.animate{
  animation: wheel-rotate 300ms linear infinite reverse;
}

以上代码是自行车的动画效果实现，其中 wheel-rotate 控制车轮的旋转，bike-move 控制车的行驶， .animate 类表示的元素将会应用以上的动态效果。

第四步 - JavaScript控制开关

为了让我们的特效呈现完整的交互效果，我们需要一些JavaScript代码来控制动态效果的开关。

let bicycle = document.querySelector('.bicycle');
let wheel1 = document.querySelector('.wheel-1');
let wheel2 = document.querySelector('.wheel-2');
let handlebar = document.querySelector('.handlebar');

let animateBike = () => {
  wheel1.classList.add('animate');
  wheel2.classList.add('animate');
  handlebar.classList.add('animate');
};

let stopBike = () => {
  wheel1.classList.remove('animate');
  wheel2.classList.remove('animate');
  handlebar.classList.remove('animate');
};

bicycle.addEventListener('mouseenter', animateBike);
bicycle.addEventListener('mouseleave', stopBike);