div+css实现六边形粒子组成的彩色曲面球体动画效果代码
代码语言：html
所属分类：粒子
代码描述：div+css实现六边形粒子组成的彩色曲面球体动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
@property --p {
syntax: "<number>";
initial-value: 0;
inherits: false;
}
body {
display: grid;
overflow: hidden;
margin: 0;
min-height: 100vh;
background: #000;
}
.hex {
--i: calc(var(--arm)/var(--arm-n));
--j: calc(var(--hex)/(var(--hex-n) - 1));
--ax: calc((.5*(var(--i) + var(--j)) + var(--p, 0))*1turn);
--ay: calc(var(--j)*180deg - 90deg);
--rs: calc(2.5*1.25em/var(--tan));
grid-area: 1/1;
place-self: center;
padding: 1.25em;
transform: perspective(25em) translatez(calc(-1*var(--rs))) rotatex(calc(-1*var(--ax))) rotatey(var(--ay)) translatez(var(--rs)) rotatey(calc(-1*var(--ay))) rotatex(var(--ax));
background: hsl(calc(var(--i)*360), 75%, 65%);
mix-blend-mode: screen;
clip-path: polygon(50% 0%, 93.3012701892% 25%, 93.3012701892% 75%, 50% 100%, 6.6987298108% 75%, 6.6987298108% 25%, 50% 0%, calc(50% + (50% - 6.9282032303px)*0) calc(50% + (50% - 6.9282032303px)*-1), calc(50% + (50% - 6.9282032303px)*-0.8660254038) calc(50% + (50% - 6.9282032303px)*-0.5), calc(50% + (50% - 6.9282032303px)*-0.8660254038) calc(50% + (50% - 6.9282032303px)*0.5), calc(50% + (50% - 6.9282032303px)*0) calc(50% + (50% - 6.9282032303px)*1), calc(50% + (50% - 6.9282032303px)*0.8660254038) calc(50% + (50% - 6.9282032303px)*0.5), calc(50% + (50% - 6.9282032303px)*0.8660254038) calc(50% + (50% - 6.9282032303px)*-0.5), calc(50% + (50% - 6.9282032303px)*0) calc(50% + (50% - 6.9282032303px)*-1));
animation: p 8s linear infinite;
}
@keyframes p {
to {
--p: 1 ;
}
}
</style>
</head>
<body >
<body style="--arm-n: 12; --hex-n: 20; --tan: 0.158">
<style>.hex:nth-of-type(n + 1) { --arm: 0 }.hex:nth-of-type(n + 21) { --arm: 1 }.hex:nth-of-type(n + 41) { --arm: 2 }.hex:nth-of-type(n + 61) { --arm: 3 }.hex:nth-of-type(n + 81) { --arm: 4 }.hex:nth-of-type(n + 101) { --arm: 5 }.hex:nth-of-type(n + 121) { --arm: 6 }.hex:nth-of-type(n + 141) { --arm: 7 }.hex:nth-of-type(n + 161) { --arm: 8 }.hex:nth-of-type(n + 181) { --arm: 9 }.hex:nth-of-type(n + 201) { --arm: 10 }.hex:nth-of-type(n + 221) { --arm: 11 }.hex:nth-of-type(20n + 1) { --hex: 0 }.hex:nth-of-type(20n + 2) { --hex: 1 }.hex:nth-of-type(20n + 3) { --hex: 2 }.hex:nth-of-type(20n + 4) { --hex: 3 }.hex:nth-of-type(20n + 5) { --hex: 4 }.hex:nth-of-type(20n + 6) { --hex: 5 }.hex:nth-of-type(20n + 7) { --hex: 6 }.hex:nth-of-type(20n + 8) { --hex: 7 }.hex:nth-of-type(20n + 9) { --hex: 8 }.hex:nth-of-type(20n + 10) { --hex: 9 }.hex:nth-of-type(20n + 11) { --hex: 10 }.hex:nth-of-type(20n + 12) { --hex: 11 }.hex:nth-of-type(20n + 13) { --hex: 12 }.hex:nth-of-type(20n + 14) { --hex: 13 }.hex:nth-of-type(20n + 15) { --hex: 14 }.hex:nth-of-type(20n + 16) { --hex: 15 }.hex:nth-of-type(20n + 17) { --hex: 16 }.hex:nth-of-type(20n + 18) { --hex: 17 }.hex:nth-of-type(20n + 19) { --hex: 18 }.hex:nth-of-type(20n + 20) { --hex: 19 }
</style>
<div class="hex"></div>
<div class="hex"></div>
<div class="hex"></div>
<div class="hex"></div>
<div class="hex"></div>
<div class="hex"></div>
<div class="hex"></div>
<div class="hex"></div>
<div class="hex"></div>
<div class="hex"></div>
<div class="hex"></div>
<div class="hex"></div>
<div class="hex"></div>
<div class="hex"></div>
<div class="hex"></div>
<div class="hex"></div>
<div class="hex"></div>
<div class="hex"></div>
<div class="hex"></div>
<div class="hex"></div>
<div class="hex"></div>
<div class="hex"></div>
<div class="hex"></div>
<div class="hex"></div>
<div class="hex"></div>
<div class="hex"></div>
<div class="hex"></div>
<div class="hex"></div>
<div class="hex"></div>
<div class="hex"></div>
<div class="hex"></div>
<div class="hex"></div>
<div class="hex"></div>
<div class="hex"></div>
<div class="hex"></div>
<div class="hex"></div>
<div class="hex"></div>
<div class="hex"></div>
<div class="hex"></div>
<div class="hex"></div>
<div class="hex"></div>
<div class="hex"></div>
<div class="hex"></div>
<div class="hex"></div>
<div class="hex"></div>
<div class="hex"></div>
<div class="hex"></div>
<div class="hex"></div>
<div class="hex"></div>
<div class="hex"></div>
<div class="hex"></div>
<div class="hex"></div>
<div class="hex"></div>
<div class="hex"></div>
<div class="hex"></div>
<div class="hex"></div>
<div class="hex"></div>
<div class="hex"></div>
<div class="hex"></div>
<div class="hex"></div>
<div class="hex"></div>
<div class="hex"></div>
<div class="hex"></div>
<div class="hex"></div>
<div class="hex"></div>
<div class="hex"></div>
<div class="hex"></div>
<div class="hex"></div>
<div class="hex"></div>
<div class="hex"></div>
<div class="hex"></div>
<div class="hex"></div>
<div class="hex"></div>
<div class="hex"></div>
<div class="hex"></div>
<div class="hex"></div>
<div class="hex"></div>
<div class="hex"></div>
<div class="hex"></div>
<div class="hex"></div>
<div class="hex"></div>
<div class="hex"></div>
<div class="hex"></div>
<div class="hex"></div>
<div class="hex"></div>
<div class="hex"></div>
<div class="hex"></div>
<div class="hex"></div>
<div class="hex"></div&.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0