ETJava Beta | Java
注册
登录
注册
登录
注册
登录
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css_loaders</title>
</head>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<link rel="stylesheet" type="text/css" href="css/loader3.css"/>
<body>
<!-- loader 加载动画-->
<div class="loader">
loading
</div>
<!-- 页面主页 -->
<section class="main">
<h1>欢迎来到 我的世界</h1>
<p>
Welcome To My World
</p>
<a href="#" class="btn">阅读更多</a>
</section>
</body>
<script type="text/javascript">
var loader = document.querySelector('.loader');
var main = document.querySelector('.main');
function init(){
setTimeout(function(){
loader.style.opacity = 0;
loader.style.display = 'none';
main.style.display = 'block';
setTimeout(function(){
main.style.opacity = 1;
},50)
},4000)
}
init();
</script>
<style>
/* 重置页面样式 - 否则会出现滚动条 */
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
font-family: 'Lato',sans-serif;
font-size: 18px;
line-height: 1.6;
background-image: linear-gradient(125deg,#f5f7fa,#c3cfe2 100%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
}
/* main */
.main{
text-align: center;
width: 90%;
display: none;
opacity:0;
transition: opacity 1s ease-in;
}
.main h1{
font-size: 50px;
margin-bottom: 10px;
}
.main p{
font-size: 25px;
color: #333;
}
.btn{
display: inline-block;
background:purple;
color: #FFFFFF;
text-decoration: none;
border: none;
border-radius: 5px;
padding: 10px 20px;
margin-top: 15px;
}
.btn:hover{
opacity: 0.9;
}
.loader{
font-family: 'ZCODL Kuaile',cursive;
font-size: 40px;
color: palevioletred;
}
.loader::after{
content: "\2026";
display: inline-block;
overflow: hidden;
vertical-align: bottom;
animation: dots steps(4,end) 2s infinite;
width: 0px;
}
@keyframes dots{
to{
width: 1.25em;
}
}
</style>
</html>
官方公众号
