1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 *{ 8 margin:0; 9 padding:0; 10 } 11 body { 12 13 overflow: hidden; 14 width: 500px; 15 height: 500px; 16 background: #222; 17 } 18 19 .world { 20 margin-left: 300px; 21 margin-top: 200px; 22 perspective: 800px; 23 width: 500px; 24 height: 500px; 25 margin-top: 400px; 26 } 27 28 .cube { 29 transform-style: preserve-3d; 30 backface-visibility: hidden; 31 position: relative; 32 animation: rotator 4.5s linear infinite; 33 outline: 0; 34 } 35 .cube div{ 36 width:200px; 37 height: 200px; 38 } 39 .cube * { 40 background: #000; 41 box-shadow: 0 0 3vh currentColor; 42 transition: background 0.4s ease-in-out, box-shadow 0.4s ease-in-out; 43 } 44 .cube:hover *{ 45 background: currentColor; 46 box-shadow: 0 0 20vh currentColor; 47 } 48 .cube .cube__front { 49 color: deeppink; 50 transform: translateZ(25vh); 51 position: absolute; 52 top: 0; 53 left: 0; 54 } 55 .cube .cube__right { 56 color: lightcoral; 57 transform: rotateY(90deg) translateZ(25vh); 58 position: absolute; 59 top: 0; 60 left: 0; 61 } 62 .cube .cube__left { 63 color: skyblue; 64 transform: rotateY(270deg) translateZ(25vh); 65 position: absolute; 66 top: 0; 67 left: 0; 68 } 69 .cube .cube__back { 70 color: seagreen; 71 position: absolute; 72 top: 0; 73 left: 0; 74 transform: rotateY(180deg) translateZ(25vh); 75 } 76 .cube .cube__top { 77 color: mediumseagreen; 78 transform: rotateX(90deg) translateZ(25vh); 79 position: absolute; 80 top: 0; 81 left: 0; 82 } 83 .cube .cube__bottom { 84 color: dodgerblue; 85 transform: rotateX(270deg) translateZ(25vh); 86 position: absolute; 87 top: 0; 88 left: 0; 89 } 90 @keyframes rotator { 91 0% { 92 transform: rotateX(0deg) rotateY(0deg); 93 } 94 100% { 95 transform: rotateX(360deg) rotateY(360deg); 96 } 97 } 98 p{ 99 font-size: 32px; 100 line-height:200px; 101 text-align: center; 102 } 103 </style> 104 </head> 105 <body> 106 <div class="world"> 107 <div class="cube" tabindex="0"> 108 <div class="cube__front"><p>chenchen</p></div> 109 <div class="cube__back"><p>chenchen</p></div> 110 <div class="cube__left"><p>chenchen</p></div> 111 <div class="cube__right"><p>chenchen</p></div> 112 <div class="cube__top"><p>chenchen</p></div> 113 <div class="cube__bottom"><p>chenchen</p></div> 114 </div> 115 </div> 116 </body> 117 </html>
注意：
currentColor指的是文字的颜色，并不是背景颜色！