单个div+css实现催眠眼镜动画效果代码

代码语言:html

所属分类:动画

代码描述:单个div+css实现催眠眼镜动画效果代码

代码标签: 单个 div css 催眠 眼镜 动画

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


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

<head>

  <meta charset="UTF-8">

  
  
<style>
body {
  height: 100vh;
  --background: rgb(219, 165, 65);
  --background-tr: rgba(219, 165, 65,0);
  --border: #000;
  --yellow: rgb(255, 251, 2);
  --red: rgb(206, 44, 44);
  --green: rgb(77, 197, 30);
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--background);
}

.hypnotic {
  position: relative;
  width: 100vmin;
  height: 80vmin;
  margin: 0;
  border-radius: 5px;
  background: radial-gradient(ellipse at 50% 100%, var(--background-tr) 49%, var(--border) 50%, var(--border) 53%, var(--background-tr) 54%) 50% 30%/15% 5% no-repeat, linear-gradient(0deg, var(--border) 100%, var(--border) 100%) 49% 65.2%/15% 1% no-repeat, linear-gradient(-75deg, var(--background-tr) 49%, var(--border) 50%, var(--border) 53%, var(--background-tr) 54%) 45% 47%/15% 35% no-repeat, radial-gradient(circle, var(--background-tr) 49%, var(--border) 50%, var(--border) 51%, var(--background-tr) 52%) 80% 30%/40% 40% no-repeat, radial-gradient(circle, var(--background-tr) 49%, var(--border) 50%, var.........完整代码请登录后点击上方下载按钮下载查看

网友评论0