javascrip控制旋转效果

web开发

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

<!DOCTYPE />
<html>
<head>
    <title>CSS3 Loading Spinner 2</title>
    <style>
        @-webkit-keyframes fade {
            from {opacity: 1;}
            to {opacity: 0.25;}
        }
        div.spinner {
            position: relative;
            width: 30px;
            height: 30px;
            display: inline-block;
        }
        div.spinner div {
            width: 20%;
            height: 40%;
            background: #000;
            position: absolute;
            left: 100%;
            top: 100%;
            opacity: 0;
            -webkit-animation: fade 1s linear infinite;
            -webkit-border-radius: 30px;
        }
        div.spinner div.bar1 {-webkit-transform:rotate(0deg) translate(0, -142%); -webkit-animation-delay: 0s;}
        div.spinner div.bar2 {-webkit-transform:rotate(30deg) translate(0, -142%); -webkit-animation-delay: -0.9167s;}
        div.spinner div.bar3 {-webkit-transform:rotate(60deg) translate(0, -142%); -webkit-animation-delay: -0.833s;}
        div.spinner div.bar4 {-webkit-transform:rotate(90deg) translate(0, -142%); -webkit-animation-delay: -0.75s;}
        div.spinner div.bar5 {-webkit-transform:rotate(120deg) translate(0, -142%); -webkit-animation-delay: -0.667s;}
        div.spinner div.bar6 {-webkit-transform:rotate(150deg) translate(0, -142%); -webkit-animation-delay: -0.5833s;}
        div.spinner div.bar7 {-webkit-transform:rotate(180deg) translate(0, -142%); -webkit-animation-delay: -0.5s;}
        div.spinner div.bar8 {-webkit-transform:rotate(210deg) translate(0, -142%); -webkit-animation-delay: -0.41667s;}
        div.spinner div.bar9 {-webkit-transform:rotate(240deg) translate(0, -142%); -webkit-animation-delay: -0.333s;}
        div.spinner div.bar10 {-webkit-transform:rotate(270deg) translate(0, -142%); -webkit-animation-delay: -0.25s;}
        div.spinner div.bar11 {-webkit-transform:rotate(300deg) translate(0, -142%); -webkit-animation-delay: -0.1667s;}
        div.spinner div.bar12 {-webkit-transform:rotate(330deg) translate(0, -142%); -webkit-animation-delay: -0.0833s;}
    </style>
</head>
<body>
<h1>请在safari或chrome下查看效果</h1>
    <div class="spinner">
        <div class="bar1">
        </div>
        <div class="bar2">
        </div>
        <div class="bar3">
        </div>
        <div class="bar4">
        </div>
        <div class="bar5">
        </div>
        <div class="bar6">
        </div>
        <div class="bar7">
        </div>
        <div class="bar8">
        </div>
        <div class="bar9">
        </div>
        <div class="bar10">
        </div>
        <div class="bar11">
        </div>
        <div class="bar12">
        </div>
    </div>
</body>
</html>