css实现六角形虹膜门悬浮打开关闭动画效果代码-html代码-BFW代码库

css实现六角形虹膜门悬浮打开关闭动画效果代码

代码语言：html

所属分类：悬停

代码描述：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; /* change speed */
	--u: 0.55vmin; /* change bg size */
	--c1: #484848;
	--c2: #444444;
	--s1: #0002;
	--gp: 50%/calc(var(--u) * 10) calc(var(--u) * 10);
	background: 
		repeating-conic-gradient(from 0deg at 50% 13.75%, var(--s1) 0 20.55%, #fff0 21.05% 79.13%, var(--s1) 79.63% 100% ) var(--gp),
		repeating-conic-gradient(from 0deg at 50% 50%, #fff0 0 25%, var(--s1) 25% 29%, #fff0 30% 70%, var(--s1) 71% 75%, #fff0 75% 100%) var(--gp), 
		repeating-conic-gradient(from 0deg at 50% 50%, var(--c1) 0 25%, var(--c2) 0% 50%, var(--c1) 0 75%, var(--c2) 0% 100% ) var(--gp);

}

.content {
	width: 100vmin;
	height: 100vmin;
}

.content:before {
	content: "";
	width: 70vmin;
	height: 70vmin;
	position: absolute;
	left: calc(50% - 35vmin);
	border-radius: 100%;
	top: calc(50% - 35vmin);
	box-shadow: 0.5vmin 0.5vmin 1vmin #0a0a0a, -0.5vmin -0.5vmin 1vmin #222;
}

.door {
	width: 100%;
	height: 100%;
	background: linear-gradient(0deg, #000, #0b102e);
	border-radius: 100%;
	position: relative;
	overflow: hidden;
	clip-path: circle(35.4% at 50% 50%);
}

.door:before {
	content: "";
	width: 200%;
	height: 200%;
	position: absolute;
	left: -50%;
	background-image: 
		repeating-conic-gradient(#FFF9 0%, transparent .0004%, transparent .001%, transparent .09%), 
		radial-gradient(ellipse at 20% 30%, #80008030, #80008030, #ffa50030, #fff0, #fff0);
	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 40%, #858585 calc(40% + 1px), #686868 43% 46% , #484848 50%, #3330 calc(50% + 1px) 100%);
	filter: drop-shadow(-2px -2px 5px #0009);
	box-shadow: -5vmin -5vmin 5vmin 10vmin #222 inset, 5vmin 5vmin 5vmin 10vmin #cdcdcd inset;
}

body:hover .panel {
	animation-duration: 1s;
}

.panel {
	--p1: #787878;
	--p2: #323232;
	--tri: var(--p2) 0deg, var(--p1) 1deg 10deg, var(--p2) 11deg 49deg, var(--p1) 50deg 59deg, var(--p2) 60deg, #fff0 0 100%;
	--rad: var(--p2) 0.25vmin, var(--p1) calc(0.25vmin + 1px) 0.5vmin, #fff0 calc(0.5vmin + 1px) 100%;
	--rin: var(--p2) 0 0.5vmin, var(--p1) calc(0.5vmin + 1px) 0.75vmin, var(--p2) calc(0.75vmin + 1px) 1.25vmin, #f000 calc(1.25vmin + 1px) 100%;
	--con: var(--p2) 0 60deg, #fff0 0 100%; 
	--lin: #fff0 33%, var(--p1) calc(33% + 1px), #fff0 calc(33% + 2px);
	width: 57.5%;
	height: 50%;
	position: absolute;
	transition: all var(--spd) ease-in-out 0s;
	filter: drop-shadow(0px 0px 2px #222);
	background: 
		linear-gradient(120deg, var(--lin)),
		radial-gradient(circle at 50% 4.75vmin, var(--rin)), 
		radial-gradient(circle at 50% 5%, var(--rad)), 
		conic-gradient(from 150deg at 50% 7%, var(--tri)), 
		conic-gradient(from 150deg at 50% 0%, var(--con));
	top: 50%;
	left: 50%;
	animation: start1 var(--spd) ease-in-out 0s 1;
}

.panel:nth-c.........完整代码请登录后点击上方下载按钮下载查看