<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>
----------------------------------------------------------------------------------------------------------------------------------------
<style>
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);
}
}
</style>
With this 3D CSS Design I wanted to create a "simple and funny screensaver"designed with shiny colors and do it will never stop . No developed launching work on screen yet, but only movement show all possibilities .
CSS3 Animations by sSoftware RVG
An animation lets an element gradually change from one style to another.
You can change as many CSS properties you want, as many times you want.
To use CSS3 animation, you must first specify some keyframes for the animation.
Keyframes hold what styles the element will have at certain times.
When you specify CSS styles inside the @keyframes rule, the animation will gradually change from the current style to the new style at certain times.
To get an animation to work, you must bind the animation to an element.
The following example binds the "example" animation to the
element. The animation will lasts for infinite duration , and it will gradually change the background-color of the
element .
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.