HTML+CSS炫酷彩色立方体特效

源码视频教程

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>

展示效果

喜欢的朋友们关注我

HTML+CSS炫酷彩色立方体特效相关推荐

H5炫酷特效系列4——炫酷粒子变化特效
这个示例虽然没有相对比较实用的特性,但是表现出来的效果确实非常震撼眼球.先上效果图,让各位同胞感受一下: 特效的表现感很强,有兴趣的读者可以仔细学习一下下面的代码,尝试着理解其中的逻辑. <!D ...
153.炫酷粒子背景特效
效果 (源码网盘地址在最后) 最近开源了一个 Vue 组件,还不够完善,欢迎大家来一起完善它,也希望大家能给个 star 支持一下,谢谢各位了. github 地址:https://github.co ...
给页面写一个炫酷的时钟特效【web前端】
文章目录一.前言二.想法设计/实现过程三.基本样式四.时间函数控制器五,时,分,秒占位六.时间动态填充一.前言今天看到某网站的时间特别的丑陋,所以就诞生了写一个看时间的炫酷的时钟前端页 ...
html5星空效果图,HTML5 canvas炫酷星空背景特效
jquery-warpdrive-plugin是一款可以制作基于HTML5 canvas的炫酷星空背景特效的jquery插件.这个星空背景特效可通过配置参数进行灵活的配置,可用鼠标进行互动. 使用方法 ...
纯html+css炫酷地球仪动画效果
纯html+css炫酷地球仪动画效果 <!DOCTYPE html> <html lang="en"> <head><meta chars ...
炫酷的动画特效—css3旋转立方球体
炫酷的动画特效-css3旋转立方球体想要实现旋转立方球体特效,以下的内容你不容错过. 要理解的知识点形成一个3D空间: transform-style:preserve-3d (让父元素形成3D, ...
制作炫酷AR卡片特效——小技巧
制作炫酷AR卡片特效--小技巧本帖最后由仅为年时于 2016-7-9 08:28 编辑 gif展示.gif (2.82 MB, 下载次数: 11) 下载附件保存到相册 2016-7-9 01 ...
HTML+CSS+JS制作炫酷【烟花特效】
文章目录制作炫酷烟花特效一.普通烟花(分散形) HTML代码 CSS代码 JS代码二.圆形烟花 HTML代码 CSS代码 JS代码三.爱心形烟花 HTML代码 CSS代码 JS代码四.源码获 ...
动态毛玻璃特效html,js和CSS3炫酷毛玻璃面板特效
Frosted Panel 是一款使用js编写的炫酷毛玻璃特效插件.您通过简单的配置,既可以生成非常炫酷的半透明模糊的毛玻璃效果. 使用方法在HTML文件中引入. HTML结构创建HTML结构并使 ...

HTML+CSS炫酷彩色立方体特效

HTML+CSS炫酷彩色立方体特效相关推荐

最新文章

热门文章