这是一个基于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,