HTML5模拟齿轮动画

最新推荐文章于 2023-03-17 10:41:36 发布

Dragon_GL

最新推荐文章于 2023-03-17 10:41:36 发布

阅读量2k

点赞数 2

分类专栏： CSS3 HTML5 文章标签： html5 css3

本文链接：https://blog.csdn.net/u014695532/article/details/51620629

版权

这篇博客介绍了一个利用HTML5和CSS3技术创建的齿轮动画特效，通过模拟物理学原理，无需JavaScript，仅使用CSS3实现了多个齿轮的传动动画效果。

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

这是一个基于HTML5的齿轮动画特效，我们将齿轮转动的物理学原理，转换为HTML5代码，在网页上实现了模拟齿轮转动的动画效果。该齿轮动画的最大特点是它由好多个齿轮组成，这对齿轮传动的算法要求就大大提高了，而且我们并没有用JavaScript，而是纯CSS3实现的。

HTML

<html>

<head>
  <meta charset="gb2312">
  <link href="css/zzsc.css" rel="stylesheet">
  <title>CSS3实现齿轮转动动画特效</title>
</head>

<body>
  <div id="level">
    <div id="content">
      <div id="gears">
        <div id="gears-static"></div>
        <div id="gear-system-1">
          <div class="shadow" id="shadow15"></div>
          <div id="gear15"></div>
          <div class="shadow" id="shadow14"></div>
          <div id="gear14"></div>
          <div class="shadow" id="shadow13"></div>
          <div id="gear13"></div>
        </div>
        <div id="gear-system-2">
          <div class="shadow" id="shadow10"></div>
          <div id="gear10"></div>
          <div class="shadow" id="shadow3"></div>
          <div id="gear3"></div>
        </div>
        <div id="gear-system-3">
          <div class="shadow" id="shadow9"></div>
          <div id="gear9"></div>
          <div class="shadow" id="shadow7"></div>
          <div id="gear7"></div>
        </div>
        <div id="gear-system-4">
          <div class="shadow" id="shadow6"></div>
          <div id="gear6"></div>
          <div id="gear4"></div>
        </div>
        <div id="gear-system-5">
          <div class="shadow" id="shadow12"></div>
          <div id="gear12"></div>
          <div class="shadow" id="shadow11"></div>
          <div id="gear11"></div>
          <div class="shadow" id="shadow8"></div>
          <div id="gear8"></div>
        </div>
        <div class="shadow" id="shadow1"></div>
        <div id="gear1"></div>
        <div id="gear-system-6">
          <div class="shadow" id="shadow5"></div>
          <div id="gear5"></div>
          <div id="gear2"></div>
        </div>
        <div class="shadow" id="shadowweight"></div>
        <div id="chain-circle"></div>
        <div id="chain"></div>
        <div id="weight"></div>
      </div>
    </div>
  </div>
</body>

</html>

Css

body {
  margin: 0px;
  padding: 0px;
  overflow: hidden;
  background: #196a73;
  /* Old browsers */
  background-image: url('http://www.xyhtml5.com/examples/3164/css/bg.gif');
  height: 100%;
}

#level {
  width: 100%;
  height: 1px;
  position: absolute;
  top: 50%;
}

#content {
  text-align: center;
  margin-top: -327px;
}

#gears {
  width: 478px;
  height: 655px;
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

#gears-static {
  background: url('http://www.xyhtml5.com/examples/3164/css/FgFnjks.png') no-repeat -363px -903px;
  width: 329px;
  height: 602px;
  position: absolute;
  bottom: 5px;
  right: 0px;
  opacity: 0.4;
}

#title {
  vertical-align: middle;
  color: #9EB7B5;
  width: 43%;
  display: inline-block;
}

#title h1 {
  font-family: 'PTSansNarrowBold', sans-serif;
  font-size: 3.6em;
  text-shadow: rgba(0, 0, 0, 0.36) 7px 7px 10px;
}

#title p {
  font-family: sans-serif;
  font-size: 1.2em;
  line-height: 148%;
  text-shadow: rgba(0, 0, 0, 0.36) 1px 1px 0px;
}

.shadow {
  -webkit-box-shadow: 4px 7px 25px 10px rgba(43, 36, 0, 0.36);
  -moz-box-shadow: 4px 7px 25px 10px rgba(43, 36, 0, 0.36);
  box-shadow: 4px 7px 25px 10px rgba(43, 36,