Full screen digital preload animation

JiuMeilove2022-08-06 08:23:12

效果图
在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Full screen digital timing preload</title>
<style> body {
 margin: 0; padding: 0; font-family: sans-serif; } .loader {
 position: absolute; top: 0; left: 0; height: 100%; background-color: #000; } section {
 position: absolute; top: 0; left: 0; width: 100%; height: 100vh; background-color: #fff; pointer-events: none; animation: fadeout .5s linear forwards; animation-delay: 11s; } @keyframes fadeout {
 from {
 opacity: 1; } to {
 opacity: 0; } } .count {
 position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 18vw; color: #fff; font-weight: 800; mix-blend-mode: difference; width: 550px; text-align: right; } .welcome {
 position: absolute; top: 0; left: 0; width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; color: #fff; } h2 {
 margin: 0; padding: 0; font-size: 10vw; color: #000; } </style>
</head>
<body>
<div class="welcome">
<h2>welcome</h2>
</div>
<section>
<div class="loader"></div>
<div class="count"></div>
</section>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script> $(document).ready(() => {
 var count = 0; var counter = setInterval(() => {
 if (count < 1001) {
 $('.count').text(Math.round(count / 10) + '%') $('.loader').css('width', count / 10 + '%') count++ } else {
 clearInterval(counter) } }, 10); }) </script>
</body>
</html>

thank
Similar articles