diedVIPs

html knowhow

Bilderrahmen mit Animation











Blinkender Bilderrahmen

So sieht´s aus



Quellcode
<html>
<head>
<style type="text/css">
.discoStart {animation:discoLights 2.2s infinite;}
@keyframes discoLights {
0% {box-shadow: 0.5em -0.5em 0.4em Red, 0.5em 0.5em 0.4em Gold, -0.6em 0.5em 0.4em Lime, -0.7em -0.7em 0.20em Blue;}
25% {box-shadow: 0.5em -0.5em 0.4em Blue, 0.5em 0.5em 0.4em Red, -0.6em 0.5em 0.4em Gold, -0.7em -0.7em 0.20em Lime;}
50% {box-shadow: 0.5em -0.5em 0.4em Lime, 0.5em 0.5em 0.4em Blue, -0.6em 0.5em 0.4em Red, -0.7em -0.7em 0.20em Gold;}
75% {box-shadow: 0.5em -0.5em 0.4em Gold, 0.5em 0.5em 0.4em Lime, -0.6em 0.5em 0.4em Blue, -0.7em -0.7em 0.20em Red;}
100% {box-shadow: 0.5em -0.5em 0.4em Red, 0.5em 0.5em 0.4em Gold, -0.6em 0.5em 0.4em Lime, -0.7em -0.7em 0.20em Blue;}}
</style>
</head>
 <body>
<img src="../Bilder/life.jpg" class="discoStart" style="height: auto" width="50%">
</body>
</html



Grafischer Bilderrahmen

So sieht´s aus



Quellcode
<html>
<head>
<style type="text/css">
Hier nichts
</style>
</head
</html>
<body>
<img src="../Bilder/life.jpg" style="border-style: outset; width:50%;height : auto; border-width: 11px; border-color: yellow;">
</body>



Rollender Bilderrahmen

So sieht´s aus



Quellcode
<html>
<head>
<style type="text/css">
img.rahmen {
 border: 25px solid transparent;
 border-radius: 20px;
 background: repeating-conic-gradient(red, orange, yellow, green, blue, indigo, violet 15deg);
 background-size: 500% 500%;
 animation: borderAnimation 12s ease infinite;
}
@keyframes borderAnimation { 0%{  background-position:90% 0% }
 50%{  background-position:15% 100% }
 100%{ background-position:90% 0% } }
</style>
</head>
<body>
<img src="../Bilder/life.jpg" class="rahmen" style="width:50%;height : auto;">
</body>
</html









Kontakt    Datenschutz   Impressum