Animación
CSS
Publicado el 16 de Junio del 2021 por Greenyellow
8.827 visualizaciones desde el 16 de Junio del 2021
una animación
Iniciar sesiónCrear cuenta
Crear cuentaCrear cuenta(1)<!DOCTYPE html>
<html>
<head>
<style>
div { width: 100px; height: 100px; background: blue; position: relative; animation: mymove 5s infinite;}@keyframes mymove {0% {top: 0px; left: 0px; background: red; transform: rotate(72deg);}
25% {top: 0px; left: 500px; background: blue; transform: rotate(144deg);}
50% {top: 285px; left: 500px; background: yellow; transform: rotate(216deg);}
75% {top: 285px; left: 0px; background: green; transform: rotate(288deg);}
100% {top: 0px; left: 0px; background: red; transform: rotate(360deg);}
} #dep { right: 3px; }</style>
</head>
<body>
<div id="dep">
<svg>
<line x1="-200" y1="-200" x2="200" y2="200" style="stroke: crimson ;stroke-width:2" />
</svg>
</div>
<circle r="40" fill="purple" />
<div>
<svg>
<circle r="40" fill="purple" />
</svg>
</div>
<div id="dop">
<svg>
<line x1="-200" y1="-200" x2="200" y2="200" style="stroke: black ;stroke-width:2" />
</svg>
</div>
<circle r="40" fill="green" />
<div>
<svg>
<circle r="40" fill="green" />
</svg>
</div>
</body>
</html>
Comentarios sobre la versión: 1.0 (1)