css3技术设计立方体旋转发光效果动图

2019-09-13 郑州网站建设  

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>CSS3 3D立方体旋转发光动画特效</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>


河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/dede/2100.html转载请标明出处,谢谢合作!
标签:
  • CSS3
  • HTML
  • Doctype
  • !
  • Ч
  • hea