3Design "Atom" screensaver by Software RVG
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="generator" content="Software RVG HTML Editor (www.software-rvg.com)">
<meta name="dcterms.created" content="vi., 13 jun. 2016 01:25:28 GMT">
<meta name="description" content="css,,development,by;Software-RVG">
<meta name="keywords" content="css,,Software RVG,3D animation,screensaver,creative work,artistic work">
<title>css__3d_Animation_atom_screensaver_by_SoftwareRVG</title>
<div class="text">
<h1>SOFTWARE RVG</h1>
<</div>
<div class="view">
<div class="plane main">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
</div>
<div class="footer">
<h2>PROFESSIONAL ANIMATIONS 3D DESIGNS </h2>
</div>
</body>
</html>
CSS
h1{font-family:impact,impact-w01-2010,impact-w02-2010,impact-w10-2010,sans-serif;
color:#ffffff;
size: 100px;
color:#000000;
text-align:center;
background-color:#00ff00;
background-repeat:no-repeat; }
h2{font-family:impact,impact-w01-2010,impact-w02-2010,impact-w10-2010,sans-serif;
color:#ffffff;
size: 100px;
color:#000000;
text-align:center;
background-color:#ff8000;
background-repeat:no-repeat;
margin-top:480px;}
footer{position:bottom;}
html, body {
background-color:black;
image:url();
margin-left:auto;
margin-right:auto;
repeat:no-repeat;
overflow: hidden;
}
.view {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
-webkit-perspective: 400;
perspective: 400;
}
.plane {
width: 120px;
height: 120px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.plane.main {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
-webkit-transform: rotateX(60deg) rotateZ(-30deg);
transform: rotateX(60deg) rotateZ(-30deg);
-webkit-animation: rotate 20s infinite linear;
animation: rotate 20s infinite linear;
}
.plane.main .circle {
width:600px;
height: 600px;
position: absolute;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
border-radius: 100%;
box-sizing: border-box;
box-shadow: 0 0 600px #00ff00, inset 0 0 600px #00ffff;
}
.plane.main .circle::before, .plane.main .circle::after {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 10%;
height: 10%;
border-radius: 100%;
background: ;
box-sizing: border-box;
box-shadow: 0 0 60px 2px #FF4000;
}
.plane.main .circle::before {
-webkit-transform: translateZ(-90px);
transform: translateZ(-90px);
}
.plane.main .circle::after {
-webkit-transform: translateZ(90px);
transform: translateZ(90px);
}
.plane.main .circle:nth-child(1) {
-webkit-transform: rotateZ(72deg) rotateX(63.435deg);
transform: rotateZ(72deg) rotateX(63.435deg);
}
.plane.main .circle:nth-child(2) {
-webkit-transform: rotateZ(144deg) rotateX(63.435deg);
transform: rotateZ(144deg) rotateX(63.435deg);
}
.plane.main .circle:nth-child(3) {
-webkit-transform: rotateZ(216deg) rotateX(63.435deg);
transform: rotateZ(216deg) rotateX(63.435deg);
}
.plane.main .circle:nth-child(4) {
-webkit-transform: rotateZ(288deg) rotateX(63.435deg);
transform: rotateZ(288deg) rotateX(63.435deg);
}
.plane.main .circle:nth-child(5) {
-webkit-transform: rotateZ(360deg) rotateX(63.435deg);
transform: rotateZ(360deg) rotateX(63.435deg);
}
@-webkit-keyframes rotate {
0% {
-webkit-transform: rotateX(0) rotateY(0) rotateZ(0);
transform: rotateX(0) rotateY(0) rotateZ(0);
}
100% {
-webkit-transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
}
}
@keyframes rotate {
0% {
-webkit-transform: rotateX(0) rotateY(0) rotateZ(0);
transform: rotateX(0) rotateY(0) rotateZ(0);
}
100% {
-webkit-transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
}
}
