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="ju., 14 abr. 2016 16:24:25 GMT">
<meta name="description" content="css3 animation design by Software RVG,COLORS LETTERS OPEN AND CLOSE">
<meta name="keywords" content="css3,html5,Software RVG designs,programming,designing,developing">
<title>CSS3 ANIMATION COLORS LETTERS OPEN AND CLOSE</title>
<style type="text/css">.header {
width:500px;
margin-bottom:0px;
margin-left:auto;
margin-right:auto;
font-family: "Arial", sans-serif;
color:#40FF00;
text-align:center;
font-size:50px;
}
.header h3 {
color:red;
opacity:0.9;
}
.header h4 {
color:white;;
opacity:0.9;
}
.header small {
color:red;
opacity:0.9;
font-size:20px;
}
.container {
width:auto
padding:30px;
height:autopx;
box-shadow: 0px 1px 2px 0px rgba(50, 50, 50, 0.5);
margin-left:auto;
margin-right:auto;
}
.footer {color:FF0080;
opacity:0,9;
width:900px;
height:100px;
margin-top:10px;
margin-left:auto;
margin-right:auto;
text_align:center;
}
.footer > h2 {
font-family: 'Arial', sans-serif;
color:;
text-align:center;
margin-left:auto;
margin-right:auto;
font-size:20px;
opacity:0.9;
margin-left:auto;
margin-right:auto;
}
.img > a {
margin-top:-10px;
margin-left:auto;
margin-right:auto;
}
.footer .img {color:FF0080;
width:300px;
margin-left:auto;
margin-right:auto;
text-align:center;
}
.img > a > img {color:FF0080;
width:300px;
display:inline;
opacity:09;
}
.img > h4 {
font-family: 'Montserrat', sans-serif;
color:white;
text-align:center;
font-size:30px;
opacity:0.9;
margin-left:auto;
display:inline;
margin-right:auto;
margin-top:-100px;
a { color:#0000FF; }
a:visited { color:#800080; }
a:hover { color:#008000; }
a:active { color:#FF0000; }
-->
</style>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body itemscope itemtype="http://schema.org/ImageObject">
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta name="google" value="notranslate">
<title>CodePen - animated SVG gradient for built flip top and flip bottom</title>
<style>
/* Main styles */
@import url(http://fonts.googleapis.com/css?family=Open+Sans:800);
.text {
fill: url(#gr-radial);
}
/* Other styles */
html, body {
height: 100%;
}body{background: #222 -webkit-linear-gradient(0deg, #222 50%, #272727 50%);
background: #222 linear-gradient(90deg, #222 50%, #272727 50%); }
body header {
background: #222 -webkit-linear-gradient(0deg, #222 50%, #272727 50%);
background: #222 linear-gradient(90deg, #222 50%, #272727 50%);
background-size: .2em 100%;
font: 4.1em/1 Open Sans, Impact;
text-transform: uppercase;
margin: 0;
}
body footer {
background: #222 -webkit-linear-gradient(0deg, #222 50%, #272727 50%);
background: #222 linear-gradient(90deg, #222 50%, #272727 50%);
background-size: .2em 100%;
font: 2.1em/1 Open Sans, Impact;
text-transform: uppercase;
margin: 0;
}
svg {
position: absolute;
width: 100%;
height: 100%;
}
</style>
<script>
window.console = window.console || function(t) {};
</script>
</head>
<body>
<footer>
<svg viewBox="0 0 600 300">
<!-- Gradient -->
<radialGradient id="gr-radial"
cx="50%" cy="50%" r="70%"
>
<!-- Animation for radius of gradient -->
<animate attributeName="r"
values="0%;150%;100%;0%"
dur="2s" repeatCount="indefinite" />
<!-- Animation for colors of stop-color -->
<stop stop-color="#FFFf00" offset="0">
<animate attributeName="stop-color"
values="#0000FF;#ffff00;#00FF00;#FF0000;#00FF00;#0000FF;#FFFF00;#00FF00;#FF0000;#0000FF;#FFFF00;#FF0000"
dur="20s" repeatCount="indefinite" />
</stop>
<stop stop-color="rgba(55,55,55,0)" offset="100%"/>
</radialGradient>
<!-- Text -->
<text text-anchor="middle"
x="50%"
y="25%"
dy=".35em"
class="text"
>
css & svg animation designs
</text>
</footer>
</svg>
<link rel="stylesheet" href="//codepen.io/assets/reset/reset.css">
<style>
@import url(http://fonts.googleapis.com/css?family= Raleway:100,900);
@-webkit-keyframes flip-top {
}
span:nth-child(odd):before {
-webkit-animation-name: flip-top;
animation-name: flip-top;
}
span:nth-child(odd):after {
-webkit-animation-name: flip-bottom;
animation-name: flip-bottom;
}
span:nth-child(even):before {
-webkit-animation-name: flip-bottom;
animation-name: flip-bottom;
}
span:nth-child(even):after {
-webkit-animation-name: flip-top;
animation-name: flip-top;
}
span:nth-child(1n + 0):before {
color: #00FF00;
}
span:nth-child(1n + 0):after {
color: #0000FF;
}
span:nth-child(2n + 1):before {
color: #00FF00;
}
span:nth-child(2n + 1):after {
color: #0000FF;
}
span:nth-child(3n + 2):before {
color: #00FF00;
}
span:nth-child(3n + 2):after {
color: #0000FF;
}
span:nth-child(4n + 3):before {
color: #00FF00;
}
span:nth-child(4n + 3):after {
color: #0000FF;
}
span:nth-child(1):before {
-webkit-animation-delay: 0.88706s;
animation-delay: 0.88706s;
}
span:nth-child(1):after {
-webkit-animation-delay: 1.32717s;
animation-delay: 1.32717s;
}
span:nth-child(2):before {
-webkit-animation-delay: 1.76318s;
animation-delay: 1.76318s;
}
span:nth-child(2):after {
-webkit-animation-delay: 2.19375s;
animation-delay: 2.19375s;
}
span:nth-child(3):before {
-webkit-animation-delay: 2.61756s;
animation-delay: 2.61756s;
}
span:nth-child(3):after {
-webkit-animation-delay: 3.03328s;
animation-delay: 3.03328s;
}
span:nth-child(4):before {
-webkit-animation-delay: 3.43965s;
animation-delay: 3.43965s;
}
span:nth-child(4):after {
-webkit-animation-delay: 3.8354s;
animation-delay: 3.8354s;
}
span:nth-child(5):before {
-webkit-animation-delay: 4.21932s;
animation-delay: 4.21932s;
}
span:nth-child(5):after {
-webkit-animation-delay: 4.59022s;
animation-delay: 4.59022s;
}
span:nth-child(6):before {
-webkit-animation-delay: 4.94696s;
animation-delay: 4.94696s;
}
span:nth-child(6):after {
-webkit-animation-delay: 5.28843s;
animation-delay: 5.28843s;
}
span:nth-child(7):before {
-webkit-animation-delay: 5.61358s;
animation-delay: 5.61358s;
}
span:nth-child(7):after {
-webkit-animation-delay: 5.92141s;
animation-delay: 5.92141s;
}
span:nth-child(8):before {
-webkit-animation-delay: 6.21098s;
animation-delay: 6.21098s;
}
span:nth-child(8):after {
-webkit-animation-delay: 6.48137s;
animation-delay: 6.48137s;
}
span:nth-child(9):before {
-webkit-animation-delay: 6.73177s;
animation-delay: 6.73177s;
}
span:nth-child(9):after {
-webkit-animation-delay: 6.96139s;
animation-delay: 6.96139s;
}
span:before, span:after {
display: block;
content: attr(data-text);
-webkit-animation: 0.88889s ease-out both;
animation: 0.88889s ease-out both;
-webkit-animation-name: inherit;
animation-name: inherit;
text-shadow: 1 2 2em;
}
span:before {
-webkit-clip-path: polygon(0 0 100% 0, 100% 100%);
clip-path: polygon(0 0 100% 0, 100% 100%);
position: absolute;
-webkit-transform-origin: left center;
transform-origin: left center;
color:#00FF00 ;
}
span:after {
-webkit-clip-path: polygon(0 0, 100% 100%, 0 100%);
clip-path: polygon(0 0, 100% 100%, 0 100%);
color: #0000FF;
}@import url(http://fonts.googleapis.com/css?family=Raleway:100,900);
// Diagonal clipping
$left : 0 0 100% 0, 100% 100%;
$right : 0 0, 100% 100%, 0 100%;
// Vertical clipping
// $left : 0 0, 50% 0, 50% 100%, 0 100%;
// $right : 50% 0, 100% 0, 100% 100%, 50% 100%;
@mixin clip($path) {
-webkit-clip-path: polygon($path);
clip-path: polygon($path);
}
@mixin color($color) {
&:before { color: $color; }
&:after { color: adjust-hue($color, 20deg) }
}
@keyframes flip-top {
from {
transform:
rotate(50deg)
translateY(120vh);
}
}
@keyframes flip-bottom {
from {
transform:
rotate(-50deg)
translateY(120vh);
}
}
body { text-align:center;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
overflow: hidden;
background: $background;
animation: glow $duration both;
}
span {
font: 900 vw Raleway;
position: relative;
display: inline-block;
perspective: 500px;
&:nth-child(odd) {
&:before { animation-name: flip-top; }
&:after { animation-name: flip-bottom; }
}
&:nth-child(even) {
&:before { animation-name: flip-bottom; }
&:after { animation-name: flip-top; }
}
@for $i from 1 through length($colors) {
&:nth-child(#{$i}n + #{$i - 1}) {
@include color(nth($colors, $i));
}
}
@for $i from 1 through $chars {
&:nth-child(#{$i}) {
&:before {
$delay : sin($i/$chars) * $duration;
animation-delay: $delay;
}
&:after {
$delay : sin(($i+.5)/$chars) * $duration;
animation-delay: $delay;
}
}
}
&:before, &:after {
display: block;
content: attr(data-text);
animation: $duration/$chars $easing both;
animation-name: inherit;
text-shadow: 0 0 1em;
}
&:before {
@include clip($left);
position: absolute;
transform-origin: left center;
color: nth($colors, 1);
}
&:after {
@include clip($right);
color: nth($colors, 2);
}
}
</style>
<script>
window.console = window.console || function(t) {};
</script>
<style type="text/css">.
}</style>
</head>
<body>
<header>
<h2 class="post__author">
<span data-text="S"></span>
<span data-text="O"></span>
<span data-text="F"></span>
<span data-text="T"></span>
<span data-text="W"></span>
<span data-text="A"></span>
<span data-text="R"></span>
<span data-text="E"></span>
<span data-text="-"></span>
<span data-text=""></span>
<span data-text="R"></span> <span data-text="V"></span> <span data-text="G"></span>
<img style="cursor: pointer;" src="//lh3.googleusercontent.com/-4GgK7t1eE6Q/AAAAAAAAAAI/AAAAAAAAAho/8pIJRbxMMJE/s120-c/photo.jpg" class="fa-kz Zxa"> </div>
</header>
<script>
if (document.location.search.match(/type=embed/gi)) {
window.parent.postMessage("resize", "*");
}
</script>
</body>
</html>
CSS
body footer {
background: #222 -webkit-linear-gradient(0deg, #222 50%, #272727 50%);
background: #222 linear-gradient(90deg, #222 50%, #272727 50%);
background-size: .2em 100%;
font: 2.1em/1 Open Sans, Impact;
text-transform: uppercase;
margin: 0;
}
svg {
position: absolute;
width: 100%;
height: 100%;
}
