红叶都枫了 @163

原生html,css+js写下载按钮有提示动画效果的落地页

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>某某软件下载</title>
  //按项目需求需要一个下载按钮在刚进页面的时候就开始闪的功能
  <script type="text/javascript">
    window.onload=function(){     //用户进入页面时加载动画
        let btn  = document.getElementsByClassName('btn')   //需要动画的下载按钮
        setInterval(function(){
            fun()
        },600)
        function fun(){
            for(let i = 0;i<btn.length;i++){
                btn[i].style.width = "90%"
                setTimeout(function(){
                    btn[i].style.width = "88%"
                },300)
            }
        }
    }
  </script>
  <style>
    html,body{
      margin: 0;
      padding: 0;
      height: 100%;
      width: 100%;
    }
    .box{
        width: 100%;
    }
    img,a{
      display: block;
      width: 100%;
    }
    .btndiv{
        width: 74%;
        position: fixed;
        bottom: 18px;
        right: 0;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    .btn{
        width: 88%;
    }
    .bg{
        height: 100%;
        position: fixed;       //适配万恶的iphoneX
        top: 0;
    }
  </style>
</head>
<body>
    <div class="box">
        <img class="bg" src="./img/bg.png" alt="">
        <div class="btndiv" id="btndiv">
            <a href=""><img class="btn" src="./img/anniu_01.png" alt=""></a>  //a标签留下href给后端,填上该软件的下载地址再上服务器
            <a href=""><img class="btn" src="./img/anniu_03.png" alt=""></a>
        </div>
    </div>
</body>
</html>
gif图:

 

 


 

 

 
posted @ 2020-01-19 10:19  红叶都枫了163  阅读(763)  评论(0编辑  收藏  举报