CSS - Pink-Cube-Animation
<style>
#square {
background-color: rgba(255,20,147, 0.5);
background-image: repeating-radial-gradient(circle, hotpink 40%, deeppink 50%);
width: 100px;
height: 100px;
margin: 100px auto 100px auto;
border: Double 20px pink;
outline: Dotted 12px lightpink;
outline-offset: 10px;
border-radius: 10px;
animation-name: rotateAnimation;
animation-duration: 5s; /* Dauer */
animation-delay: 3s /* Verzögerung */
animation-timing-function: linear; /* linear, ease, ease-in, ease-out, ease-in-out, steps(10, start), steps(5, end) */
animation-direction: alternate; /* normal, alternate, reverse , alternate-reverse */
animation-fill-mode: both; /* forwards, backwards, both */
animation-iteration-count: infinite; /* <number>, infinite */
animation-play-state: running; /* running, paused */
box-shadow: 0px 0px 7px 2px deeppink, inset 0px 0px 25px 10px pink;
filter: drop-shadow(0px 0px 25px deeppink);
}
@keyframes rotateAnimation {
from {
transform: rotate(3turn);
}
to {
transform: rotate(360);
}
}
</style>
<div id="square"></div>
Bausteine Alle Anzeigen
Eine zufällige Auswahl von Codeschnipseln
aus den Bereichen
HTML, CSS,
PHP, JavaScript und
MySQL.
<abbr> Abkürzung
PHP - Alle PHP Funktionen auflisten