canvas实现三维立体文字漂浮云动画效果代码
代码语言：html
所属分类：动画
代码描述：canvas实现三维立体文字漂浮云动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
@charset "utf-8";
body {
overflow: hidden;
height: 100vh;
perspective: 80em;
background: #000;
font: 900 1.25em/ 2 vt323, monospace;
}
div {
transform-style: preserve-3d;
}
div, :after {
position: absolute;
}
.a3d {
top: 50%;
left: 50%;
}
.rot, .key {
animation: rotY 0s linear infinite;
}
.rot:nth-child(1) {
margin-top: 29vh;
}
.rot:nth-child(1), .rot:nth-child(1) .key {
animation-duration: 12s;
animation-delay: -4.08s;
}
.rot:nth-child(1) .key {
margin-left: 12vw;
}
.rot:nth-child(2) {
margin-top: 4vh;
}
.rot:nth-child(2), .rot:nth-child(2) .key {
animation-duration: 12s;
animation-delay: -7.56s;
}
.rot:nth-child(2) .key {
margin-left: 33vw;
}
.rot:nth-child(3) {
margin-top: -3vh;
}
.rot:nth-child(3), .rot:nth-child(3) .key {
animation-duration: 10s;
animation-delay: -7.5s;
}
.rot:nth-child(3) .key {
margin-left: 6vw;
}
.rot:nth-child(4) {
margin-top: -27vh;
}
.rot:nth-child(4), .rot:nth-child(4) .key {
animation-duration: 14s;
animation-delay: -1.96s;
}
.rot:nth-child(4) .key {
margin-left: 17vw;
}
.rot:nth-child(5) {
margin-top: 3vh;
}
.rot:nth-child(5), .rot:nth-child(5) .key {
animation-duration: 8s;
animation-delay: -6.72s;
}
.rot:nth-child(5) .key {
margin-left: 15vw;
}
.rot:nth-child(6) {
margin-top: -8vh;
}
.rot:nth-child(6), .rot:nth-child(6) .key {
animation-duration: 17s;
animation-delay: -7.65s;
}
.rot:nth-child(6) .key {
margin-left: 18vw;
}
.rot:nth-child(7) {
margin-top: 4vh;
}
.rot:nth-child(7), .rot:nth-child(7) .key {
animation-duration: 14s;
animation-delay: -14s;
}
.rot:nth-child(7) .key {
margin-left: 34vw;
}
.rot:nth-child(8) {
margin-top: -29vh;
}
.rot:nth-child(8), .rot:nth-child(8) .key {
animation-duration: 16s;
animation-delay: -8.96s;
}
.rot:nth-child(8) .key {
margin-left: 11vw;
}
.rot:nth-child(9) {
margin-top: 31vh;
}
.rot:nth-child(9), .rot:nth-child(9) .key {
animation-duration: 11s;
animation-delay: -4.73s;
}
.rot:nth-child(9) .key {
margin-left: 11vw;
}
.rot:nth-child(10) {
margin-top: -16vh;
}
.rot:nth-child(10), .rot:nth-child(10) .key {
animation-duration: 18s;
animation-delay: -2.16s;
}
.rot:nth-child(10) .key {
margin-left: 13vw;
}
.rot:nth-child(11) {
margin-top: -25vh;
}
.rot:nth-child(11), .rot:nth-child(11) .key {
animation-duration: 10s;
animation-delay: -6.5s;
}
.rot:nth-child(11) .key {
margin-left: 32vw;
}
.rot:nth-child(12) {
margin-top: -19vh;
}
.rot:nth-child(12), .rot:nth-child(12) .key {
animation-duration: 12s;
animation-delay: -1.32s;
}
.rot:nth-child(12) .key {
margin-left: 22vw;
}
.rot:nth-child(13) {
margin-top: 7vh;
}
.rot:nth-child(13), .rot:nth-child(13) .key {
animation-duration: 12s;
animation-delay: -5.04s;
}
.rot:nth-child(13) .key {
margin-left: 15vw;
}
.rot:nth-child(14) {
margin-top: 1vh;
}
.rot:nth-child(14), .rot:nth-child(14) .key {
animation-duration: 15s;
animation-delay: -7.8s;
}
.rot:nth-child(14) .key {
margin-left: 27vw;
}
.rot:nth-child(15) {
margin-top: -5vh;
}
.rot:nth-child(15), .rot:nth-child(15) .key {
animation-duration: 18s;
animation-delay: -16.56s;
}
.rot:nth-child(15) .key {
margin-left: 16vw;
}
.rot:nth-child(16) {
margin-top: 2vh;
}
.rot:nth-child(16), .rot:nth-child(16) .key {
animation-duration: 19s;
animation-delay: -18.62s;
}
.rot:nth-child(16) .key {
margin-left: 6vw;
}
.rot:nth-child(17) {
margin-top: 22vh;
}
.rot:nth-child(17), .rot:nth-child(17) .key {
animation-duration: 16s;
animation-delay: -9.76s;
}
.rot:nth-child(17) .key {
margin-left: 18vw;
}
.rot:nth-child(18) {
margin-top: 28vh;
}
.rot:nth-child(18), .rot:nth-child(18) .key {
animation-duration: 14s;
animation-delay: -8.26s;
}
.rot:nth-child(18) .key {
margin-left: 23vw;
}
.rot:nth-child(19) {
margin-top: 10vh;
}
.rot:nth-child(19), .rot:nth-child(19) .key {
animation-duration: 16s;
animation-delay: -3.2s;
}
.rot:nth-child(19) .key {
margin-left: 15vw;
}
.rot:nth-child(20) {
margin-top: -24vh;
}
.rot:nth-child(20), .rot:nth-child(20) .key {
animation-duration: 16s;
animation-delay: -4.48s;
}
.rot:nth-child(20) .key {
margin-left: 16vw;
}
.rot:nth-child(21) {
margin-top: 0vh;
}
.rot:nth-child(21), .rot:nth-child(21) .key {
animation-duration: 11s;
animation-delay: -5.83s;
}
.rot:nth-child(21) .key {
margin-left: 14vw;
}
.rot:nth-child(22) {
margin-top: -2vh;
}
.rot:nth-child(22), .rot:nth-child(22) .key {
animation-duration: 16s;
animation-delay: -7.84s;
}
.rot:nth-child(22) .key {
margin-left: 28vw;
}
.rot:nth-child(23) {
margin-top: -8vh;
}
.rot:nth-child(23), .rot:nth-child(23) .key {
animation-duration: 19s;
animation-delay: -14.25s;
}
.rot:nth-child(23) .key {
margin-left: 11vw;
}
.rot:nth-child(24) {
margin-top: -31vh;
}
.rot:nth-child(24), .rot:nth-child(24) .key {
animation-duration: 16s;
animation-delay: -9.28s;
}
.rot:nth-child(24) .key {
margin-left: 15vw;
}
.rot:nth-child(25) {
margin-top: 4vh;
}
.rot:nth-child(25), .rot:nth-child(25) .key {
animation-duration: 8s;
animation-delay: -3.84s;
}
.rot:nth-child(25) .key {
margin-left: 6vw;
}
.rot:nth-child(26) {
margin-top: -11vh;
}
.rot:nth-child(26), .rot:nth-child(26) .key {
animation-duration: 12s;
animation-delay: -6.96s;
}
.rot:nth-child(26) .key {
margin-left: 6vw;
}
.rot:nth-child(27) {
margin-top: 10vh;
}
.rot:nth-child(27), .rot:nth-child(27) .key {
animation-duration: 14s;
animation-delay: -4.48s;
}
.rot:nth-child(27) .key {
margin-left: 32vw;
}
.rot:nth-child(28) {
margin-top: 5vh;
}
.rot:nth-child(28), .rot:nth-child(28) .key {
animation-duration: 18s;
animation-delay: -9.54s;
}
.rot:nth-child(28) .key {
margin-left: 30vw;
}
.rot:nth-child(29) {
margin-top: -34vh;
}
.rot:nth-child(29), .rot:nth-child(29) .key {
animation-duration: 20s;
animation-delay: -4.8s;
}
.rot:nth-child(29) .key {
margin-left: 35vw;
}
.rot:nth-child(30) {
margin-top: 29vh;
}
.rot:nth-child(30), .rot:nth-child(30) .key {
animation-duration: 10s;
animation-delay: -6.1s;
}
.rot:nth-child(30) .key {
margin-left: 23vw;
}
.rot:nth-child(31) {
margin-top: 18vh;
}
.rot:nth-child(31), .rot:nth-child(31) .key {
animation-duration: 14s;
animation-delay: -13.72s;
}
.rot:nth-child(31) .key {
margin-left: 32vw;
}
.rot:nth-child(32) {
margin-top: 3vh;
}
.rot:nth-child(32), .rot:nth-child(32) .key {
animation-duration: 12s;
animation-delay: -1.8s;
}
.rot:nth-child(32) .key {
margin-left: 24vw;
}
.rot:nth-child(33) {
margin-top: -25vh;
}
.rot:nth-child(33), .rot:nth-child(33) .key {
animation-duration: 18s;
animation-delay: -3.96s;
}
.rot:nth-child(33) .key {
margin-left: 31vw;
}
.rot:nth-child(34) {
margin-top: 26vh;
}
.rot:nth-child(34), .rot:nth-child(34) .key {
animation-duration: 18s;
animation-delay: -9.36s;
}
.rot:nth-child(34) .key {
margin-left: 32vw;
}
.rot:nth-child(35) {
margin-top: 28vh;
}
.rot:nth-child(35), .rot:nth-child(35) .key {
animation-duration: 16s;
animation-delay: -7.68s;
}
.rot:nth-child(35) .key {
margin-left: 32vw;
}
.rot:nth-child(36) {
margin-top: -22vh;
}
.rot:nth-child(36), .rot:nth-child(36) .key {
animation-duration: 8s;
animation-delay: -7.28s;
}
.rot:nth-child(36) .key {
margin-left: 6vw;
}
.rot:nth-child(37) {
margin-top: -21vh;
}
.rot:nth-child(37), .rot:nth-child(37) .key {
animation-duration: 14s;
animation-delay: -10.08s;
}
.rot:nth-child(37) .key {
margin-left: 15vw;
}
.rot:nth-child(38) {
margin-top: 34vh;
}
.rot:nth-child(38), .rot:nth-child(38) .key {
animation-duration: 19s;
animation-delay: -16.72s;
}
.rot:nth-child(38) .key {
margin-left: 22vw;
}
.rot:nth-child(39) {
margin-top: 19vh;
}
.rot:nth-child(39), .rot:nth-child(39) .key {
animation-duration: 20s;
animation-delay: -9.6s;
}
.rot:nth-child(39) .key {
margin-left: 23vw;
}
.rot:nth-child(40) {
margin-top: -16vh;
}
.rot:nth-child(40), .rot:nth-child(40) .key {
animation-duration: 17s;
animation-delay: -1.19s;
}
.rot:nth-child(40) .key {
margin-left: 22vw;
}
.rot:nth-child(41) {
margin-top: 15vh;
}
.rot:nth-child(41), .rot:nth-child(41) .key {
animation-duration: 18s;
animation-delay: -1.26s;
}
.rot:nth-child(41) .key {
margin-left: 14vw;
}
.rot:nth-child(42) {
margin-top: 7vh;
}
.rot:nth-child(42), .rot:nth-child(42) .key {
animation-duration: 10s;
animation-delay: -5.9s;
}
.rot:nth-child(42) .key {
margin-left: 8vw;
}
.rot:nth-child(43) {
margin-top: -23vh;
}
.rot:nth-child(43), .rot:nth-child(43) .key {
animation-duration: 10s;
animation-delay: -4.8s;
}
.rot:nth-child(43) .key {
margin-left: 34vw;
}
.rot:nth-child(44) {
margin-top: -18vh;
}
.rot:nth-child(44), .rot:nth-child(44) .key {
animation-duration: 8s;
animation-delay: -5.12s;
}
.rot:nth-child(44) .key {
margin-left: 33vw;
}
.rot:nth-child(45) {
margin-top: -23vh;
}
.rot:nth-child(45), .rot:nth-child(45) .key {
animation-duration: 8s;
animation-delay: -7.6s;
}
.rot:nth-child(45) .key {
margin-left: 29vw;
}
.rot:nth-child(46) {
margin-top: -27vh;
}
.rot:nth-child(46), .rot:nth-child(46) .key {
animation-duration: 13s;
animation-delay: -13s;
}
.rot:nth-child(46) .key {
margin-left: 21vw;
}
.rot:nth-child(47) {
margin-top: -29vh;
}
.rot:nth-child(47), .rot:nth-child(47) .key {
animation-duration: 17s;
animation-delay: -1.19s;
}
.rot:nth-child(47) .key {
margin-left: 25vw;
}
.rot:nth-child(48) {
margin-top: 27vh;
}
.rot:nth-child(48), .rot:nth-child(48) .key {
animation-duration: 14s;
animation-delay: -5.04s;
}
.rot:nth-child(48) .key {
margin-left: 18vw;
}
.rot:nth-child(49) {
margin-top: -13vh;
}
.rot:nth-child(49), .rot:nth-child(49) .key {
animation-duration: 18s;
animation-delay: -12.42s;
}
.rot:nth-child(49) .key {
margin-left: 27vw;
}
.rot:nth-child(50) {
margin-top: -6vh;
}
.rot:nth-child(50), .rot:nth-child(50) .key {
animation-duration: 17s;
animation-delay: -4.93s;
}
.rot:nth-child(50) .key {
margin-left: 24vw;
}
.rot:nth-child(51) {
margin-top: 24vh;
}
.rot:nth-child(51), .rot:nth-child(51) .key {
animation-duration: 8s;
animation-delay: -7.52s;
}
.rot:nth-child(51) .key {
margin-left: 34vw;
}
.rot:nth-child(52) {
margin-top: 13vh;
}
.rot:nth-child(52), .rot:nth-child(52) .key {
animation-duration: 8s;
animation-delay: -1.36s;
}
.rot:nth-child(52) .key {
margin-left: 20vw;
}
.rot:nth-child(53) {
margin-top: 19vh;
}
.rot:nth-child(53), .rot:nth-child(53) .key {
animation-duration: 18s;
animation-delay: -14.76s;
}
.rot:nth-child(53) .key {
margin-left: 16vw;
}
.rot:nth-child(54) {
margin-top: 19vh;
}
.rot:nth-child(54), .rot:nth-child(54) .key {
animation-duration: 15s;
animation-delay: -0.3s;
}
.rot:nth-child(54) .key {
margin-left: 26vw;
}
.rot:nth-child(55) {
margin-top: -22vh;
}
.rot:nth-child(55), .rot:nth-child(55) .key {
animation-duration: 20s;
animation-delay: -3.6s;
}
.rot:nth-child(55) .key {
margin-left: 27vw;
}
.rot:nth-child(56) {
margin-top: -15vh;
}
.rot:nth-child(56), .rot:nth-child(56) .key {
animation-duration: 9s;
animation-delay: -6.21s;
}
.rot:nth-child(56) .key {
margin-left: 11vw;
}
.rot:nth-child(57) {
margin-top: 21vh;
}
.rot:nth-child(57), .rot:nth-child(57) .key {
animation-duration: 17s;
animation-delay: -13.6s;
}
.rot:nth-child(57) .key {
margin-left: 9vw;
}
.rot:nth-child(58) {
margin-top: -12vh;
}
.rot:nth-child(58), .rot:nth-child(58) .key {
animation-duration: 19s;
animation-delay: -16.91s;
}
.rot:nth-child(58) .key {
margin-left: 17vw;
}
.rot:nth-child(59) {
margin-top: -32vh;
}
.rot:nth-child(59), .rot:nth-child(59) .key {
animation-duration: 12s;
animation-delay: -4.8s;
}
.rot:nth-child(59) .key {
margin-left: 14vw;
}
.rot:nth-child(60) {
margin-top: 13vh;
}
.rot:nth-child(60), .rot:nth-child(60) .key {
animation-duration: 18s;
animation-delay: -9.36s;
}
.rot:nth-child(60) .key {
margin-left: 20vw;
}
.rot:nth-child(61) {
margin-top: -29vh;
}
.rot:nth-child(61), .rot:nth-child(61) .key {
animation-duration: 10s;
animation-delay: -4.7s;
}
.rot:nth-child(61) .key {
margin-left: 16vw;
}
.rot:nth-child(62) {
margin-top: -29vh;
}
.rot:nth-child(62), .rot:nth-child(62) .key {
animation-duration: 15s;
animation-delay: -5.25s;
}
.rot:nth-child(62) .key {
margin-left: 18vw;
}
.rot:nth-child(63) {
margin-top: 26vh;
}
.rot:nth-child(63), .rot:nth-child(63) .key {
animation-duration: 13s;
animation-delay: -9.88s;
}
.rot:nth-child(63) .key {
margin-left: 15vw;
}
.rot:nth-child(64) {
margin-top: -11vh;
}
.rot:nth-child(64), .rot:nth-child(64) .key {
animation-duration: 14s;
animation-delay: -7.98s;
}
.rot:nth-child(64) .key {
margin-left: 14vw;
}
.rot:nth-child(65) {
margin-top: -34vh;
}
.rot:nth-child(65), .rot:nth-child(65) .key {
animation-duration: 17s;
animation-delay: -6.63s;
}
.rot:nth-child(65) .key {
margin-left: 13vw;
}
.rot:nth-child(66) {
margin-top: 1vh;
}
.rot:nth-child(66), .rot:nth-child(66) .key {
animation-duration: 10s;
animation-delay: -9.6s;
}
.rot:nth-child(66) .key {
margin-left: 34vw;
}
.rot:nth-child(67) {
margin-top: -18vh;
}
.rot:nth-child(67), .rot:nth-child(67) .key {
animation-duration: 15s;
animation-delay: -9.45s;
}
.rot:nth-child(67) .key {
margin-left: 24vw;
}
.rot:nth-child(68) {
margin-top: 7vh;
}
.rot:nth-child(68), .rot:nth-child(68) .key {
animation-duration: 12s;
animation-delay: -11.64s;
}
.rot:nth-child(68) .key {
margin-left: 18vw;
}
.rot:nth-child(69) {
margin-top: 13vh;
}
.rot:nth-child(69), .rot:nth-child(69) .key {
animation-duration: 17s;
animation-delay: -7.82s;
}
.rot:nth-child(69) .key {
margin-left: 24vw;
}
.rot:nth-child(70) {
margin-top: -29vh;
}
.rot:nth-child(70), .rot:nth-child(70) .key {
animation-duration: 11s;
animation-delay: -9.35s;
}
.rot:nth-child(70) .key {
margin-left: 6vw;
}
.rot:nth-child(71) {
margin-top: 8vh;
}
.rot:nth-child(71), .rot:nth-child(71) .key {
animation-duration: 14s;
animation-delay: -6.58s;
}
.rot:nth-child(71) .key {
margin-left: 26vw;
}
.rot:nth-child(72) {
margin-top: 16vh;
}
.rot:nth-child(72), .rot:nth-child(72) .key {
animation-duration: 11s;
animation-delay: -3.08s;
}
.rot:nth-child(72) .key {
margin-left: 32vw;
}
.rot:nth-child(73) {
margin-top: -1v.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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