css通过sin与cos实现彩色粒子环绕动画效果代码
代码语言：html
所属分类：粒子
代码描述：css通过sin与cos实现彩色粒子环绕动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
/* Look, no Sass */
.particle {
/* Starting values */
--angle: (5 * var(--index));
--radius: 30;
--x: calc(sin(var(--angle)) * var(--radius) * 1vmin);
--y: calc(cos(var(--angle)) * var(--radius) * 1vmin);
/* Ending values */
/*
Had to move these outside the @keyframe and rename them
because Chrome was being weird
Bonusly, performance seems much better
*/
--angle2: calc(var(--index) * 1turn / var(--total));
--x2: calc(sin(var(--angle2)) * var(--radius) * 1vmin);
--y2: calc(cos(var(--angle2)) * var(--radius) * 1vmin);
--size: 5;
--speed: 3s;
--delay: calc(var(--index) * var(--speed) / var(--total) * 4);
--hue-angle: 10;
--hue-range: 60;
--hue-start: 20;
/* Animation */
-webkit-animation: animation var(--speed) ease-out infinite alternate var(--delay);
animation: animation var(--speed) ease-out infinite alternate var(--delay);
transform: translate3d(var(--x), var(--y), 0);
opacity: 0;
/* Particle styling */
border-radius: 50%;
background: currentColor;
color: oklch(75% 0.3
calc(
sin(var(--hue-angle) * var(--index))
* var(--hue-range)
+ var(--hue-start)
)
);
position: absolute;
width: calc(var(--size) * 0.1vmin);
height: calc(var(--size) * 0.1vmin);
contain: strict; /* Does this help or is translate3d already doing it*/
}
@-webkit-keyframes animation {
100% {
transform: translate3d(var(--x2), var(--y2), 0);
opacity: 1;
}
}
@keyframes animation {
100% {
transform: translate3d(var(--x2), var(--y2), 0);
opacity: 1;
}
}
/* Pen styling, ignore */
body {
background: #000;
display: flex;
min-height: 100vh;
justify-content: center;
align-content: center;
align-items: center;
overflow: hidden;
}
</style>
</head>
<body translate="no">
<div class="center" style="--total: 1080">
<div class="particle" style="--index: 1"></div>
<div class="particle" style="--index: 2"></div>
<div class="particle" style="--index: 3"></div>
<div class="particle" style="--index: 4"></div>
<div class="particle" style="--index: 5"></div>
<div class="particle" style="--index: 6"></div>
<div class="particle" style="--index: 7"></div>
<div class="particle" style="--index: 8"></div>
<div class="particle" style="--index: 9"></div>
<div class="particle" style="--index: 10"></div>
<div class="particle" style="--index: 11"></div>
<div class="particle" style="--index: 12"></div>
<div class="particle" style="--index: 13"></div>
<div class="particle" style="--index: 14"></div>
<div class="particle" style="--index: 15"></div>
<div class="particle" style="--index: 16"></div>
<div class="particle" style="--index: 17"></div>
<div class="particle" style="--index: 18"></div>
<div class="particle" style="--index: 19"></div>
<div class="particle" style="--index: 20"></div>
<div class="particle" style="--index: 21"></div>
<div class="particle" style="--index: 22"></div>
<div class="particle" style="--index: 23"></div>
<div class="particle" style="--index: 24"></div>
<div class="particle" style="--index: 25"></div>
<div class="particle" style="--index: 26"></div>
<div class="particle" style="--index: 27"></div>
<div class="particle" style="--index: 28"></div>
<div class="particle" style="--index: 29"></div>
<div class="particle" style="--index: 30"></div>
<div class="particle" style="--index: 31"></div>
<div class="particle" style="--index: 32"></div>
<div class="particle" style="--index: 33"></div>
<div class="particle" style="--index: 34"></div>
<div class="particle" style="--index: 35"></div>
<div class="particle" style="--index: 36"></div>
<div class="particle" style="--index: 37"></div>
<div class="particle" style="--index: 38"></div>
<div class="particle" style="--index: 39"></div>
<div class="particle" style="--index: 40"></div>
<div class="particle" style="--index: 41"></div>
<div class="particle" style="--index: 42"></div>
<div class="particle" style="--index: 43"></div>
<div class="particle" style="--index: 44"></div>
<div class="particle" style="--index: 45"></div>
<div class="particle" style="--index: 46"></div>
<div class="particle" style="--index: 47"></div>
<div class="particle" style="--index: 48"></div>
<div class="particle" style="--index: 49"></div>
<div class="particle" style="--index: 50"></div>
<div class="particle" style="--index: 51"></div>
<div class="particle" style="--index: 52"></div>
<div class="particle" style="--index: 53"></div>
<div class="particle" style="--index: 54"></div>
<div class="particle" style="--index: 55"></div>
<div class="particle" style="--index: 56"></div>
<div class="particle" style="--index: 57"></div>
<div class="particle" style="--index: 58"></div>
<div class="particle" style="--index: 59"></div>
<div class="particle" style="--index: 60"></div>
<div class="particle" style="--index: 61"></div>
<div class="particle" style="--index: 62"></div>
<div class="particle" style="--index: 63"></div>
<div class="particle" style="--index: 64"></div>
<div class="particle" style="--index: 65"></div>
<div class="particle" style="--index: 66"></div>
<div class="particle" style="--index: 67"></div>
<div class="particle" style="--index: 68"></div>
<div class="particle" style="--index: 69"></div>
<div class="particle" style="--index: 70"></div>
<div class="particle" style="--index: 71"></div>
<div class="particle" style="--index: 72"></div>
<div class="particle" style="--index: 73"></div>
<div class="particle" style="--index: 74"></div>
<div class="particle" style="--index: 75"></div>
<div class="particle" style="--index: 76"></div>
<div class="particle" style="--index: 77"></div>
<div class="particle" style="--index: 78"></div>
<div class="particle" style="--index: 79"></div>
<div class="particle" style="--index: 80"></div>
<div class="particle" style="--index: 81"></div>
<div class="particle" style="--index: 82"></div>
<div class="particle" style="--index: 83"></div>
<div class="particle" style="--index: 84"></div>
<div class="particle" style="--index: 85"></div>
<div class="particle" style="--index: 86"></div>
<div class="particle" style="--index: 87"></div>
<div class="particle" style="--index: 88"></div>
<div class="particle" style="--index: 89"></div>
<div class="particle" style="--index: 90"></div>
<div class="particle" style="--index: 91"></div>
<div class="particle" style="--index: 92"></div>
<div class="particle" style="--index: 93"></div>
<div class="particle" style="--index: 94"></div>
<div class="particle" style="--index: 95"></div>
<div class="particle" style="--index: 96"></div>
<div class="particle" style="--index: 97"></div>
<div class="particle" style="--index: 98"></div>
<div class="particle" style="--index: 99"></div>
<div class="particle" style="--index: 100"></div>
<div class="particle" style="--index: 101"></div>
<div class="particle" style="--index: 102"></div>
<div class="particle" style="--index: 103"></div>
<div class="particle" style="--index: 104"></div>
<div class="particle" style="--index: 105"></div>
<div class="particle" style="--index: 106"></div>
<div class="particle" style="--index: 107"></div>
<div class="particle" style="--index: 108"></div>
<div class="particle" style="--index: 109"></div>
<div class="particle" style="--index: 110"></div>
<div class="particle" style="--index: 111"></div>
<div class="particle" style="--index: 112"></div>
<div class="particle" style="--index: 113"></div>
<div class="particle" style="--index: 114"></div>
<div class="particle" style="--index: 115"></div>
<div class="particle" style="--index: 116"></div>
<div class="particle" style="--index: 117"></div>
<div class="particle" style="--index: 118"></div>
<div class="particle" style="--index: 119"></div>
<div class="particle" style="--index: 120"></div>
<div class="particle" style="--index: 121"></div>
<div class="particle" style="--index: 122"></div>
<div class="particle" style="--index: 123"></div>
<div class="particle" style="--index: 124"></div>
<div class="particle" style="--index: 125"></div>
<div class="particle" style="--index: 126"></div>
<div class="particle" style="--index: 127"></div>
<div class="particle" style="--index: 128"></div>
<div class="particle" style="--index: 129"></div>
<div class="particle" style="--index: 130"></div>
<div class="particle" style="--index: 131"></div>
<div class="particle" style="--index: 132"></div>
<div class="particle" style="--index: 133"></div>
<div class="particle" style="--index: 134"></div>
<div class="particle" style="--index: 135"></div>
<div class="particle" style="--index: 136"></div>
<div class="particle" style="--index: 137"></div>
<div class="particle" style="--index: 138"></div>
<div class="particle" style="--index: 139"></div>
<div class="particle" style="--index: 140"></div>
<div class="particle" style="--index: 141"></div>
<div class="particle" style="--index: 142"></div>
<div class="particle" style="--index: 143"></div>
<div class="particle" style="--index: 144"></div>
<div class="particle" style="--index: 145"></div>
<div class="particle" style="--index: 146"></div>
<div class="particle" style="--index: 147"></div>
<div class="particle" style="--index: 148"></div>
<div class="particle" style="--index: 149"></div>
<div class="particle" style="--index: 150"></div>
<div class="particle" style="--index: 151"></div>
<div class="particle" style="--index: 152"></div>
<div class="particle" style="--index: 153"></div>
<div class="particle" style="--index: 154"></div>
<div class="particle" style="--index: 155"></div>
<div class="particle" style="--index: 156"></div>
<div class="particle" style="--index: 157"></div>
<div class="particle" style="--index: 158"></div>
<div class="particle" style="--index: 159"></div>
<div class="particle" style="--index: 160"></div>
<div class=&quo.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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