CSS echo effect
Letztens hatte ich mit einem Kollegen das Thema wegen der JS/CSS/HTML und dass CSS+HTML ja schon turing complete ist.
Wir sind dann auch zu animationen gekommen, wie der Echolot-Effekt den wir auch auf unserer Hompage haben. Save to say, im original ist er in JS.
Ich hab mir also kurz die Mühe gemacht, das ganze in HTML und CSS umzusetzen und hier links mal zu platzieren:
Wir sind dann auch zu animationen gekommen, wie der Echolot-Effekt den wir auch auf unserer Hompage haben. Save to say, im original ist er in JS.
Ich hab mir also kurz die Mühe gemacht, das ganze in HTML und CSS umzusetzen und hier links mal zu platzieren:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
@keyframes d1 {
from {margin:10px; height: 80px; width: 80px; opacity: 0.5;}
to {margin:0px; height: 100px; width: 100px; opacity: 0;}
}
@keyframes d2 {
from {margin:20px;height: 60px; width: 60px; opacity: 1;}
to {margin:10px; height: 80px; width: 80px; opacity: 0.5;}
}
@keyframes d3 {
from {margin: 30px;height: 40px; width: 40px; opacity: 1;}
to {margin:20px;height: 60px; width: 60px; opacity: 1;}
}
@keyframes d4 {
from {margin:40px;height: 20px; width: 20px; opacity: 1;}
to {margin:30px;height: 40px; width: 40px; opacity: 1;}
}
@keyframes d5 {
from {margin:50px;height: 0px; width: 0px; opacity: 1;}
to {margin:40px;height: 20px; width: 20px; opacity: 1;}
}
.dot-container {
position: relative; /* Stellt sicher, dass die absolut positionierten Kinder relativ zur Elterndiv positioniert sind */
width: 100px; /* Breite des Containers an die größte Kreisgröße anpassen */
height: 100px; /* Höhe des Containers an die größte Kreisgröße anpassen */
}
#c1 {
position:absolute;
top: 200px; left:200px;
}
#c2 {
position:absolute;
top: 300px; left:400px;
}
.dot {
position: absolute; /* Positionierung absolut zur Elterndiv */
border-style: solid;
border-color: #bbb;
border-radius: 50%;
animation-timing-function: linear;
animation-duration: 0.5s;
animation-iteration-count: infinite;
}
.dot1 {
animation-name: d1;
}
.dot2 {
animation-name: d2;
}
.dot3 {
animation-name: d3;
}
.dot4 {
animation-name: d4;
}
.dot5 {
animation-name: d5;
}
</style>
</head>
<body>
<h1 style="text-align:center">Round Dots / Circles</h1>
<div class="dot-container" id="c1">
<div class="dot dot1"></div>
<div class="dot dot2"></div>
<div class="dot dot3"></div>
<div class="dot dot4"></div>
<div class="dot dot5"></div>
</div>
<div class="dot-container" id="c2">
<div class="dot dot1"></div>
<div class="dot dot2"></div>
<div class="dot dot3"></div>
<div class="dot dot4"></div>
<div class="dot dot5"></div>
</div>
</body>
</html>
rothi - 15. Mär, 08:31
