HTML5教程如何实现页面旋转动画效果-职坐标

HTML5教程如何实现页面旋转动画效果

沉沙 2018-07-25 来源：阅读 2323 评论 0

摘要：本篇HTML5教程探讨了如何实现页面旋转动画效果，希望阅读本篇文章以后大家有所收获，帮助大家对HTML5的理解更加深入。

<html>

<head>

<title>Document</title>

<style>

.click3DBarMapContainer{width:1060px;height:680px;position:relative}.click3DBarMapContainer .titleContainer{position:absolute;left:89px;top:26px;z-index:999}.click3DBarMapContainer .titleContainer .topTitle{font-size:17px;font-weight:700;color:#22c1ff}.click3DBarMapContainer .titleContainer .unitTitle{font-size:12px;color:#22c1ff}.click3DBarMapContainer .bgContainer{width:100%;height:100%;position:absolute;z-index:100;pointer-events:none;background:url(/40edb2f4e9916b835401daa702be35f5.png) 100% 0 no-repeat}.click3DBarMapContainer .shadowContainer{width:991px;height:508px;position:absolute;right:3px;top:11px;z-index:10;pointer-events:none;box-shadow:inset 0 30px 60px 0 #010101,inset 0 -30px 60px 0 #010101}.click3DBarMapContainer #mapmap{width:991px;height:519px;position:absolute;right:3px;top:5px;z-index:1;transform-style:preserve-3d;transform:rotateX(15deg)}.click3DBarMapContainer #mapmap .layerPath{transform:translateY(6px)}.click3DBarMapContainer .rightBarContainer{position:absolute;right:50px;top:46px;z-index:1000}.click3DBarMapContainer .detailContainer{position:absolute;right:0;bottom:39px;z-index:100;pointer-events:none}.click3DBarMapContainer .imgContainer{width:600px;height:600px;position:absolute;left:-135px;bottom:-125px;z-index:999;pointer-events:none}.click3DBarMapContainer .imgContainer #innerHalo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(0deg);animation:innerHalo1 7s linear infinite}.click3DBarMapContainer .imgContainer #midHalo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(480deg);animation:midHalo 10s linear infinite}.click3DBarMapContainer .imgContainer #outerHalo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(0deg);animation:innerHalo1 10s linear infinite}.click3DBarMapContainer .imgContainer #innerCircle,.click3DBarMapContainer .imgContainer #outCircle{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(480deg);animation:midHalo 10s linear infinite}.click3DBarMapContainer .animationBar{width:240px;height:4px;position:absolute;right:41px;bottom:226px;z-index:1000}.click3DBarMapContainer .animationBar .timeBar{height:4px;position:absolute;background:#2cebff}.click3DBarMapContainer .animationBar #timeBar1{left:0;width:240px;opacity:.2}.click3DBarMapContainer .animationBar #timeBar2{left:141px;width:20px;opacity:.4;animation:timeBar2 5s linear infinite}.click3DBarMapContainer .animationBar #timeBar3{left:66px;width:40px;opacity:.4;animation:timeBar3 10s linear infinite}.click3DBarMapContainer .animationBar #timeBar4{left:11px;width:15px;opacity:.6;animation:timeBar4 7s linear infinite}.click3DBarMapContainer .animationBar #timeBar5{left:111px;width:15px;opacity:.8;animation:timeBar5 5s linear infinite}.click3DBarMapContainer .animationBar #timeBar6{left:67px;width:27px;opacity:1;animation:timeBar6 3s linear infinite}.click3DBarMapContainer .timetime{position:absolute;right:41px;bottom:200px;z-index:1000}@-moz-keyframes timeBar2{0%{left:141px}45%{left:2px}85%{left:200px}to{left:141px}}@-webkit-keyframes timeBar2{0%{left:141px}45%{left:2px}85%{left:200px}to{left:141px}}@-o-keyframes timeBar2{0%{left:141px}45%{left:2px}85%{left:200px}to{left:141px}}@keyframes timeBar2{0%{left:141px}45%{left:2px}85%{left:200px}to{left:141px}}@-moz-keyframes timeBar3{0%{left:36px}10%{left:0}60%{left:199px}to{left:36px}}@-webkit-keyframes timeBar3{0%{left:36px}10%{left:0}60%{left:199px}to{left:36px}}@-o-keyframes timeBar3{0%{left:36px}10%{left:0}60%{left:199px}to{left:36px}}@keyframes timeBar3{0%{left:36px}10%{left:0}60%{left:199px}to{left:36px}}@-moz-keyframes timeBar4{0%{left:11px}10%{left:2px}60%{left:188px}to{left:11px}}@-webkit-keyframes timeBar4{0%{left:11px}10%{left:2px}60%{left:188px}to{left:11px}}@-o-keyframes timeBar4{0%{left:11px}10%{left:2px}60%{left:188px}to{left:11px}}@keyframes timeBar4{0%{left:11px}10%{left:2px}60%{left:188px}to{left:11px}}@-moz-keyframes timeBar5{0%{left:111px}30%{left:0}75%{left:223px}to{left:111px}}@-webkit-keyframes timeBar5{0%{left:111px}30%{left:0}75%{left:223px}to{left:111px}}@-o-keyframes timeBar5{0%{left:111px}30%{left:0}75%{left:223px}to{left:111px}}@keyframes timeBar5{0%{left:111px}30%{left:0}75%{left:223px}to{left:111px}}@-moz-keyframes timeBar6{0%{left:60px}20%{left:2px}60%{left:181px}to{left:60px}}@-webkit-keyframes timeBar6{0%{left:60px}20%{left:2px}60%{left:181px}to{left:60px}}@-o-keyframes timeBar6{0%{left:60px}20%{left:2px}60%{left:181px}to{left:60px}}@keyframes timeBar6{0%{left:60px}20%{left:2px}60%{left:181px}to{left:60px}}@-moz-keyframes innerHalo1{to{transform:translate(-50%,-50%) rotate(1turn)}}@-webkit-keyframes innerHalo1{to{transform:translate(-50%,-50%) rotate(1turn)}}@-o-keyframes innerHalo1{to{transform:translate(-50%,-50%) rotate(1turn)}}@keyframes innerHalo1{to{transform:translate(-50%,-50%) rotate(1turn)}}@-moz-keyframes midHalo{to{transform:translate(-50%,-50%) rotate(120deg)}}@-webkit-keyframes midHalo{to{transform:translate(-50%,-50%) rotate(120deg)}}@-o-keyframes midHalo{to{transform:translate(-50%,-50%) rotate(120deg)}}@keyframes midHalo{to{transform:translate(-50%,-50%) rotate(120deg)}}

</style>

.imgContainer #innerHalo {

position: absolute;

left: 50%;

top: 50%;

transform: translate(-50%, -50%) rotate(0deg);

animation: innerHalo1 7s linear infinite;

}

.imgContainer #midHalo {

position: absolute;

left: 50%;

top: 50%;