css3动画特效

为什么80%的码农都做不了架构师？>>>   

<style>
.two .container {
    position: absolute;
    top: 199px;
    left: 50%;
    margin-left: -111px;
    width: 222px;
    height: 222px;
}
.two .orbit {
    width: 2px;
    height: 2px;
    background: #F6B42C;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 9;
}
.two .orbit-1 {
    width: 4px;
    height: 4px;
    -webkit-animation: orbit-1 5s linear infinite;
    animation: orbit-1 5s linear infinite;
}
.two .orbit-2 {
    width: 5px;
    height: 5px;
    -webkit-animation: orbit-2 10s linear infinite;
    animation: orbit-2 10s linear infinite;
}
.two .orbit-3 {
    width: 3px;
    height: 3px;
    -webkit-animation: orbit-3 15s linear infinite;
    animation: orbit-3 15s linear infinite;
}
.two .orbit-4 {
    -webkit-animation: orbit-4 20s linear infinite;
    animation: orbit-4 20s linear infinite;
}
.two .orbit-5 {
    width: 6px;
    height: 6px;
    -webkit-animation: orbit-5 25s linear infinite;
    animation: orbit-5 25s linear infinite;
}
.two .orbit-6 {
    -webkit-animation: orbit-6 30s linear infinite;
    animation: orbit-6 30s linear infinite;
}
@keyframes orbit-1 {
    0% {
        -webkit-transform: rotate(0deg) translateX(-95px) rotate(0deg);
        transform: rotate(0deg) translateX(-95px) rotate(0deg);
    }
    100% {
       -webkit-transform: rotate(360deg) translateX(-95px) rotate(-360deg);
        transform: rotate(360deg) translateX(-95px) rotate(-360deg);
    }
}
@keyframes orbit-2 {
    0% {
        -webkit-transform: rotate(0deg) translateX(-110px) rotate(0deg);
        transform: rotate(0deg) translateX(-110px) rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg) translateX(-110px) rotate(-360deg);
        transform: rotate(360deg) translateX(-110px) rotate(-360deg);
    }
}
@keyframes orbit-3 {
    0% {
        -webkit-transform: rotate(0deg) translateX(95px) rotate(0deg);
        transform: rotate(0deg) translateX(95px) rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg) translateX(95px) rotate(-360deg);
        transform: rotate(360deg) translateX(95px) rotate(-360deg);
    }
}
@keyframes orbit-4 {
    0% {
        -webkit-transform: rotate(0deg) translateX(110px) rotate(0deg);
        transform: rotate(0deg) translateX(110px) rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg) translateX(110px) rotate(-360deg);
        transform: rotate(360deg) translateX(110px) rotate(-360deg);
    }
}
@keyframes orbit-5 {
    0% {
        -webkit-transform: rotate(0deg) translateX(125px) rotate(0deg);
        transform: rotate(0deg) translateX(125px) rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg) translateX(125px) rotate(-360deg);
        transform: rotate(360deg) translateX(125px) rotate(-360deg);
    }
}
@keyframes orbit-6 {
    0% {
        -webkit-transform: rotate(0deg) translateX(140px) rotate(0deg);
        transform: rotate(0deg) translateX(140px) rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg) translateX(140px) rotate(-360deg);
        transform: rotate(360deg) translateX(140px) rotate(-360deg);
    }
}
.two .circle {
    position: absolute;
    bottom: -80px;
    left: -30px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: #d9d9d9;
    opacity: .8;
    animation: trail 10s linear infinite;
}
@keyframes trail {
    0% {
        -webkit-transform: rotate(0deg) translateX(60px) rotate(0deg);
        transform: rotate(0deg) translateX(60px) rotate(0deg);
    }
    25% {
        -webkit-transform: rotate(0deg) translateY(60px) rotate(0deg);
        transform: rotate(0deg) translateY(60px) rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg) translateX(60px) rotate(-360deg);
        transform: rotate(360deg) translateX(60px) rotate(-360deg);
    }
}
.two .star {
    position: absolute;
    left: 0;
    top: 50px;
    width: 1px;
    height: 1px;
    background-color: white;
    transform: rotate(30deg);
    -webkit-animation: shooting 5s linear infinite;
    animation: shooting 5s linear infinite;
}
.two .star:before {
    content: "";
    position: absolute;
    width: 100px;
    height: 1px;
    right: 1px;
    top: 0;
    background: -webkit-linear-gradient(left, transparent 0%, rgba(255, 255, 255, 0.4) 100%);
    background: linear-gradient(to right, transparent 0%, rgba(255, 255, 255, 0.4) 100%);
}
.two .star-2 {
    top: 200px;
    -webkit-animation: shootings 8s 1s linear infinite;
    animation: shootings 8s 1s linear infinite;
}
@keyframes shooting {
    0% {
        left: -100px;
    }
    100% {
        top: 350px;
        left: calc(100% + 100px);
    }
}
@keyframes shootings {
    0% {
        left: -100px;
    }
    100% {
        top: 500px;
        left: calc(100% + 100px);
    }
}
</style>

<body ontouchstart>
        <img class="logo" src="./images/group1.png" alt="图片加载失败" />
        <div class="weui-footer">
            <p class="weui-footer__text">big data health consultance</p>
        </div>
        <div class="container">
            <div class="orbit orbit-1"></div>
            <div class="orbit orbit-2"></div>
            <div class="orbit orbit-3"></div>
            <div class="orbit orbit-4"></div>
            <div class="orbit orbit-5"></div>
            <div class="orbit orbit-6"></div>
        </div>
        <div class="circle"></div>
        <div class="star star-1"></div>
        <div class="star star-2"></div>
</body>

转载于:https://my.oschina.net/af666/blog/1577112