div+css实现悬浮开启虹膜门动画效果代码-html代码-BFW代码库

div+css实现悬浮开启虹膜门动画效果代码

代码语言：html

所属分类：动画

代码描述：div+css实现悬浮开启虹膜门动画效果代码

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

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

<head>
  <meta charset="UTF-8">
  

  
  
<style>
body {
        margin: 0;
        padding: 0;
        width: 100vw;
        height: 100vh;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        --spd: 2s;
        background: radial-gradient(circle at 50% 86%,black, #444);

}

* {
        box-sizing: border-box;
        transform-style: preserve-3d;
}

.content {
        width: 100vmin;
        height: 100vmin;
        perspective: 10vmin;
        display: flex;
        align-items: center;
        justify-content: center;
}

.door {
        width: 100%;
        height: 100%;
        border-radius: 100%;
        position: relative;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;

        clip-path: circle(35% at 50% 50%);}

.door:before {
        content: "";
        width: 200%;
        height: 200%;
        position: absolute;
        left: -50%;
        background-image:
                repeating-conic-gradient(#FFF9 0%, transparent .0004%, transparent .004%, transparent .074%), 
                radial-gradient(#0000, #0a123a),   linear-gradient(180deg, #2000587d, #2000587d, #000,  #9c27b02b), 
                linear-gradient(0deg, #ff9800, #ff9800, #000, #009688ba);
        animation: spin 500s linear 0s infinite;
        border-radius: 100%;

}

@keyframes spin {
        100% { transform: rotate(360deg); }
}

.door:after {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 222;
        box-sizing: border-box;
        border-radius: 100%;
        background: radial-gradient(#fff0 0 34%, #959595 calc(34% + 1px) 34.75%, #b7b7b7 calc(36% + 1px), #c5c5c5 43% , #737373 51%, #3330 calc(51% + 1px) 100%);
        filter: drop-shadow(0px 0px 5px #000d);
        box-shadow: 0vmin 0vmin 0vmin 14.55vmin #3c3c3c inset;
}


.panel {
        position: absolute;
        width: 70vmin;
        height: 70vmin;
        border-radius: 100%;
        overflow: hidden;
}

.panel:before {
        position: absolute;
        width: 100%;
        height: 100%;
        border: 10.5vmin solid #ff000000;
        border-bottom-color: #1e1e1e;
        border-bottom-color: #d3d3d3;
        border-radius: 100%;
        transform: rotate(0deg);
        transform-origin: 100% 100%;
        content: "";
        box-sizing: border-box;
        filter: drop-shadow(-3px -3px 2px #999);
        clip-path: circle(52% at 78% 56%);
        transition: all var(--spd) ease 0s;
        overflow: hidden;
        animation: start 3s ease 0s 1;
}

.door:hover .panel:before, 
.door:hover .panel span {
        transition: all var(--spd) ease 0s;
        transform: rotate(28.5deg);
}


.panel span {
        position: absolute;
        width: 100%;
        height: 100%;
        /* border: 2px solid red; */
        z-index: 2;
        top: 0%;
        left: 0%;
        border-radius: 100%;
        transform: rotate(0deg);
        transform-origin: 100% 100%;
        transition: all var(--spd) ease 0s;
        background: radial-gradient(circle at 66.5% -111.5%, #fff0 calc(28vmin - 4px), #999 calc(28vmin + 1px), #fff0 calc(28vmin + 2px) 100%);
        background-repeat: no-repeat;
        background-position: 64% 100%;
        background-size: 50% 20%;
        animation: start 3s ease 0s 1;
}

.panel:nth-child(12):before {
        /* border-color: #fff0; */
        filter: drop-shadow(0px -.........完整代码请登录后点击上方下载按钮下载查看