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指的是文字的颜色，并不是背景颜色！
时间： 2024-10-09 04:39:59