canvas实现三维立体文字漂浮云动画效果代码-html代码-BFW代码库

代码语言：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:.........完整代码请登录后点击上方下载按钮下载查看