<!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. SQL Server 2017 安装问题

    遇到问题 Polybase 要求安装 Oracle JRE7 更新 规则失败 安装完毕之后,登录提示:您试图连接的 SQL Server 实例未安装 安装完SQL Server 2017 后,无法启动 ...

  2. Mac Github:第一次上传成功,解决图片不可显示,Initial commit Untracked files

    在上传之前需要先给自己的电脑安装SSH 上传成功用的是github的官方提示,直接复制去做就可以了 解决README.md中图片不可显示:图片路径到底要怎么写? https://blog.csdn.n ...

  3. Swift 中调试状态下打印日志

    首先我们应该知道Swift中真个程序的入口就是在AppDelegate.swift中.所以在打印日志在 AppDelegate.swift中是这样的 import UIKit @UIApplicati ...

  4. 从认证到调度,K8s 集群上运行的小程序到底经历了什么?

    导读:不知道大家有没有意识到一个现实:大部分时候,我们已经不像以前一样,通过命令行,或者可视窗口来使用一个系统了. 前言 现在我们上微博.或者网购,操作的其实不是眼前这台设备,而是一个又一个集群.通常 ...

  5. 微信小程序之组件常见的问题

    小程序自定义的组件: (1)组件的结构 自定义的组件和普通的页面定义没有什么区别,也包含了四个文件:xxx.wxml(组件的视图层),xxx.json,xxx.js,xxx.wxss 组件的xxx.w ...

  6. Git 学习 day01

    Tips:最近的工作中需要用到版本控制工具git,所以准备开一个分类用来记录下自己学到的知识,以备以后温习 在安装完git之后需要设置用户名和用户邮箱: $ git config --global u ...

  7. 201771010123汪慧和《面向对象程序设计JAVA》第六周实验总结

    一.理论部分: 1.继承 用已有类来构建新类的一种机制.当定义了一个新类继承了一个类时,这个新类就继承了这个类的方法和域,同时在新类中添加新的方法和域以适应新的情况. 2.类.超类.子类 (1)类继承 ...

  8. IO流处理文件读取到字节数组,再从字节数组读取到文件,Java实现

    package cn.zhang.io; import java.io.ByteArrayInputStream; import java.io.ByteArrayOutputStream; impo ...

  9. python刷LeetCode:2.两数相加

    难度等级:中等 题目描述: 给出两个 非空 的链表用来表示两个非负的整数.其中,它们各自的位数是按照 逆序 的方式存储的,并且它们的每个节点只能存储 一位 数字. 如果,我们将这两个数相加起来,则会返 ...

  10. pcl 1.8 + VS 2010 在win7 x64下的配置

    https://blog.csdn.net/zhangping560/article/details/53978011 版权声明:(转载请注明作者和出处:http://blog.csdn.net/zh ...