超简短代码制作vivo拨动心弦特效

2019年5月12日 176次阅读 来源: 急速奔跑中的蜗牛

《超简短代码制作vivo拨动心弦特效》 web前端群，189394454，有视频、源码、学习方法等大量干货分享

👇html代码：

    <div class="main">
        <div class="show">
            <div class="show-box">
                <div class="show-str str1"></div>
                <div class="show-ware "></div>
                <div class="show-str str2"></div>
            </div>
            <img src="images/figure.png" />
        </div>
    </div>

👇css代码：

    <style type="text/css">
        *{margin:0;padding:0;}
        body{background:url("images/bg.jpg");width:100%;height:100%;background-size:cover;min-height:630px;}
        
        .main{position:relative;}
        .show{width:100%;height:400px;position:absolute;top:210px;overflow:hidden;}
        .show img{margin:30px auto;display:block;position:relative;}

        .show-box{width:4250px;height:400px;position:absolute;left:50%;margin-left:-1625px;animation:play 5s linear infinite;}
        .show-str{background:url("images/x5_2.png");width:2000px;height:2px;position:absolute;top:200px;}
        .show-ware{background:url("images/x5_1.png");width:1250px;height:400px;position:absolute;top:0;left:2000px;}
        .str1{left:0;}
        .str2{left:3250px;}
        @keyframes play{
            from{left:-85%;}
            to{left:85%;}
        }
    </style>
    原文作者：急速奔跑中的蜗牛
    原文地址: https://www.jianshu.com/p/655580ec2d94
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞