当前位置：网站首页>全屏数字预加载动画

全屏数字预加载动画

2022-08-06 08:18:00 【JiuMeilove】

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

代码

<!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>全屏数字计时预加载</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>

原网站

版权声明
本文为[JiuMeilove]所创，转载请带上原文链接，感谢
https://blog.csdn.net/weixin_44368963/article/details/126166649

当前位置：网站首页>全屏数字预加载动画

全屏数字预加载动画

边栏推荐

猜你喜欢

随机推荐