zoukankan      html  css  js  c++  java
  • 原生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%;
           100%;
        }
        .box{
             100%;
        }
        img,a{
          display: block;
           100%;
        }
        .btndiv{
             74%;
            position: fixed;
            bottom: 18px;
            right: 0;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
        .btn{
             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图:

     
  • 相关阅读:
    CH the luckiest number 欧拉函数 同余
    bzoj1257余数求和 数论分块 暴力
    luogup1463 反素数
    CH3101 阶乘分解
    T10396 曹老板斗地主(中度模拟)
    NOIP 2015子串(DP)
    CF1205B Shortest Cycle(Floyd判最小环)
    P2055 [ZJOI2009]假期的宿舍(二分图匹配)
    灾后重建(最短路)
    CF1098A Sum in the tree(贪心)
  • 原文地址:https://www.cnblogs.com/wd163/p/12212622.html
Copyright © 2011-2022 走看看