poline实现多种随机炫酷发散动画效果代码-html代码-BFW代码库

poline实现多种随机炫酷发散动画效果代码

代码语言：html

所属分类：动画

代码描述：poline实现多种随机炫酷发散动画效果代码，单击可切换不同风格。

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

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

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

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Aboreto&family=Work+Sans:wght@300;400&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://public.codepenassets.com/css/normalize-5.0.0.min.css">

  
  
<style>
body {
  min-height: 100vh;
  background: #fff;
  --bgc: #e7e1d8;
  background: var(--bgc);
  font-family: "Aboreto", cursive;
  height: 100dvh;
  overflow: hidden;
}

body:has(.dark) {
  --bgc: #202126;
}

body:has(.trans.dark) {
  --bgc: transparent;
  background: #202126;
}

body:has(.trans) {
  --bgc: transparent;
  background: #e7e1d8;
}

.scene {
  width: 100vw;
  height: 100vh;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.inner {
  width: 75vmin;
  aspect-ratio: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.inner::after {
  content: "";
  position: absolute;
  inset: 0.15rem;
  background: repeating-radial-gradient(#202126 0 1px, transparent 1px 2px, #e7e1d8 2px 3px);
  border-radius: 50%;
  mix-blend-mode: overlay;
  display: none;
  -webkit-mask-image: radial-gradient(transparent 10%, black 50%);
          mask-image: radial-gradient(transparent 10%, black 50%);
}

.notches.inner::after {
  display: block;
}

.ri.........完整代码请登录后点击上方下载按钮下载查看