源码视频教程
HTML+CSS炫酷彩色立方体
HTML代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>TORLAN</title><link rel="stylesheet" href="style.css" /></head><body><div class="world"><div class="cube" tabindex="0"><div class="cube__front"></div><div class="cube__back"></div><div class="cube__left"></div><div class="cube__right"></div><div class="cube__top"></div><div class="cube__bottom"></div></div></div></body></html>
CSS代码
body {margin: 0;overflow: hidden;width: 100vw;height: 100vh;background: #222222;display: flex;flex-wrap: wrap;justify-content: center;align-items: center;}.world {perspective: 800px;width: 100vh;height: 100vh;display: flex;flex-wrap: wrap;justify-content: center;align-items: center;}.cube {transform-style: preserve-3d;backface-visibility: hidden;width: 50vh;height: 50vh;position: relative;animation: rotator 4.5s linear infinite;outline: 0;}.cube * {background: #000000;box-shadow: 0 0 3vh currentColor;transition: background 0.4s ease-in-out, box-shadow 0.4s ease-in-out;}.cube:hover * {background: currentColor;box-shadow: 0 0 20vh currentColor;}.cube .cube__front {color: deeppink;transform: translateZ(25vh);position: absolute;top: 0;left: 0;width: 100%;height: 100%;}.cube .cube__right {color: lightcoral;transform: rotateY(90deg) translateZ(25vh);position: absolute;top: 0;right: 0;width: 100%;height: 100%;}.cube .cube__left {color: skyblue;transform: rotateY(270deg) translateZ(25vh);position: absolute;top: 0;left: 0;width: 100%;height: 100%;}.cube .cube__back {color: seagreen;position: absolute;top: 0;left: 0;width: 100%;height: 100%;transform: rotateY(180deg) translateZ(25vh);}.cube .cube__top {color: mediumseagreen;transform: rotateX(90deg) translateZ(25vh);position: absolute;top: 0;left: 0;width: 100%;height: 100%;}.cube .cube__bottom {color: dodgerblue;transform: rotateX(270deg) translateZ(25vh);position: absolute;top: 0;left: 0;width: 100%;height: 100%;}@keyframes rotator {0% {transform: rotateX(0deg) rotateY(0deg);}100% {transform: rotateX(360deg) rotateY(360deg);}}
完整代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>TORLAN</title><style>body {margin: 0;overflow: hidden;width: 100vw;height: 100vh;background: #222;display: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;align-items: center;}.world {-webkit-perspective: 800px;perspective: 800px;width: 100vh;height: 100vh;display: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;align-items: center;}.cube {-webkit-transform-style: preserve-3d;transform-style: preserve-3d;-webkit-backface-visibility: hidden;backface-visibility: hidden;width: 50vh;height: 50vh;position: relative;-webkit-animation: rotator 4.5s linear infinite;animation: rotator 4.5s linear infinite;outline: 0;}.cube * {background: #000;box-shadow: 0 0 3vh currentColor;-webkit-transition: background 0.4s ease-in-out,box-shadow 0.4s ease-in-out;transition: background 0.4s ease-in-out, box-shadow 0.4s ease-in-out;}.cube:hover * {background: currentColor;box-shadow: 0 0 20vh currentColor;}.cube .cube__front {color: deeppink;-webkit-transform: translateZ(25vh);transform: translateZ(25vh);position: absolute;top: 0;left: 0;width: 100%;height: 100%;}.cube .cube__right {color: lightcoral;-webkit-transform: rotateY(90deg) translateZ(25vh);transform: rotateY(90deg) translateZ(25vh);position: absolute;top: 0;left: 0;width: 100%;height: 100%;}.cube .cube__left {color: skyblue;-webkit-transform: rotateY(270deg) translateZ(25vh);transform: rotateY(270deg) translateZ(25vh);position: absolute;top: 0;left: 0;width: 100%;height: 100%;}.cube .cube__back {color: seagreen;position: absolute;top: 0;left: 0;width: 100%;height: 100%;-webkit-transform: rotateY(180deg) translateZ(25vh);transform: rotateY(180deg) translateZ(25vh);}.cube .cube__top {color: mediumseagreen;-webkit-transform: rotateX(90deg) translateZ(25vh);transform: rotateX(90deg) translateZ(25vh);position: absolute;top: 0;left: 0;width: 100%;height: 100%;}.cube .cube__bottom {color: dodgerblue;-webkit-transform: rotateX(270deg) translateZ(25vh);transform: rotateX(270deg) translateZ(25vh);position: absolute;top: 0;left: 0;width: 100%;height: 100%;}@-webkit-keyframes rotator {0% {-webkit-transform: rotateX(0deg) rotateY(0deg);transform: rotateX(0deg) rotateY(0deg);}100% {-webkit-transform: rotateX(360deg) rotateY(360deg);transform: rotateX(360deg) rotateY(360deg);}}@keyframes rotator {0% {-webkit-transform: rotateX(0deg) rotateY(0deg);transform: rotateX(0deg) rotateY(0deg);}100% {-webkit-transform: rotateX(360deg) rotateY(360deg);transform: rotateX(360deg) rotateY(360deg);}}</style></head><body><div class="world"><div class="cube" tabindex="0"><div class="cube__front"></div><div class="cube__back"></div><div class="cube__left"></div><div class="cube__right"></div><div class="cube__top"></div><div class="cube__bottom"></div></div></div></body></html>
展示效果
喜欢的朋友们关注我
