<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CSS3台式电风扇旋转动画特效 - 站长素材</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<input type="radio" name="fan" id="zero"/>
<input type="radio" name="fan" id="one" checked="true"/>
<input type="radio" name="fan" id="two"/>
<input type="radio" name="fan" id="three"/>
<div class="scene">
<div class="fan">
<div class="fan__base">
<div class="cuboid base">
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
</div>
</div>
<div class="fan__controls">
<label class="fan__control" for="zero">
<div class="cuboid control">
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
</div>
</label>
<label class="fan__control" for="one">
<div class="cuboid control">
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
</div>
</label>
<label class="fan__control" for="two">
<div class="cuboid control">
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
</div>
</label>
<label class="fan__control" for="three">
<div class="cuboid control">
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
</div>
</label>
</div>
<div class="fan__spine">
<div class="cuboid spine">
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
</div>
</div>
<div class="fan__head">
<div class="fan__rotater">
<div class="cuboid rotater">
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
</div>
<div class="fan__stalk">
<div class="cuboid stalk">
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
</div>
</div>
</div>
<div class="fan__barrel">
<div class="cuboid barrel">
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
</div>
</div>
<div class="fan__housing">
<div class="fan__housing-rear"></div>
<div class="fan__blades">
<div class="fan__blade"></div>
<div class="fan__blade"></div>
<div class="fan__blade"></div>
</div>
<div class="fan__housing-front"><img src="img/avatar.webp"/></div>
</div>
</div>
</div>
</div>
</body>
</html>
