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

 

原生html，css+js写下载按钮有提示动画效果的落地页的更多相关文章

  1. Bounce.js – 快速创建漂亮的 CSS3 动画效果

    Bounce.js 是一个用于制作漂亮的 CSS3 关键帧动画的 JavaScript 库,使用其特有的方式生成的动画效果.只需添加一个组件,选择预设,然后你就可以得到一个短网址或者导出为 CSS 代 ...

  2. css实现简单的告警提示动画效果

    需求:css实现简单的告警提示动画效果,当接收到实时信息的时候,页面弹出告警信息的动画效果 <!DOCTYPE html> <html lang="en"> ...

  3. 纯CSS实现帅气的SVG路径描边动画效果(转载)

    本文转载自: 纯CSS实现帅气的SVG路径描边动画效果

  4. AnimCheckBox按钮点击动画效果《IT蓝豹》

    AnimCheckBox按钮点击动画效果 AnimCheckBox按钮点击动画效果,点击选中后勾选框选择效果,很不错的动画功能.项目来源:https://github.com/lguipeng/Ani ...

  5. 用CAShapeLayer写股市K线图动画效果

    用CAShapeLayer写股市K线图动画效果 说明 入市有风险,炒股需谨慎.(因项目需求,本人提供了写这种效果的源码) 效果 源码 // // ViewController.m // Path // ...

  6. 超炫的Button按钮展开弧形动画效果

    ----------------------收藏备用  ------------------------------- 代码下载:http://download.csdn.net/detail/qq2 ...

  7. CSS自学笔记（14）:CSS3动画效果

    在CSS3中也新增了一些能够对元素创建动画处理的属性.通过这些新增的属性,我们可以实现元素从一种样式变换成另一种样式时为元素添加动态效果,我们就可以取代网页中的动态图片.flash动画和JavaScr ...

  8. css&js实现顶部banner滚动提示效果

    以一个小例子来展示滚动提示的代码部分: try.html <div id="scrollobj" > <span class="scrollTxt&qu ...

  9. 手把手教小白如何用css+js实现页面中图片放大展示效果

    1.前言      很多童鞋会在项目中遇到一些上传图片,展示图片的操作,但是图片呢有大有小,为了页面的美观,有时候我们需要将图片展示成固定宽高度,但是呢,领导就会说,我想看大图片,怎么办?想看就看呀, ...

随机推荐

  1. 根据M3U8地址下载视频

     下面展示的是通过M3U8地址,把这个地址转为一个视频文件:只是一个基本案例,当然,有些下载的M3U8文件里面格式是不一样的,还有的是加过密的,道理都是一个道理. import java.io.Buf ...

  2. Maven:A cycle was detected in the build path of project 'xxx'. The cycle consists of projects {xx}

    以下这个错误是在Eclipse中导入多个相互依赖的工程时出现的“循环依赖问题”:A cycle was detected in the build path of project 'xxx'. The ...

  3. Java哪些集合类是线程安全的？

    早在jdk的1.1版本中,所有的集合都是线程安全的.但是在1.2以及之后的版本中就出现了一些线程不安全的集合,为什么版本升级会出现一些线程不安全的集合呢?因为线程不安全的集合普遍比线程安全的集合效率高 ...

  4. HashMap实现原理(jdk1.7)，源码分析

    HashMap实现原理(jdk1.7),源码分析 ​ HashMap是一个用来存储Key-Value键值对的集合,每一个键值对都是一个Entry对象,这些Entry被以某种方式分散在一个数组中,这个数 ...

  5. 十五、Numpy-科学计算基础库

    Numpy:          NumPy(Numerical Python) 是科学计算基础库,提供大量科学计算相关功能,比如数据统计,随机数生成等.其提供最核心类型为多维数组类型(ndarray) ...

  6. WordPress迁移服务器后报Nginx404的问题

    Wordpress迁移服务器后,只有主页能打开,其它页面都显示404 页面无法访问. 出现这个问题是因为我的Wordpress之前用的服务器是apache+PHP组合,换了服务器后变成了Nginx+P ...

  7. vue项目开始 首页 part1

    stylus 优点:css之中使用一些变量,方便我们快速编写css 项目中我们使用css开发的辅助工具帮助我们开发网站样式 安装:终端打开我们项目的文件夹 npm install stylus --s ...

  8. js根据当前日期 求一个月前 半年前 一年前的日期

    function p(s) {        return s < 10 ? '0' + s: s;}getlastmonth() function getlastmonth() {    va ...

  9. Struts 2的流程

    Struts 2的流程 一.Struts 2 的开发步骤: 在web.xml中定义核心的Filter来拦截用户的请求. 由于Web应用时基于请求/响应架构的应用,所以不管哪个MVC Web框架,都需要 ...

  10. 安装完Ubuntu后没有设置过root密码，想要进入root账户怎么办？

    安装完Ubuntu后没有设置过root密码,想要进入root账户怎么办? Ubuntu的默认root密码是随机的,即每次开机都有一个新的root密码.我们可以在终端输入命令 sudo passwd,然 ...