前端让网站首页加载动画在显示内容

最新推荐文章于 2024-05-27 12:41:44 发布
最新推荐文章于 2024-05-27 12:41:44 发布
阅读量1k 收藏 1
点赞数 1
分类专栏： 小吴的前端分享 文章标签： html css javascript jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42337801/article/details/108755243
版权

最近遇到了一个需求就是网站在加载时先加载一个动画，点击动画的任意位置在出现首页内容
试了很多种方法，自己想了一种思路
1，首先把首页内容和动画内容分开，body先设置display:none，隐藏
在这里插入图片描述

2，写js这里的意思是页面，设置两个定时器，在点击时关闭定时器，现实首页内容
在这里插入图片描述
3，
参考动画

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>百叶窗</title>
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>
        * {
            padding: 0px;
            margin: 0px;
        }
        
        body {
            font-family: "微软雅黑";
            font-size: 14px;
            color: #212121;
            position: relative;
            min-width: 1280px;
        }
        
        li {
            list-style: none;
        }
        
        ul {
            padding: 0;
            margin: 0;
        }
        
        a {
            color: #444;
            text-decoration: none
        }
        
        a:hover {
            text-decoration: none !important;
            color: #272d5a;
        }
        
        a:focus {
            text-decoration: none !important;
            outline: none !important;
        }
        
        button:focus,
        button:hover {
            outline: none !important;
        }
        
        ul,
        ol {
            margin: 0;
            padding: 0;
        }
        
        img {
            max-width: 100%;
        }
        
        input,
        button {
            outline: none;
        }
        
        #btn {
            position: fixed;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
        }
        
        .animates {
            overflow: hidden;
            position: relative;
            display: none;
            background-color: black;
        }
        
        .animates.bbb {
            display: block;
        }
        
        .animates::before {
            display: block;
            content: "";
            position: absolute;
            z-index: -1111;
            right: 50%;
            left: 0;
            top: 0;
            bottom: 0;
            background: #000;
            animation: eee 1s;
            -moz-animation: eee 1s;
            -webkit-animation: eee 1s;
            -o-animation: eee 1s;
            animation-delay: 1s;
            -webkit-animation-delay: 1s;
        }
        
        @keyframes eee {
            0% {
                right: 50%;
                z-index: 1000;
            }
            99% {
                right: 100%;
                z-index: 1000;
            }
            100% {
                z-index: -111;
            }
        }
        
        @-moz-keyframes eee
        /* Firefox */
        
        {
            0% {
                right: 50%;
                z-index: 1000;
            }
            99% {
                right: 100%;
                z-index: 1000;
            }
            100% {
                z-index: -111;
            }
        }
        
        @-webkit-keyframes eee
        /* Safari and Chrome */
        
        {
            0% {
                right: 50%;
                z-index: 1000;
            }
            99% {
                right: 100%;
                z-index: 1000;
            }
            100% {
                z-index: -111;
            }
        }
        
        @-o-keyframes eee
        /* Opera */
        
        {
            0% {
                right: 50%;
                z-index: 1000;
            }
            99% {
                right: 100%;
                z-index: 1000;
            }
            100% {
                z-index: -111;
            }
        }
        
        .animates::after {
            display: block;
            content: "";
            position: absolute;
            z-index: -1111;
            left: 50%;
            right: 0;
            top: 0;
            bottom: 0;
            background: #000;
            animation: fff 1s;
            -moz-animation: fff 1s;
            -webkit-animation: fff 1s;
            -o-animation: fff 1s;
            animation-delay: 1s;
            -webkit-animation-delay: 1s;
        }
        
        @keyframes fff {
            0% {
                left: 50%;
                z-index: 1000;
            }
            99% {
                left: 100%;
                z-index: 1000;
            }
            100% {
                z-index: -111;
            }
        }
        
        @-moz-keyframes fff
        /* Firefox */
        
        {
            0% {
                right: 50%;
                z-index: 1000;
            }
            99% {
                right: 100%;
                z-index: 1000;
            }
            100% {
                z-index: -111;
            }
        }
        
        @-webkit-keyframes fff
        /* Safari and Chrome */
        
        {
            0% {
                right: 50%;
                z-index: 1000;
            }
            99% {
                right: 100%;
                z-index: 1000;
            }
            100% {
                z-index: -111;
            }
        }
        
        @-o-keyframes fff
        /* Opera */
        
        {
            0% {
                right: 50%;
                z-index: 1000;
            }
            99% {
                right: 100%;
                z-index: 1000;
            }
            100% {
                z-index: -111;
            }
        }
        
        .animates .animate1::after {
            clear: both;
            display: block;
            content: '';
        }
        
        .animates .animate1 {
            max-width: 1770px;
            margin: 0 auto;
            position: relative;
            zoom: 1;
        }
        
        .animates img {
            width: 100%;
            height: 1000px;
        }
        
        .animates .animate1 .an-left {
            width: 50%;
            float: left;
            height: 1000px;
            overflow: hidden;
            background-color: cornflowerblue;
            animation: an-left 1s;
            -moz-animation: an-left 1s;
            /* Firefox */
            -webkit-animation: an-left 0s;
            /* Safari and Chrome */
            -o-animation: an-left 0s;
            /* Opera */
            animation-delay: 1s;
            -webkit-animation-delay: 1s;
            /* Safari 和 Chrome */
            transform: translate(0, 0);
        }
        
        @keyframes an-left {
            from {
                transform: translate(100%, 0);
            }
            to {
                transform: translate(0, 0);
            }
        }
        
        @-moz-keyframes an-left
        /* Firefox */
        
        {
            from {
                transform: translate(100%, 0);
            }
            to {
                transform: translate(0, 0);
            }
        }
        
        @-webkit-keyframes an-left
        /* Safari and Chrome */
        
        {
            from {
                transform: translate(100%, 0);
            }
            to {
                transform: translate(0, 0);
            }
        }
        
        @-o-keyframes an-left
        /* Opera */
        
        {
            from {
                transform: translate(100%, 0);
            }
            to {
                transform: translate(0, 0);
            }
        }
        
        .animates .animate1 .an-right {
            width: 50%;
            float: left;
            height: 1000px;
            overflow: hidden;
            background-color: darksalmon;
            animation: an-right 1s;
            -moz-animation: an-right 1s;
            /* Firefox */
            -webkit-animation: an-right 1.5s;
            /* Safari and Chrome */
            -o-animation: an-right 1s;
            /* Opera */
            animation-delay: 1s;
            -webkit-animation-delay: 1s;
            /* Safari 和 Chrome */
            transform: translate(0, 0);
        }
        
        @keyframes an-right {
            from {
                transform: translate(100%, 0);
            }
            to {
                transform: translate(0, 0);
            }
        }
        
        @-moz-keyframes an-right
        /* Firefox */
        
        {
            from {
                transform: translate(100%, 0);
            }
            to {
                transform: translate(0, 0);
            }
        }
        
        @-webkit-keyframes an-right
        /* Safari and Chrome */
        
        {
            from {
                transform: translate(100%, 0);
            }
            to {
                transform: translate(0, 0);
            }
        }
        
        @-o-keyframes an-right
        /* Opera */
        
        {
            from {
                transform: translate(100%, 0);
            }
            to {
                transform: translate(0, 0);
            }
        }
        
        .animate2 {
            position: relative;
            display: none;
        }
        
        .animate2.aaa {
            display: block;
        }
        
        .animate2::after {
            display: block;
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            background: #000;
            animation: aaa 1s;
            -moz-animation: aaa 1s;
            /* Firefox */
            -webkit-animation: aaa 1s;
            /* Safari and Chrome */
            -o-animation: aaa 1s;
            /* Opera */
            animation-delay: 3s;
            -webkit-animation-delay: 3s;
            /* Safari 和 Chrome */
        }
        
        @keyframes aaa {
            from {
                top: 100%;
            }
            to {
                top: 50%;
            }
        }
        
        @-moz-keyframes aaa
        /* Firefox */
        
        {
            from {
                top: 100%;
            }
            to {
                top: 50%;
            }
        }
        
        @-webkit-keyframes aaa
        /* Safari and Chrome */
        
        {
            from {
                top: 100%;
            }
            to {
                top: 50%;
            }
        }
        
        @-o-keyframes aaa
        /* Opera */
        
        {
            from {
                top: 100%;
            }
            to {
                top: 50%;
            }
        }
        
        .animate2::before {
            display: block;
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            background: #000;
            animation: myfirst 1s;
            -moz-animation: myfirst 1s;
            /* Firefox */
            -webkit-animation: myfirst 1s;
            /* Safari and Chrome */
            -o-animation: myfirst 1s;
            /* Opera */
            animation-delay: 3s;
            -webkit-animation-delay: 3s;
            /* Safari 和 Chrome */
        }
        
        @keyframes myfirst {
            from {
                bottom: 100%;
            }
            to {
                bottom: 50%;
            }
        }
        
        @-moz-keyframes myfirst
        /* Firefox */
        
        {
            from {
                bottom: 100%;
            }
            to {
                bottom: 50%;
            }
        }
        
        @-webkit-keyframes myfirst
        /* Safari and Chrome */
        
        {
            from {
                bottom: 100%;
            }
            to {
                bottom: 50%;
            }
        }
        
        @-o-keyframes myfirst
        /* Opera */
        
        {
            from {
                bottom: 100%;
            }
            to {
                bottom: 50%;
            }
        }
        
        .animate2 .an-top {
            width: 100%;
            height: 500px;
            background-color: green;
            animation: an-top 1s;
            -moz-animation: an-top 1s;
            /* Firefox */
            -webkit-animation: an-top 1s;
            /* Safari and Chrome */
            -o-animation: an-top 1s;
            /* Opera */
            animation-delay: 3s;
            -webkit-animation-delay: 3s;
            /* Safari 和 Chrome */
        }
        
        @keyframes an-top {
            from {
                transform: translate(0, 0);
            }
            to {
                transform: translate(0, 100%);
            }
        }
        
        @-moz-keyframes an-top
        /* Firefox */
        
        {
            from {
                transform: translate(0, 0);
            }
            to {
                transform: translate(0, 100%);
            }
        }
        
        @-webkit-keyframes an-top
        /* Safari and Chrome */
        
        {
            from {
                transform: translate(0, 0);
            }
            to {
                transform: translate(0, 100%);
            }
        }
        
        @-o-keyframes an-top
        /* Opera */
        
        {
            from {
                transform: translate(0, 0);
            }
            to {
                transform: translate(0, 100%);
            }
        }
        
        .animate2 .an-bottom {
            width: 100%;
            height: 500px;
            background-color: brown;
            animation: an-bottom 1s;
            -moz-animation: an-bottom1s;
            /* Firefox */
            -webkit-animation: an-bottom 0s;
            /* Safari and Chrome */
            -o-animation: an-bottom 0s;
            /* Opera */
            animation-delay: 3s;
            -webkit-animation-delay: 3s;
            /* Safari 和 Chrome */
        }
        
        .animate2 img {
            width: 100%;
            height: 500px;
            display: block;
        }
        
        @keyframes an-bottom {
            from {
                transform: translate(0, 0);
            }
            to {
                transform: translate(0, 100%);
            }
        }
        
        @-moz-keyframes an-bottom
        /* Firefox */
        
        {
            from {
                transform: translate(0, 0);
            }
            to {
                transform: translate(100%, 0);
            }
        }
        
        @-webkit-keyframes an-bottom
        /* Safari and Chrome */
        
        {
            from {
                transform: translate(0, 0);
            }
            to {
                transform: translate(100%, 0);
            }
        }
        
        @-o-keyframes an-bottom
        /* Opera */
        
        {
            from {
                transform: translate(0, 0);
            }
            to {
                transform: translate(100%, 0);
            }
        }
    </style>
</head>

<body>
    <div class="animates bbb">
        <div class="animate1">
            <div class="an-left">
                <!-- <img src="img/left.png"> -->
            </div>
            <div class="an-right">
                <!-- <img src="img/right.png"> -->
            </div>
        </div>
    </div>
    <div class="animate2">
        <div class="an-top">
            <!-- <img src="img/top.png"> -->
        </div>
        <div class="an-bottom">
            <!-- <img src="img/bottom.png"> -->
        </div>
    </div>

    <a href="www.baidu.com" id="btn"></a>
</body>

<script>
    window.onload = function() {
        setInterval(
            "$('.animate2').toggleClass('aaa')", 4000);
        setInterval("$('.animates').toggleClass('bbb')", 4000);
    }
</script>

</html>
可爱的橙子大爷
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端各种Tab效果
01-16
各种Tab效果，需要的请拿走，适合各种应用场景，PC端网页或移动应用
【前端素材】推荐5种优质大数据分析展示页面网站设计（34）（附源码）
m0_46013789的博客
04-27 777
大数据展示分析页面是指用于展示和分析大数据集合的页面界面，通常用于数据可视化和分析。这种页面通常设计得直观并具有交互性，让用户能够以易于理解和吸引人的方式查看数据、发现模式、趋势和洞察，并从中获得价值。
基于Vue的前端加载中页面动画——弹跳动画Loading组件的设计与实现
最新发布
chenchuang0128的博客
05-27 1274
基于Vue的前端加载中页面动画——弹跳动画Loading组件的设计与实现摘要随着技术的飞速进步，前端开发的复杂性日益提升。传统的开发方式通常将整个系统构建为一个整体，导致即使是微小的改动或功能的增加也可能引起整体逻辑的变动。为了解决这个问题，组件化开发应运而生，它允许开发者独立地开发、维护组件，并可以灵活地将它们组合在一起。本文介绍了一个基于Vue的加载中页面动画组件——弹跳动画Loading组件，该组件不仅优化了用户体验，还提高了开发效率和可维护性。一、引言。
animate.css+wow.js=这官网真好看(根据滑动到位置，加载该位置动画)
kukulei2211的博客
07-30 1314
先看下效果：动画效果网页 未显示区域的动画是不加载的，等到滚动到指定区域才会加载css动画，这个动画只加载一次，想要再看就得刷新页面，动画依赖于animate.css 可以看下我们公司的官网：公司项目地址 看着还是很美观的，动画加载的很舒服，想要这种跟随页面滑动加载就得靠wow.js 哇哦!!! 当然你也可以自己写,项目不急的情况下，自己慢慢研究还是很棒的。 animate.css下载地址 wow.js并没有找到官网，详细点的可以看这个地址（包含下载地址和详细配置信息） 实现方法 <link rel
网页过渡效果html,jQuery实现切换页面过渡动画效果
weixin_34621309的博客
06-03 1538
直接为大家介绍制作过程，希望大家可以喜欢。HTML结构该页面切换特效的HTML结构使用一个元素来作为页面的包裹元素，div.cd-cover-layer用于制作页面切换时的遮罩层，div.cd-loading-bar是进行ajax加载时的loading进度条。Page TransitionCSS样式该页面切换特效中使用body::before和body::after伪元素在页面切换过程中创建两个遮...
路由跳转方式、刷新当前页面方式、切换页面时怎么设置过渡动画
一个懒惰前端的博客
05-18 2701
路由跳转方式 vue-router控制路由则必须router-view作为容器 1：router-link 声明式 不传参 // 浏览器在解析时，将它解析成一个类似于<a> 的标签。 <router-link :to="{name:'index'}}"> 或者 <router-link to='/index'> 传参 <router-link :to="{name:'index',query:{id:'xxx',name:'
transition过渡动画闪烁同时出现两个页面
leojoe1992的博客
04-14 1097
vue中使用animate.css跳转动画会短暂显示两个页面，导致闪烁，完美解决
如何在动画播放完成后进入主界面?
Liu_jinfeng_ygo的博客
02-02 572
//相对布局 rl_splash_rootview = (RelativeLayout) findViewById(R.id.rl_splash_rootview); ScaleAnimation scaleAnimation = new ScaleAnimation(0,1,0,1,2,0.5f,2,0.5f); scaleAnimation.setDuration(2000); scale
【Typecho插件-前端-加载动画】SakuraLoad
01-17
首先，我们要理解什么是前端加载动画。在网页加载过程中，如果内容未能即时呈现，用户可能会感到困扰，加载动画就是为了解决这个问题而存在的。它在页面内容正在加载时显示，给用户一个视觉反馈，表明网站并未卡顿，...
HTML+css3 前端加载动画loading加载动画，32款网页loading加载动画
02-28
在网页设计领域，前端加载动画（通常称为Loading动画）是用户等待页面完全加载时的一种视觉反馈，它能够提升用户体验，使用户在等待过程中不会感到枯燥无趣。HTML和CSS3作为现代网页开发的基础，提供了丰富的功能来...
loading加载gif动画
01-02
在IT行业中，加载动画，尤其是GIF格式的加载动画，是一种常见的用户界面元素，用于指示应用程序或网页正在处理数据或内容。这些动画为用户提供视觉反馈，让他们知道系统没有冻结，而是正在后台执行任务。让我们深入...
天猫首页以及动效的实现
01-07
基于HTML、CSS天猫首页的布局，以及基于JS动效的实现。基于HTML、CSS天猫首页的布局，以及基于JS动效的实现。基于HTML、CSS天猫首页的布局，以及基于JS动效的实现。
Bootstrap加载图标动画特效
07-24
在实际应用中，Bootstrap可能会提供预定义的CSS类，开发者只需要将这些类添加到相应的HTML元素上，就可以方便地实现加载动画效果。此外，还可以通过JavaScript进行更复杂的控制，比如根据页面状态决定何时开始或停止...
蓝色CSS3图标加载动画.zip
06-08
加载动画对于用户体验至关重要，特别是在网页或应用内容需要时间加载时，它们可以提供反馈，让用户知道系统正在处理请求。蓝色调的选择通常与科技、专业和现代感相联系，因此这些蓝色CSS3图标加载动画可能适用于各种...
前端五个拿来就能用的炫酷动画登录页面
热门推荐
程序员成长指北
06-29 2万+
大厂技术高级前端Node进阶点击上方程序员成长指北，关注公众号回复1，加入高级Node交流群前言：提供了完整代码和预览图为防止大家复制出错，特提供代码的打包下载地址百度网盘[1]链接：https://pan.baidu.com/s/1qjquFV9j7I0KldFu7d7eZg?pwd=n2sz提取码：n2sz微信截图_20220517142941.png一....
html进入页面动画,HTML5 SVG打开页面动画特效1
weixin_29957761的博客
06-03 1271
class="no-js">http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">content="width=device-width, initial-scale=1.0">HTML5 SVG打开页面动画特效- A5源码type="text/css" href="css/normalize.css" />type...
前端小练-平台首页介绍+动画
`or 1 or 不正经の泡泡
06-17 750
时间飞逝，快大四了，刚好最近看不下去考研的，而且要准备这个毕设选题了，然后就想着怎么能够把自己所学的东西都用上，一开始是打算做操作系统的，但是难度还是有点大，最重要的是，除了锻炼自己没有太大的意义，最起码以后，在我的代码库当中可能用不上，所以我就想换一样，于是我打算做一个AI算法开放平台。其实也就是开放API，让后让大家调用。目前是打算集成6个算法，其实也是我以前做过的，老粉应该是知道的，我就不废话 了。那么来看看今天，做出的一个首页的效果吧： 那么这个页面的话，也是使用这个vue3 做的一个开放。我们先来
前端首页加载的一些优化
weixin_30555125的博客
03-04 112
年前网站的首页要改版，不知怎么的这个艰巨的任务就到了我头上，首页作为网站的门面，感觉压力很大，但是也是一次难得的锻炼的机会，所以还有点儿兴奋的就开始做了。 这次的改版跟京东淘宝的首页很像，首屏是商品分类、轮播、滚动的促销厂家信息和大家都在买、推荐商品以及公告这几个模块，剩下模块的则分为不同的楼层展示，新首页现在具体长这样：我是新首页 因为首页有很多商品和广告图片，我开始的时候用了懒...
控制页面加载完再显示页面
wlm_0214的博客
09-07 520
document.onreadystatechange = function () { if (document.readyState == "complete") { document.body.style.display = "block"; } else { document.bo...
页面加载loading逻辑web前端
06-09
页面加载loading逻辑是指在页面加载时，为了提高用户体验，通常需要显示一个加载动画，告知用户页面正在加载中。在前端实现中，通常需要考虑以下几个方面： 1. 加载动画的设计：加载动画的设计应该符合用户的视觉...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值