INTENTO FALLIDO DE ANIMACION SVG

Developer
Edgar Gutierrez: Diseñador Web Gráfico: Googleame Como "g3kdigital" ;)
Size
5,659 Kb
Views
10,120
  1. INTENTO FALLIDO DE ANIMACION SVG Previews
  2. INTENTO FALLIDO DE ANIMACION SVG HTML Codes
  3. INTENTO FALLIDO DE ANIMACION SVG CSS Codes
  4. INTENTO FALLIDO DE ANIMACION SVG JS Codes

How do I make an intento fallido de animacion svg?

Para una mejor demo consultar mi pen "animacion 100% CSS vs GIF". What is a intento fallido de animacion svg? How do you make a intento fallido de animacion svg? This script and codes were developed by Edgar Gutierrez: Diseñador Web Gráfico: Googleame Como "g3kdigital" ;) on 18 October 2022, Tuesday.

INTENTO FALLIDO DE ANIMACION SVG Previews
IQ Test

INTENTO FALLIDO DE ANIMACION SVG - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>INTENTO FALLIDO DE ANIMACION SVG</title> <meta name="viewport" content="width-device-width"/> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ *{ padding: 0; margin: 0}
*,*::after,*::before{box-sizing:border-box;}
html, body
{ background: rgb(13,56,96); font-family: 'tahoma', sans-serif; font-size: 16px; text-align: center;
}
.telefono
{ background: transparent; display: inline-block; vertical-align: top; width: 10rem; height: 20rem; margin: 1% auto; border: solid rgb(250,250,250); border-width: 2rem 0.5rem; border-radius: 1rem; position: relative;
}
.telefono::before
{ content: ''; display: inline-block; position: absolute; top: -8%; left: 50%; background: rgb(102,102,102); border-radius: 50%; width: 6%; height: 3%; transform: translateX(-50%);
}
.telefono:not(.gif) .display
{ width: 100%; height: 100%; /*background: rgb(0,75,141);*/ position: relative; overflow: hidden; background-size: 150% 350%; background-position: center; background-repeat: no-repeat; background: radial-gradient(ellipse at center, rgba(0,93,175,0.0) 0%, rgba(0,93,175,0.7) 100%);
}
.telefono:not(.svg) .logo-apagar
{ width: 1rem; height: 1rem; position: absolute; left: 50%; bottom: -9%; transform: translateX(-50%)
}
.telefono .grafismo
{ width: 90%; height: 100%; position: absolute; top: -5%; right: -15%; z-index: 10;
}
.telefono .loggin
{ background: rgba(255,255,255,.0); width: 100%; height: 100%; position: absolute; left: 0; z-index: 45;
}
.telefono .icono-logo
{ width: 38%; height: 40%; position: absolute; left: 12%; top: 13%;
}
.span .loggin span
{ position: relative;
}
.telefono span.input,
.telefono span.boton
{ width: 38%; height: 7%; background: white; position: absolute; top: 52%; left: 12%;
}
.telefono span.input:nth-child(2)
{ top: 61%;
}
.telefono span.boton
{ top: 72%; width: 15%; background-color: rgb(32,178,170);
}
.telefono .loggin .input::after,
.telefono .loggin .boton::after
{ content: ''; display: block; width: 0rem; height: 100%; background-color: transparent; position: absolute; left: 100%; border-color: transparent; border-style: solid; border-width: 0.6rem; border-top-color: white; border-left-color: white;
}
.telefono .loggin span.boton::after
{ border-top-color: rgb(32,178,170); border-left-color: rgb(32,178,170);
}
.telefono .loggin .input:nth-child(3)::after
{ border-top-color: transparent; border-bottom-color: white; border-left-color: white;
}
.telefono .fondo-btn
{ width: 20%; height: 10%; position: absolute; top: 0; left: 0;
}
.telefono .menu-btn
{ display: inline-block; width: 12%; height: 0.85%; position: absolute; background-color: white; top: 2%; left: 4%; z-index: 58;
}
.telefono .menu-btn::before,
.telefono .menu-btn::after
{ content: ''; display: inline-block; position: absolute; top: 220%; left: 0%; width: 100%; height: 120%; background-color: white;
}
.telefono .menu-btn::after
{ top: 450%;
}
.telefono .barra-top
{ width: 100%; height: 8%; background-color: rgb(0,50,50); position: absolute; top: 0; left: 0; z-index: 60;
}
.enlace:link, .enlace:visited
{ display: block; color: white;
}
.gif .display
{ background-image: url('https://i.imgur.com/H4sOD5H.gif'); background-size: 100% 100%; width: 100%; height: 100%;
}
.svg svg
{ border: solid;
}
[id*="svg-carcasa"]
{ fill: rgb(250,250,250); border-radius: 1rem;}
[id*="svg-logo-apagar"]
{ fill: rgb(210,210,210); }
[id*="icono"],
[id*="fondo-btn"]
{ fill: rgb(32,178,170);} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <a class="enlace" href="https://codepen.io/g3kdigital/pen/qxsHi" target="_blank">abandone ete pen temporalmente de svg inline y regreso a los background svg como en este pen. </a>
<div class="telefono"> <div class="display"> <svg class="grafismo" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 180 500"> <g id="grafismo"> <linearGradient id="abajo_1_" gradientUnits="userSpaceOnUse" x1="2615.3113" y1="1353.6498" x2="2625.2612" y2="1353.6498" gradientTransform="matrix(10.3512 0 0 10.3512 -26994.4863 -13794.2549)"> <stop offset="0" style="stop-color:#1E90FF"/> <stop offset="1" style="stop-color:#457BD2;stop-opacity:0"/> </linearGradient> <polygon id="abajo" fill="url(#abajo_1_)" points="146.3,0 180,0 180,435.3 76.8,344.1	"/> <linearGradient id="arriba_1_" gradientUnits="userSpaceOnUse" x1="2607.8601" y1="1341.5265" x2="2625.2754" y2="1341.5265" gradientTransform="matrix(10.3512 0 0 10.3512 -26994.4863 -13794.2549)"> <stop offset="0" style="stop-color:#1E90FF;stop-opacity:0"/> <stop offset="1" style="stop-color:#1AC98E"/> </linearGradient> <polygon id="arriba" fill="url(#arriba_1_)" points="0,0 180,184.3 180,0	"/> <linearGradient id="medio_1_" gradientUnits="userSpaceOnUse" x1="2615.3113" y1="1354.8336" x2="2625.261" y2="1354.8336" gradientTransform="matrix(10.3512 0 0 10.3512 -26994.4863 -13794.2549)"> <stop offset="0" style="stop-color:#1AC98E"/> <stop offset="1" style="stop-color:#1E90FF;stop-opacity:0"/> </linearGradient> <polygon id="medio" fill="url(#medio_1_)" points="76.8,244.1 180,138.2 180,321.6	"/> <linearGradient id="todo_1_" gradientUnits="userSpaceOnUse" x1="2616.854" y1="1368.2355" x2="2625.261" y2="1368.2355" gradientTransform="matrix(10.3512 0 0 10.3512 -26994.4863 -13794.2549)"> <stop offset="0" style="stop-color:#276EB2;stop-opacity:0"/> <stop offset="1" style="stop-color:#20B2AA"/> </linearGradient> <polygon id="todo" fill="url(#todo_1_)" points="180,237.3 180,500 92.6,415.7	"/> </g> </svg><!--grafismo--> <span class="barra-top"></span> <svg class="fondo-btn" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 68.6 60"> <path id="svg-fondo-btn" d="M57.1,60H0V0h68.6v48.6C64.1,52.8,62.8,55.7,57.1,60z"/> </svg><!--Fondo Btn--> <span class="menu-btn"></span> <div class="loggin"> <svg class="icono-logo" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 397 500" > <path id="icono-logo" d="M130.1,283.6c32.4,31.5,75,39,75,39l47.3-78.6c0,0-134.5-30.6-146-161.6l145.6,0l-43.7,79 h94.3L397,0H11.8l0,0c0,0-19.7,118.3,59,228.3c-198.7,151.2,59.7,344,298.9,244.3v-94.3C222.2,436.6,47.9,381.9,130.1,283.6z"/> </svg><!--icono-logo--> <span class="input de"></span> <span class="input"></span> <span class="boton"></span> </div><!--loggin--> </div><!--display--> <svg class="logo-apagar" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 50 50"> <path id="svg-logo-apagar" d="M25,0C10.9,0,0,10.9,0,25c0,14.1,10.9,25,25,25l0,0L4.3,10.9h41.5L25,50l0,0	c14.1,0,25-10.9,25-25S39.1,0,25,0z"/> </svg><!--logo-apagar-->
</div><!--telefono-->
<div class="telefono gif"> <div class="display"> </div><!--display-->
</div><!--telefono gif-->
<!--este de abajo no funciona-->
<div class="telefono svg"> <svg class="logo-apagar" viewBox="0 0 355.9 601.3"> <use xlink:href="svg-logo-apagar"></use> </svg>
</div>
<svg class="oculto"> <defs><!--Cuando estan aquí dentro no funcionan--> <g id="svg-logo-apagar"> <path d="M178,515.4c-9.3,0-16.6,7.2-16.6,16.6c0,9.3,7.2,16.6,16.6,16.6l0,0l-14.5-25.9l0,0h29l0,0 L178,548.5l0,0c9.3,0,16.6-7.2,16.6-16.6S187.3,515.4,178,515.4z"/> </g><!--logo-apagar--> </defs>
</svg>
<svg class="oculto" version="1.1" id="smartphone" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 355.9 601.3" enable-background="new -196 604 1193.9 624" xml:space="preserve"> <g id="svg-carcasa-2"> <path d="M334.8,7.3H21.1v554.8h313.6V7.3z M322.4,505.2H33.6V60.1h288.8V505.2z"/> </g><!--carcasa--> <g id="svg-logo-apagar-2"> <path d="M178,515.4c-9.3,0-16.6,7.2-16.6,16.6c0,9.3,7.2,16.6,16.6,16.6l0,0l-14.5-25.9l0,0h29l0,0 L178,548.5l0,0c9.3,0,16.6-7.2,16.6-16.6S187.3,515.4,178,515.4z"/> </g><!--logo-apagar--> <g id="grafismo"> <linearGradient id="abajo_1_" gradientUnits="userSpaceOnUse" x1="2348.197" y1="1371.9283" x2="2358.0925" y2="1371.9283" gradientTransform="matrix(10.3512 0 0 10.3512 -24086.6055 -13908.5703)"> <stop offset="0" style="stop-color:#1E90FF"/> <stop offset="1" style="stop-color:#457BD2;stop-opacity:0"/> </linearGradient> <polygon id="abajo" fill="url(#abajo_1_)" points="288.9,60.1 322.4,60.1 322.4,524.9 219.8,427.6	"/> <linearGradient id="arriba_1_" gradientUnits="userSpaceOnUse" x1="2340.7864" y1="1358.9829" x2="2358.1067" y2="1358.9829" gradientTransform="matrix(10.3512 0 0 10.3512 -24086.6055 -13908.5703)"> <stop offset="0" style="stop-color:#1E90FF;stop-opacity:0"/> <stop offset="1" style="stop-color:#1AC98E"/> </linearGradient> <polygon id="arriba" fill="url(#arriba_1_)" points="143.3,60.1 322.4,256.9 322.4,60.1	"/> <linearGradient id="medio_1_" gradientUnits="userSpaceOnUse" x1="2348.197" y1="1373.1926" x2="2358.0923" y2="1373.1926" gradientTransform="matrix(10.3512 0 0 10.3512 -24086.6055 -13908.5703)"> <stop offset="0" style="stop-color:#1AC98E"/> <stop offset="1" style="stop-color:#1E90FF;stop-opacity:0"/> </linearGradient> <polygon id="medio" fill="url(#medio_1_)" points="219.8,320.8 322.4,207.7 322.4,403.5	"/> <linearGradient id="todo_1_" gradientUnits="userSpaceOnUse" x1="2349.7314" y1="1387.5034" x2="2358.0923" y2="1387.5034" gradientTransform="matrix(10.3512 0 0 10.3512 -24086.6055 -13908.5703)"> <stop offset="0" style="stop-color:#276EB2;stop-opacity:0"/> <stop offset="1" style="stop-color:#20B2AA"/> </linearGradient> <polygon id="todo" fill="url(#todo_1_)" points="322.4,313.5 322.4,594 235.5,504	"/> </g><!--grafismo--> <g id="svg-gradiante"> <radialGradient id="fondo_gradiante_1_" cx="170.1445" cy="901.8154" r="19.1911" gradientTransform="matrix(9.8678 0 0 -17.3161 -1501.7188 15899.1123)" gradientUnits="userSpaceOnUse"> <stop offset="0" style="stop-color:#005CAF;stop-opacity:0"/> <stop offset="1" style="stop-color:#005CAF"/> </radialGradient> <rect id="fondo_gradiante" x="33.6" y="60.1" fill="url(#fondo_gradiante_1_)" enable-background="new " width="288.8" height="446.1"/> </g><!--gradiante-->
</svg> <script src="js/index.js"></script>
</body>
</html>

INTENTO FALLIDO DE ANIMACION SVG - Script Codes CSS Codes

*{ padding: 0; margin: 0}
*,*::after,*::before{box-sizing:border-box;}
html, body
{ background: rgb(13,56,96); font-family: 'tahoma', sans-serif; font-size: 16px; text-align: center;
}
.telefono
{ background: transparent; display: inline-block; vertical-align: top; width: 10rem; height: 20rem; margin: 1% auto; border: solid rgb(250,250,250); border-width: 2rem 0.5rem; border-radius: 1rem; position: relative;
}
.telefono::before
{ content: ''; display: inline-block; position: absolute; top: -8%; left: 50%; background: rgb(102,102,102); border-radius: 50%; width: 6%; height: 3%; transform: translateX(-50%);
}
.telefono:not(.gif) .display
{ width: 100%; height: 100%; /*background: rgb(0,75,141);*/ position: relative; overflow: hidden; background-size: 150% 350%; background-position: center; background-repeat: no-repeat; background: radial-gradient(ellipse at center, rgba(0,93,175,0.0) 0%, rgba(0,93,175,0.7) 100%);
}
.telefono:not(.svg) .logo-apagar
{ width: 1rem; height: 1rem; position: absolute; left: 50%; bottom: -9%; transform: translateX(-50%)
}
.telefono .grafismo
{ width: 90%; height: 100%; position: absolute; top: -5%; right: -15%; z-index: 10;
}
.telefono .loggin
{ background: rgba(255,255,255,.0); width: 100%; height: 100%; position: absolute; left: 0; z-index: 45;
}
.telefono .icono-logo
{ width: 38%; height: 40%; position: absolute; left: 12%; top: 13%;
}
.span .loggin span
{ position: relative;
}
.telefono span.input,
.telefono span.boton
{ width: 38%; height: 7%; background: white; position: absolute; top: 52%; left: 12%;
}
.telefono span.input:nth-child(2)
{ top: 61%;
}
.telefono span.boton
{ top: 72%; width: 15%; background-color: rgb(32,178,170);
}
.telefono .loggin .input::after,
.telefono .loggin .boton::after
{ content: ''; display: block; width: 0rem; height: 100%; background-color: transparent; position: absolute; left: 100%; border-color: transparent; border-style: solid; border-width: 0.6rem; border-top-color: white; border-left-color: white;
}
.telefono .loggin span.boton::after
{ border-top-color: rgb(32,178,170); border-left-color: rgb(32,178,170);
}
.telefono .loggin .input:nth-child(3)::after
{ border-top-color: transparent; border-bottom-color: white; border-left-color: white;
}
.telefono .fondo-btn
{ width: 20%; height: 10%; position: absolute; top: 0; left: 0;
}
.telefono .menu-btn
{ display: inline-block; width: 12%; height: 0.85%; position: absolute; background-color: white; top: 2%; left: 4%; z-index: 58;
}
.telefono .menu-btn::before,
.telefono .menu-btn::after
{ content: ''; display: inline-block; position: absolute; top: 220%; left: 0%; width: 100%; height: 120%; background-color: white;
}
.telefono .menu-btn::after
{ top: 450%;
}
.telefono .barra-top
{ width: 100%; height: 8%; background-color: rgb(0,50,50); position: absolute; top: 0; left: 0; z-index: 60;
}
.enlace:link, .enlace:visited
{ display: block; color: white;
}
.gif .display
{ background-image: url('https://i.imgur.com/H4sOD5H.gif'); background-size: 100% 100%; width: 100%; height: 100%;
}
.svg svg
{ border: solid;
}
[id*="svg-carcasa"]
{ fill: rgb(250,250,250); border-radius: 1rem;}
[id*="svg-logo-apagar"]
{ fill: rgb(210,210,210); }
[id*="icono"],
[id*="fondo-btn"]
{ fill: rgb(32,178,170);}

INTENTO FALLIDO DE ANIMACION SVG - Script Codes JS Codes

/*
rgb(0,75,141) - azul_2
rgb(13,96,56) - azul_1
*/
INTENTO FALLIDO DE ANIMACION SVG - Script Codes
INTENTO FALLIDO DE ANIMACION SVG - Script Codes
Home Page Home
Developer Edgar Gutierrez: Diseñador Web Gráfico: Googleame Como "g3kdigital" ;)
Username g3kdigital
Uploaded October 18, 2022
Rating 3
Size 5,659 Kb
Views 10,120
Do you need developer help for INTENTO FALLIDO DE ANIMACION SVG?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Edgar Gutierrez: Diseñador Web Gráfico: Googleame Como "g3kdigital" ;) (g3kdigital) Script Codes
Name
SynerMetrix Maqueta
Aviso de Cookies
Menu responsive con imagenes demo de ayuda en foro
Menu Arbol Vr 1.3
Personalizando el input file
Correo fraudulento de Davivienda
Menu Arbol Vr 1.4
Demo preload liquid css only
Version beta EDUHOLDING
Cambiar idioma solo css
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!