联通手机App流量球的HTML的动画实现

使用联通手机营业厅的童鞋们应该都知道主页面有个流量球，球中有水纹波浪，类似球型鱼缸的动画效果，有次看到薪人薪事的首页，有海浪拍打的动画，于是效仿模拟了联通营业厅的流量球的实现：

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TestWave</title>
    <style>
        .banner {
            width: 100%;
            height: 600px;
            display: flex;
            flex-flow: row nowrap;
            justify-content: center;
            align-items: center;
            background-color: mediumpurple;
        }
        .wave-ball {
            width: 300px;
            height: 300px;
            border: 1px solid #ffffff;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            border-radius: 50%;
            flex: none;
            position: relative;
            overflow: hidden;
        }
        .waves {
            position: absolute;
            height: 300px;
            width: 100%;
            overflow: hidden;
        }
        .waves > div {
            position: absolute;
            left: -150px;
            bottom: 0
        }
        .waves .wave1, .waves .wave2 {
            -webkit-animation: wave 5s ease-in-out alternate infinite;
            animation: wave 5s ease-in-out alternate infinite;
        }
        .waves .wave2 {
            -webkit-animation-delay: .6s;
            animation-delay: .6s
        }
        .index_waves {
            background: url("./images/page-test-waves.png?v=2017-03-01") center 0 no-repeat;
        }
        .wave1 {
            height: 106px;
            width: 600px;
        }
        .wave2 {
            height: 106px;
            width: 600px;
            background-position: 0 -107px
        }

        @keyframes wave {
            0% {
                -ms-transform: translate(0px, 0px);
                -webkit-transform: translate(0px, 0px);
                transform: translate(0px, 0px)
            }
            50% {
                -ms-transform: translate(120px, 0px);
                -webkit-transform: translate(120px, 0px);
                transform: translate(120px, 0px)
            }
            100% {
                -ms-transform: translate(0px, 0px);
                -webkit-transform: translate(0px, 0px);
                transform: translate(0px, 0px)
            }
        }
        @-webkit-keyframes wave {
            0% {
                -ms-transform: translate(0px, 0px);
                -webkit-transform: translate(0px, 0px);
                transform: translate(0px, 0px)
            }
            50% {
                -ms-transform: translate(120px, 0px);
                -webkit-transform: translate(120px, 0px);
                transform: translate(120px, 0px)
            }
            100% {
                -ms-transform: translate(0px, 0px);
                -webkit-transform: translate(0px, 0px);
                transform: translate(0px, 0px)
            }
        }
    </style>
</head>
<body>
<div class="banner">
    <div class="wave-ball">
        <div class="waves">
            <div class="index_waves wave1"></div>
            <div class="index_waves wave2"></div>
        </div>
    </div>
</div>
</body>
</html>

 

posted @ 2017-10-31 20:04  总结  阅读(361)  评论(0)  编辑  收藏  举报