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