<!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>
