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

news/2024/5/20 20:39:32/文章来源: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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.luyixian.cn/news_show_744075.aspx

如若内容造成侵权/违法违规/事实不符，请联系dt猫网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！