<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>
SOFTWARE RVG / CSS3 ADVANCED DESIGNS. Diseños avanzados con animaciones 3D combinando varias técnicas 3D y tiempos de ejecución en las animaciones. Aplicaciones en video,fotografia,iluminación,publicidad, aplicaciones web,apps. The site is currently focussed on CSS Transitions, Transforms and Animation, though I will be adding other topics as they become available on any major platform.
Though of course your browser must support the technologies to use them, most things degrade nicely in older browser, meaning that you can use much of this today, even without a fallback. If you need to have the same appearance in older browsers (mainly IE6, 7 and 8), then all the animation bits can be easily covered by using jQuery's .animate(). 2D transforms can be emulated to a degree in older versions of IE, but 3D transforms can't.
None of the actual animation uses javascript, though I am using jQuery to add and remove classes to add interactivity. You can use the :target pseudo selector to do this in some cases, but I'm keeping it simple and extensible here.
If you are using a touch enabled device, replace hover with touch and hold wherever appropriate. (Check the script in the head if you are wondering how to replicate that effect.) Your Browser Property Global Support US Support Do you have it? CSS Transitions 34% 39%
CSS Transforms 39% 46%
CSS 3D Transforms 33% 39%
CSS Animation 34% 39%
CSS Filters 3% 5%
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.