如何在 HTML,CSS3 中添加预加载器 GIF/MP4

Question

早些时候我使用微调器来加载我的网站。 我想把它改成视频，所以我想编辑以前的代码，所以我应该怎么做才能删除微调器并添加视频 css 链接中的视频是https://techcraze.co.in/wp-content/uploads /2021/03/topp.mp4请帮助我在此链接的帮助下放置视频我的 html

<div class="loader_bg">
    <div class="loader" img src= "https://techcraze.co.in/wp-content/uploads/2021/03/topp.mp4"></div>

这是我的 CSS：-

    .load{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    opacity: 1;
    background-color: #000000;
    animation: AnimateBg 10s linear infinite;
    transition:  all 0.5s ease-in-out;
}

@keyframes animateScale{
    0%{
        transform: scale(1);
    }

    100%{
        transform: scale(0); 
    }
}

@keyframes AnimateBg{
    0%{
        filter: hue-rotate(0deg);
    }
    100%{
        filter: hue-rotate(360deg);
    }
}

.load .loader{
    position: relative;
    width: 120px;
    height: 120px;
}

.load .loader span{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: rotate(calc(18deg * var(--i)));
}

.load .loader span::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: #ffffff ;
    box-shadow: 0 0 10px #9B2335 ,
                0 0 20px #DFCFBE ,
                0 0 40px #55B4B0 ,
                0 0 60px #E15D44 ,
                0 0 80px #7FCDCD ,
                0 0 100px #C3447A ;
    animation: animateScale 2s linear infinite;
    animation-delay: calc(0.1s * var(--i));
}

.load-fin{
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}

Answer 1

<img>标签仅适用于两个（格式如.png 、 .jpg的图像）、（或.gif文件）

因此，如果您需要在站点中添加视频.. 您必须使用<video>标签，如下例所示：

带控件的视频示例：

 <video width="400" controls> <source src="https://techcraze.co.in/wp-content/uploads/2021/03/topp.mp4" type="video/mp4"> Your browser does not support HTML video. </video>

不带自动播放功能控件的视频示例：

 <video width="400" autoplay> <source src="https://techcraze.co.in/wp-content/uploads/2021/03/topp.mp4" type="video/mp4"> Your browser does not support HTML video. </video>