optische Täuschung einer animierten Linie

Ich wurde gefragt, ob man mit html uns css eine Linie im Kreis animieren kann. Mir war klar dass es funktionieren muss, aber meine Antwort war, dies mit einem ".gif" zu realisieren.

Als ich gepflegt vorm PC saß und keinen Kunden zum bedienen hatte, wollte ich mir das mal anschauen. Kann ja eigentlich nicht so schwer sein, eine gebogene Linie, zu einer Kreisbewegung, zu animieren.

Meine Idee war, eine Box 200px * 5px zu Biegen, dass funktioniert nicht, man muss die Fläche 200px * 200px machen und mit "border-radius: 100px;" Rund machen. Wenn ich jetzt zwei aufeinander liegende Flächen habe, die Obere 5px vom Rand weg und mit einem 5px starken Rahmen versehe, komm ich der Sache schon näher.

Aber eigentlich wollte ich keinen kompletten Rahmen, sondern nur ein Stück von diesem, sagen wir ein bisschen mehr wie ein Viertel. Im Netz habe ich den richtigen Denkanstoß bekommen, als ich einen Halbkreis gefunden habe, dachte ich mir, mit zwei Halbkreisen kann ich den Rahmen verdecken. Wenn ich jetzt einen der Beiden Halbkreise drehe, sieht man nur noch einen Teil des Rahmens. Dabei müssen beide Halbkreise in unterschiedlichen Ebenen liegen, damit ich einen unter den anderen verschieben kann.

Original

Ohne Animation

Mit Animation

Mit Farbe sehen wir genau was passiert, es bewegt sich nicht der Rahmen sondern die beiden Halbkreise, dadurch dass beide in derselben Farbe wie der Hintergrund sind, entsteht der Eindruck, das sich die Linie bewegt.

<div class="border_outer clr">
	<div class="border">
		<div class="border_inner"></div>
		<div class="border_inner_top"></div>
		<div class="border_inner_bottom"></div>
	</div>
</div>
.border_outer {
	display: block;
	margin: -75px 0 0 -75px;
	padding: 0px;
	width: 150px;
	height: 150px;
	position: fixed;
	z-index: 1;
	top: 50%;
	left: 50%;
	border-radius: 75px;
}
.border {
	float: left;
	margin: 0px;
	padding: 0px;
	width: 150px;
	height: 150px;
	background-color: red;
	position: relative;
	clear: left;
	border-radius: 75px;
}
.border_inner_top {
	display: block;
	margin: 0px;
	padding: 0px;
	width: 150px;
	height: 150px;
	background-color: red;
	position: absolute;
	z-index: 3;
	top: 0px;
	left: 0px;
	background: linear-gradient(red 50%, transparent 0%);
	transform: rotate(270deg);
	border-radius: 75px;
}
.border_inner_bottom {
	display: block;
	margin: 0px;
	padding: 0px;
	width: 150px;
	height: 150px;
	background-color: red;
	position: absolute;
	z-index: 2;
	top: 0px;
	left: 0px;
	background: linear-gradient(red 50%, transparent 0%);
	transform: rotate(90deg);
	border-radius: 75px;
}
.border_inner {
	display: block;
	margin: 0px;
	padding: 0px;
	width: 130px;
	height: 130px;
	background-color: transparent;
	border: 5px solid black;
	position: absolute;
	z-index: 1;
	top: 5px;
	left: 5px;
	border-radius: 75px;
}
jQuery(document).ready(function() {
	jQuery({deg: 90}).animate({deg: 210}, {
		duration: 3000,
		step: function(i) {
			jQuery(".border_inner_bottom").css({"transform": "rotate("+i+"deg)"});
		}
	});
	var counter = 0;
	setInterval(function() {
		counter = ++counter;
		if(counter < 3) {
			jQuery({deg: 270}).animate({deg: 630}, {
				duration: 3000,
				step: function(i) {
					jQuery(".border_inner_top").css({"transform": "rotate("+i+"deg)"});
				}
			});
			jQuery({deg: 210}).animate({deg: 570}, {
				duration: 3000,
				step: function(i){
					jQuery(".border_inner_bottom").css({"transform": "rotate("+i+"deg)"});
				}
			});
		} 
		if(counter == 3) {
			jQuery({deg: 630}).animate({deg: 270}, {
				duration: 3000,
				step: function(i){
					jQuery(".border_inner_top").css({"transform": "rotate("+i+"deg)"});
				}
			});
			jQuery({deg: 570}).animate({deg: 90}, {
				duration: 3000,
				step: function(i){
					jQuery(".border_inner_bottom").css({"transform": "rotate("+i+"deg)"});
				}
			});
			
		}
		if(counter > 3) {
			jQuery({deg: 90}).animate({deg: 210}, {
				duration: 3000,
				step: function(i){
					jQuery(".border_inner_bottom").css({"transform": "rotate("+i+"deg)"});
				}
			});
			counter = 0;
		}
	}, 5000);
});

Kommentare

Kommentare können nur mit einer Verifizierten E-Mail-Adresse geschrieben werden, die E-Mail-Adresse muss einmal bestätigt werden.
@
(success)