利用纯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);

以上JavaScript代码实现了当鼠标移入和移出自行车区域时分别启动和禁用自行车的动态特效。

示例

这里是两个使用以上“利用纯CSS3实现动态的自行车特效源码”的示例。

• CodePen
• JSFiddle

通过这些示例不仅可以了解到以上代码的实际应用情况，同时也能够进一步理解以上代码实现的技术含义。