Efecto de Texto Luminoso elaborado con HTML y CSS, muy sencillo espero que se animen a hacerlo!
<pre class="brush: html">
<!----Elaborado por:Issac Ron--->
<!DOCTYPE html>
<html>
<head>
<title>Animacion 1</title>
<link type="text/css" rel="stylesheet" href="text1.css"/>
</head>
<body>
<span class="s1 yokeissa">Yokeissa</span>
<span class="s2 yokeissa">Yokeissa</span>
</body>
</html>
A continuacion el estilo que es el css:
<pre class="brush: css">
/*******Elaborado por Ron Issac********************/
body {
position:relative;
width:98%;
z-index:-1; /**********DIMENSIONES DE LA PANTALLA***********/
height:98vh;
background-image:url("images.jpg"); /**********EL FONDO DE LA PANTALLA**************/
background-position:center;
background-repeat:no-repeat;
background-size:cover; /**********CARACTERISTICAS DEL FONDO***********/
list-style:none;
text-align: center;
}
.yokeissa {
position: absolute;
top: 50%;
left: 50%;
transform-origin: 50% 50%;
transform: translate(-50%, -50%);
font-size: 355px;
color: #4fe9ee;
}
.s1 {
z-index: 1;
text-shadow: 4px 4px 10px #faf7f7,
5px 5px 75px #4fe9ee,/****LA PRIMERA CAPA DE LETRA*****/
-5px -5px 75px #4fe9ee;
animation: text-shadow 3s alternate infinite;
}
.s2 {
font-size: 345px; /****LA SEGUNDA CAPA DE LETRA*****/
color: #000000;
z-index: 2;
}
@keyframes text-shadow { /****SOMBRAS...*****/
from {
text-shadow: 0px 0px 0px #4fe9ee,
0px 0px 0px #4fe9ee,
0px 0px 0px #4fe9ee;
}
to {
text-shadow: 4px 4px 10px #000000,
5px 5px 75px #4fe9ee,
-5px -5px 75px #4fe9ee;
}
}</pre>
No hay comentarios:
Publicar un comentario