div+css实现隧道穿越动画圈圈效果代码-html代码-BFW代码库

div+css实现隧道穿越动画圈圈效果代码

代码语言：html

所属分类：动画

代码描述：div+css实现隧道穿越动画圈圈效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
  
<style>
body {
        width: 100vw;
        height: 100vh;
        background-color: #354259;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        display: flex;
}

.rings {
        --border-width: 2px;
        --border-style: solid;
        --animation-duration: 4s;
        --animation-count: infinite;
        --animation-direction: normal;
        --animation-fill-mode: both;
        position: relative;
        width: 400px;
        aspect-ratio: 1/1;
}

.rings > .ring {
        position: absolute;
        top: 50%;
        left: 50%;
        aspect-ratio: 1/1;
        border-width: var(--border-width);
        border-style: var(--border-style);
        border-radius: 50%;
        transform-origin: center;
        -webkit-animation-duration: var(--animation-duration);
                animation-duration: var(--animation-duration);
        -webkit-animation-delay: calc(0.4s * var(--delay));
                animation-delay: calc(0.4s * var(--delay));
        -webkit-animation-iteration-count: var(--animation-count);
                animation-iteration-count: var(--animation-count);
        -webkit-animation-direction: var(--animation-direction);
                animation-direction: var(--animation-direction);
        -webkit-animation-fill-mode: var(--animation-fill-mode);
                animation-fill-mode: var(--animation-fill-mode);
        filter: opacity(0);
.........完整代码请登录后点击上方下载按钮下载查看