Bilderrahmen Verlaufsanimation |
| So sieht´s aus |
|
| Quellcode |
|
<html> <head> <style type="text/css"> .img-wrapper {max-width: 150px; position: relative;} .img-wrapper img {width: 100%; display: block; border-radius: 50%;} .img-wrapper::before {content: ""; position: absolute; inset: -15px; border: 10px solid; border-top-color: fuchsia; border-bottom-color: red; border-left-color: cyan; border-right-color: yellow; border-radius: 50%; z-index: -1; animation: spin 3s linear infinite;} .img-wrapper:hover::before {animation: spin 0.5s linear infinite;} @keyframes spin { to { transform: rotate(360deg);}} </style> <head> <body > <center> <div class="img-wrapper"> <img src="../Bilder/hkhlogo.png"> </div></center> <script> window.console = window.console || function(t) {};</script> <script> if (document.location.search.match(/type=embed/gi)) { window.parent.postMessage("resize", "*"); }</script> </body> </html> |
Kontakt Datenschutz Impressum |