页面旋转动画效果

一点儿也不宅

2018-04-23

<!-- http://183.131.17.231:6663/s1 -->
<html>

<head>
    <meta charset="UTF-8">
    <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>
    <style type="text/css">
    .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%;
    transform: translate(-50%,-50%) rotate(480deg);
    animation: midHalo 10s linear infinite;
}
.imgContainer #outerHalo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%) rotate(0deg);
    animation: innerHalo1 10s linear infinite;
}
.imgContainer #innerCircle, .imgContainer #outCircle {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%) rotate(480deg);
    animation: midHalo 10s linear infinite;
}
    </style>

    <body>
    	<div id="click3DBarMapContainer">
	        <div class="imgContainer"><img alt="circle" id="innerHalo" src="142f3f3db93cdd3bb0cb34316ed12100.png">
	        <img alt="circle" id="midHalo" src="a26d07438f49fe2f24b8c1a315a44c5c.png">
	        <img alt="circle" id="outerHalo" src="55a7f2a0301bbd233926a23bfbdbf616.png">
	        <img alt="circle" id="innerCircle" src="b55e4a23cd08505579e5daa872cac22a.png">
	        <img alt="circle" id="outCircle" src="8869771be9b1ddfda8ac29744901651c.png">
	        </div>
        </div>
    </body>

</html>

position absolute