css3png图片渐变动画

css3png图片渐变动画

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>{$title}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=no" />
    <meta name="format-detection" content="telephone=no" />
    <!-- Link Swiper's CSS -->
    <include file="commonheader" />
    <style>
    .dv {
        width: 1000px;
        height: 300px;
        margin: 0 auto;
        margin-top: 100px;
        font-size: 80px;
        text-align: center;
        background: -webkit-linear-gradient(left, #147B96, #E6D205 25%, #147B96 50%, #E6D205 75%, #147B96);
    
        background-size: 200% 100%;
        -webkit-mask: url(/zhongliangchangtu/images/fanhuibtn.png) no-repeat;
       -webkit-mask-size:1000px 300px;
        animation: masked-animation 1s infinite linear;
    }

    @-webkit-keyframes masked-animation {
        0% {
            background-position: 0 0;
        }

        100% {
            background-position: -100% 0;
        }
    }
    </style>
</head>

<body>
    <div class="dv"></div>
</body>

</html>

 

posted @ 2021-01-06 21:49  newmiracle宇宙  阅读(370)  评论(0)  编辑  收藏  举报