css实现三维文字旋涡旋转动画效果代码
代码语言：html
所属分类：动画
代码描述：css实现三维文字旋涡旋转动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
*,*::before,*::after{padding:0;margin:0 auto;box-sizing:border-box}body{background-color:#111;color:#fff;min-height:100vh;display:grid;place-items:center}
@import url("https://fonts.googleapis.com/css2?family=Major+Mono+Display&display=swap");
body {
font-family: "Major Mono Display", monospace;
background-image: radial-gradient(circle, #000 50px, #222 1500px);
perspective: 500px;
overflow: hidden;
}
*:not(:empty) {
transform-style: preserve-3d;
}
.letters {
position: relative;
transform: rotateX(90deg);
width: 1px;
height: 1px;
background-color: lime;
}
.ring {
position: relative;
-webkit-animation: ringRotate 16s var(--delay, 0s) infinite alternate ease-in-out;
animation: ringRotate 16s var(--delay, 0s) infinite alternate ease-in-out;
transform: translateY(var(--depth, 0px)) rotateY(0deg);
color: hsl(240, 15%, var(--light, 100%));
}
@-webkit-keyframes ringRotate {
from {
transform: translateY(var(--depth, 0px)) rotateY(0deg);
}
to {
transform: translateY(var(--depth, 0px)) rotateY(540deg);
}
}
@keyframes ringRotate {
from {
transform: translateY(var(--depth, 0px)) rotateY(0deg);
}
to {
transform: translateY(var(--depth, 0px)) rotateY(540deg);
}
}
.ring:nth-child(1) {
--depth: 350px;
--light: 40%;
--delay: 0s;
}
.ring:nth-child(1) > .letter:nth-child(1) {
--letter: "T";
}
.ring:nth-child(1) > .letter:nth-child(2) {
--letter: "C";
}
.ring:nth-child(1) > .letter:nth-child(3) {
--letter: "L";
}
.ring:nth-child(1) > .letter:nth-child(4) {
--letter: "K";
}
.ring:nth-child(1) > .letter:nth-child(5) {
--letter: "T";
}
.ring:nth-child(1) > .letter:nth-child(6) {
--letter: "L";
}
.ring:nth-child(1) > .letter:nth-child(7) {
--letter: "Y";
}
.ring:nth-child(1) > .letter:nth-child(8) {
--letter: "A";
}
.ring:nth-child(1) > .letter:nth-child(9) {
--letter: "J";
}
.ring:nth-child(1) > .letter:nth-child(10) {
--letter: "N";
}
.ring:nth-child(1) > .letter:nth-child(11) {
--letter: "R";
}
.ring:nth-child(1) > .letter:nth-child(12) {
--letter: "X";
}
.ring:nth-child(1) > .letter:nth-child(13) {
--letter: "V";
}
.ring:nth-child(1) > .letter:nth-child(14) {
--letter: "O";
}
.ring:nth-child(1) > .letter:nth-child(15) {
--letter: "E";
}
.ring:nth-child(1) > .letter:nth-child(16) {
--letter: "T";
}
.ring:nth-child(2) {
--depth: 250px;
--light: 38.125%;
--delay: -0.15s;
}
.ring:nth-child(2) > .letter:nth-child(1) {
--letter: "H";
}
.ring:nth-child(2) > .letter:nth-child(2) {
--letter: "Q";
}
.ring:nth-child(2) > .letter:nth-child(3) {
--letter: "E";
}
.ring:nth-child(2) > .letter:nth-child(4) {
--letter: "T";
}
.ring:nth-child(2) > .letter:nth-child(5) {
--letter: "E";
}
.ring:nth-child(2) > .letter:nth-child(6) {
--letter: "P";
}
.ring:nth-child(2) > .letter:nth-child(7) {
--letter: "Z";
}
.ring:nth-child(2) > .letter:nth-child(8) {
--letter: "L";
}
.ring:nth-child(2) > .letter:nth-child(9) {
--letter: "L";
}
.ring:nth-child(2) > .letter:nth-child(10) {
--letter: "H";
}
.ring:nth-child(2) > .letter:nth-child(11) {
--letter: "M";
}
.ring:nth-child(2) > .letter:nth-child(12) {
--letter: "A";
}
.ring:nth-child(2) > .letter:nth-child(13) {
--letter: "Q";
}
.ring:nth-child(2) > .letter:nth-child(14) {
--letter: "M";
}
.ring:nth-child(2) > .letter:nth-child(15) {
--letter: "N";
}
.ring:nth-child(2) > .letter:nth-child(16) {
--letter: "T";
}
.ring:nth-child(3) {
--depth: 150px;
--light: 36.25%;
--delay: -0.3s;
}
.ring:nth-child(3) > .letter:nth-child(1) {
--letter: "X";
}
.ring:nth-child(3) > .letter:nth-child(2) {
--letter: "F";
}
.ring:nth-child(3) > .letter:nth-child(3) {
--letter: "O";
}
.ring:nth-child(3) > .letter:nth-child(4) {
--letter: "N";
}
.ring:nth-child(3) > .letter:nth-child(5) {
--letter: "K";
}
.ring:nth-child(3) > .letter:nth-child(6) {
--letter: "Z";
}
.ring:nth-child(3) > .letter:nth-child(7) {
--letter: "W";
}
.ring:nth-child(3) > .letter:nth-child(8) {
--letter: "F";
}
.ring:nth-child(3) > .letter:nth-child(9) {
--letter: "N";
}
.ring:nth-child(3) > .letter:nth-child(10) {
--letter: "Z";
}
.ring:nth-child(3) > .letter:nth-child(11) {
--letter: "P";
}
.ring:nth-child(3) > .letter:nth-child(12) {
--letter: "J";
}
.ring:nth-child(3) > .letter:nth-child(13) {
--letter: "G";
}
.ring:nth-child(3) > .letter:nth-child(14) {
--letter: "A";
}
.ring:nth-child(3) > .letter:nth-child(15) {
--letter: "C";
}
.ring:nth-child(3) > .letter:nth-child(16) {
--letter: "T";
}
.ring:nth-child(4) {
--depth: 50px;
--light: 34.375%;
--delay: -0.45s;
}
.ring:nth-child(4) > .letter:nth-child(1) {
--letter: "J";
}
.ring:nth-child(4) > .letter:nth-child(2) {
--letter: "S";
}
.ring:nth-child(4) > .letter:nth-child(3) {
--letter: "S";
}
.ring:nth-child(4) > .letter:nth-child(4) {
--letter: "H";
}
.ring:nth-child(4) > .letter:nth-child(5) {
--letter: "E";
}
.ring:nth-child(4) > .letter:nth-child(6) {
--letter: "D";
}
.ring:nth-child(4) > .letter:nth-child(7) {
--letter: "C";
}
.ring:nth-child(4) > .letter:nth-child(8) {
--letter: "X";
}
.ring:nth-child(4) > .letter:nth-child(9) {
--letter: "S";
}
.ring:nth-child(4) > .letter:nth-child(10) {
--letter: "C";
}
.ring:nth-child(4) > .letter:nth-child(11) {
--letter: "N";
}
.ring:nth-child(4) > .letter:nth-child(12) {
--letter: "L";
}
.ring:nth-child(4) > .letter:nth-child(13) {
--letter: "G";
}
.ring:nth-child(4) > .letter:nth-child(14) {
--letter: "Y";
}
.ring:nth-child(4) > .letter:nth-child(15) {
--letter: "N";
}
.ring:nth-child(4) > .letter:nth-child(16) {
--letter: "F";
}
.ring:nth-child(5) {
--depth: -50px;
--light: 32.5%;
--delay: -0.6s;
}
.ring:nth-child(5) > .letter:nth-child(1) {
--letter: "K";
}
.ring:nth-child(5) > .letter:nth-child(2) {
--letter: "K";
}
.ring:nth-child(5) > .letter:nth-child(3) {
--letter: "F";
}
.ring:nth-child(5) > .letter:nth-child(4) {
--letter: "E";
}
.ring:nth-child(5) > .letter:nth-child(5) {
--letter: "A";
}
.ring:nth-child(5) > .letter:nth-child(6) {
--letter: "G";
}
.ring:nth-child(5) > .letter:nth-child(7) {
--letter: "L";
}
.ring:nth-child(5) > .letter:nth-child(8) {
--letter: "D";
}
.ring:nth-child(5) > .letter:nth-child(9) {
--letter: "D";
}
.ring:nth-child(5) > .letter:nth-child(10) {
--letter: "X";
}
.ring:nth-child(5) > .letter:nth-child(11) {
--letter: "X";
}
.ring:nth-child(5) > .letter:nth-child(12) {
--letter: "W";
}
.ring:nth-child(5) > .letter:nth-child(13) {
--letter: "J";
}
.ring:nth-child(5) > .letter:nth-child(14) {
--letter: "H";
}
.ring:nth-child(5) > .letter:nth-child(15) {
--letter: "U";
}
.ring:nth-child(5) > .letter:nth-child(16) {
--letter: "X";
}
.ring:nth-child(6) {
--depth: -150px;
--light: 30.625%;
--delay: -0.75s;
}
.ring:nth-child(6) > .letter:nth-child(1) {
--letter: "Q";
}
.ring:nth-child(6) > .letter:nth-child(2) {
--letter: "T";
}
.ring:nth-child(6) > .letter:nth-child(3) {
--letter: "K";
}
.ring:nth-child(6) > .letter:nth-child(4) {
--letter: "U";
}
.ring:nth-child(6) > .letter:nth-child(5) {
--letter: "J";
}
.ring:nth-child(6) > .letter:nth-child(6) {
--letter: "I";
}
.ring:nth-child(6) > .letter:nth-child(7) {
--letter: "S";
}
.ring:nth-child(6) > .letter:nth-child(8) {
--letter: "N";
}
.ring:nth-child(6) > .letter:nth-child(9) {
--letter: "L";
}
.ring:nth-child(6) > .letter:nth-child(10) {
--letter: "F";
}
.ring:nth-child(6) > .letter:nth-child(11) {
--letter: "U";
}
.ring:nth-child(6) > .letter:nth-child(12) {
--letter: "O";
}
.ring:nth-child(6) > .letter:nth-child(13) {
--letter: "O";
}
.ring:nth-child(6) > .letter:nth-child(14) {
--letter: "Z";
}
.ring:nth-child(6) > .letter:nth-child(15) {
--letter: "I";
}
.ring:nth-child(6) > .letter:nth-child(16) {
--letter: "W";
}
.ring:nth-child(7) {
--depth: -250px;
--light: 28.75%;
--delay: -0.9s;
}
.ring:nth-child(7) > .letter:nth-child(1) {
--letter: "G";
}
.ring:nth-child(7) > .letter:nth-child(2) {
--letter: "L";
}
.ring:nth-child(7) > .letter:nth-child(3) {
--letter: "O";
}
.ring:nth-child(7) > .letter:nth-child(4) {
--letter: "P";
}
.ring:nth-child(7) > .letter:nth-child(5) {
--letter: "K";
}
.ring:nth-child(7) > .letter:nth-child(6) {
--letter: "Y";
}
.ring:nth-child(7) > .letter:nth-child(7) {
--letter: "X";
}
.ring:nth-child(7) > .letter:nth-child(8) {
--letter: "P";
}
.ring:nth-child(7) > .letter:nth-child(9) {
--letter: "R";
}
.ring:nth-child(7) > .letter:nth-child(10) {
--letter: "R";
}
.ring:nth-child(7) > .letter:nth-child(11) {
--letter: "V";
}
.ring:nth-child(7) > .letter:nth-child(12) {
--letter: "G";
}
.ring:nth-child(7) > .letter:nth-child(13) {
--letter: "W";
}
.ring:nth-child(7) > .letter:nth-child(14) {
--letter: "Z";
}
.ring:nth-child(7) > .letter:nth-child(15) {
--letter: "I";
}
.ring:nth-child(7) > .letter:nth-child(16) {
--letter: "F";
}
.ring:nth-child(8) {
--depth: -350px;
--light: 26.875%;
--delay: -1.05s;
}
.ring:nth-child(8) > .letter:nth-child(1) {
--letter: "Z";
}
.ring:nth-child(8) > .letter:nth-child(2) {
--letter: "O";
}
.ring:nth-child(8) > .letter:nth-child(3) {
--letter: "G";
}
.ring:nth-child(8) > .letter:nth-child(4) {
--letter: "O";
}
.ring:nth-child(8) > .letter:nth-child(5) {
--letter: "Z";
}
.ring:nth-child(8) > .letter:nth-child(6) {
--letter: "C";
}
.ring:nth-child(8) > .letter:nth-child(7) {
--letter: "N";
}
.ring:nth-child(8) > .letter:nth-child(8) {
--letter: "Y";
}
.ring:nth-child(8) > .letter:nth-child(9) {
--letter: "N";
}
.ring:nth-child(8) > .letter:nth-child(10) {
--letter: "C";
}
.ring:nth-child(8) > .letter:nth-child(11) {
--letter: "F";
}
.ring:nth-child(8) > .letter:nth-child(12) {
--letter: "H";
}
.ring:nth-child(8) > .letter:nth-child(13) {
--letter: "O";
}
.ring:nth-child(8) > .letter:nth-child(14) {
--letter: "W";
}
.ring:nth-child(8) > .letter:nth-child(15) {
--letter: "B";
}
.ring:nth-child(8) > .letter:nth-child(16) {
--letter: "F";
}
.ring:nth-child(9) {
--depth: -450px;
--light: 25%;
--delay: -1.2s;
}
.ring:nth-child(9) > .letter:nth-child(1) {
--letter: "W";
}
.ring:nth-child(9) > .letter:nth-child(2) {
--letter: "W";
}
.ring:nth-child(9) > .letter:nth-child(3) {
--letter: "X";
}
.ring:nth-child(9) > .letter:nth-child(4) {
--letter: "N";
}
.ring:nth-child(9) > .letter:nth-child(5) {
--letter: "K";
}
.ring:nth-child(9) > .letter:nth-child(6) {
--letter: "F";
}
.ring:nth-child(9) > .letter:nth-child(7) {
--letter: "Z";
}
.ring:nth-child(9) > .letter:nth-child(8) {
--letter: "U";
}
.ring:nth-child(9) > .letter:nth-child(9) {
--letter: "C";
}
.ring:nth-child(9) > .letter:nth-child(10) {
--letter: "L";
}
.ring:nth-child(9) > .letter:nth-child(11) {
--letter: "A";
}
.ring:nth-child(9) > .letter:nth-child(12) {
--letter: "C";
}
.ring:nth-child(9) > .letter:nth-child(13) {
--letter: "L";
}
.ring:nth-child(9) > .letter:nth-child(14) {
--letter: "O";
}
.ring:nth-child(9) > .letter:nth-child(15) {
--letter: "H";
}
.ring:nth-child(9) > .letter:nth-child(16) {
--letter: "S";
}
.ring:nth-child(10) {
--depth: -550px;
--light: 23.125%;
--delay: -1.35s;
}
.ring:nth-child(10) > .letter:nth-child(1) {
--letter: "U";
}
.ring:nth-child(10) > .letter:nth-child(2) {
--letter: "D";
}
.ring:nth-child(10) > .letter:nth-child(3) {
--letter: "W";
}
.ring:nth-child(10) > .letter:nth-child(4) {
--letter: "W";
}
.ring:nth-child(10) > .letter:nth-child(5) {
--letter: "M";
}
.ring:nth-child(10) > .letter:nth-child(6) {
--letter: "R";
}
.ring:nth-child(10) > .letter:nth-child(7) {
--letter: "N";
}
.ring:nth-child(10) > .letter:nth-child(8) {
--letter: "K";
}
.ring:nth-child(10) > .letter:nth-child(9) {
--letter: "U";
}
.ring:nth-child(10) > .letter:nth-child(10) {
--letter: "S";
}
.ring:nth-child(10) > .letter:nth-child(11) {
--letter: "B";
}
.ring:nth-child(10) > .letter:nth-child(12) {
--letter: "R";
}
.ring:nth-child(10) > .letter:nth-child(13) {
--letter: "N";
}
.ring:nth-child(10) > .letter:nth-child(14) {
--letter: "K";
}
.ring:nth-child(10) > .letter:nth-child(15) {
--letter: "E";
}
.ring:nth-child(10) > .letter:nth-child(16) {
--letter: "V";
}
.ring:nth-child(11) {
--depth: -650px;
--light: 21.25%;
--delay: -1.5s;
}
.ring:nth-child(11) > .letter:nth-child(1) {
--letter: "L";
}
.ring:nth-child(11) > .letter:nth-child(2) {
--letter: "W";
}
.ring:nth-child(11) > .letter:nth-child(3) {
--letter: "J";
}
.ring:nth-child(11) > .letter:nth-child(4) {
--letter: "T";
}
.ring:nth-child(11) > .letter:nth-child(5) {
--letter: "K";
}
.ring:nth-child(11) > .letter:nth-child(6) {
--letter: "H";
}
.ring:nth-child(11) > .letter:nth-child(7) {
--letter: "V";
}
.ring:nth-child(11) > .letter:nth-child(8) {
--letter: "S";
}
.ring:nth-child(11) > .letter:nth-child(9) {
--letter: "W";
}
.ring:nth-child(11) > .letter:nth-child(10) {
--letter: "T";
}
.ring:nth-child(11) > .letter:nth-child(11) {
--letter: "J";
}
.ring:nth-child(11) > .letter:nth-child(12) {
--letter: "X";
}
.ring:nth-child(11) > .letter:nth-child(13) {
--letter: "O";
}
.ring:nth-child(11) > .letter:nth-child(14) {
--letter: "G";
}
.ring:nth-child(11) > .letter:nth-child(15) {
--letter: "K";
}
.ring:nth-child(11) > .letter:nth-child(16) {
--letter: "K";
}
.ring:nth-child(12) {
--depth: -750px;
--light: 19.375%;
--delay: -1.65s;
}
.ring:nth-child(12) > .letter:nth-child(1) {
--letter: "O";
}
.ring:nth-child(12) > .letter:nth-child(2) {
--letter: "V";
}
.ring:nth-child(12) > .letter:nth-child(3) {
--letter: "X";
}
.ring:nth-child(12) > .letter:nth-child(4) {
--letter: "Z";
}
.ring:nth-child(12) > .letter:nth-child(5) {
--letter: "A";
}
.ring:nth-child(12) > .letter:nth-child(6) {
--letter: "Y";
}
.ring:nth-child(12) > .letter:nth-child(7) {
--letter: "E";
}
.ring:nth-child(12) > .letter:nth-child(8) {
--letter: "K";
}
.ring:nth-child(12) > .letter:nth-child(9) {
--letter: "J";
}
.ring:nth-child(12) > .letter:nth-child(10) {
--letter: "N";
}
.ring:nth-child(12) > .letter:nth-child(11) {
--letter: "M";
}
.ring:nth-child(12) > .letter:nth-child(12) {
--letter: "U";
}
.ring:nth-child(12) > .letter:nth-child(13) {
--letter: "T";
}
.ring:nth-child(12) > .letter:nth-child(14) {
--letter: "C";
}
.ring:nth-child(12) > .letter:nth-child(15) {
--letter: "S";
}
.ring:nth-child(12) > .letter:nth-child(16) {
--letter: "X";
}
.ring:nth-child(13) {
--depth: -850px;
--light: 17.5%;
--delay: -1.8s;
}
.ring:nth-child(13) > .letter:nth-child(1) {
--letter: "D";
}
.ring:nth-child(13) > .letter:nth-child(2) {
--letter: "L";
}
.ring:nth-child(13) > .letter:nth-child(3) {
--letter: "L";
}
.ring:nth-child(13) > .letter:nth-child(4) {
--letter: "A";
}
.ring:nth-child(13) > .letter:nth-child(5) {
--letter: "Z";
}
.ring:nth-child(13) > .letter:nth-child(6) {
--letter: "V";
}
.ring:nth-child(13) > .letter:nth-child(7) {
--letter: "R";
}
.ring:nth-child(13) > .letter:nth-child(8) {
--letter: "W";
}
.ring:nth-child(13) > .letter:nth-child(9) {
--letter: "P";
}
.ring:nth-child(13) > .letter:nth-child(10) {
--letter: "T";
}
.ring:nth-child(13) > .letter:nth-child(11) {
--letter: "I";
}
.ring:nth-child(13) > .letter:nth-child(12) {
--letter: "L";
}
.ring:nth-child(13) > .letter:nth-child(13) {
--letter: "F";
}
.ring:nth-child(13) > .letter:nth-child(14) {
--letter: "W";
}
.ring:nth-c.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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