首页 > 代码库 > currentColor

currentColor

2024-09-18 22:10:40   217人阅读

  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指的是文字的颜色，并不是背景颜色！

currentColor


联系
我们