Rotierender Rahmen |
| So sieht´s aus |
 |
| Quellcode |
|
<html> <head> <style type="text/css"> @-webkit-keyframes rotate { 100% { transform: rotate(1turn);}} @keyframes rotate { 100% { transform: rotate(1turn);}} .anim-border {position: relative; z-index: 0; width: 300px; height: auto; border-radius: 10px; overflow: hidden; padding: 2em;} .anim-border::before {content: ""; position: absolute; z-index: -2; left: -50%; top: -50%; width: 200%; height: 200%; background-color: orange; background-repeat: no-repeat; background-size: 50% 50%, 50% 50%; background-position: 0 0, 100% 0, 100% 100%, 0 100%; background-image: linear-gradient(fuchsia, red, green); -webkit-animation: rotate 4s linear infinite; animation: rotate 4s linear infinite;} .anim-border::after {content: ""; position: absolute; z-index: -1; left: 6px; top: 6px; width: calc(100% - 12px); height: calc(100% - 12px); background: white; border-radius: 20px;} .anim-border img {width: 100%;} .container {max-width: 1060px; margin: auto;} </style> <head> <body > <center><div class="anim-border"><img src="../Bilder/life.jpg" alt="stackfindover"></div></center> </body> </html> |
Kontakt Datenschutz Impressum |