CSS - Pink-Cube-Animation


<style>

#square {
  
background-colorrgba(255,20,1470.5);
  
background-imagerepeating-radial-gradient(circlehotpink 40%, deeppink 50%);
  
width100px;
  
height100px;
  
margin100px auto 100px auto;
  
borderDouble 20px pink;
  
outlineDotted 12px lightpink;
  
outline-offset10px;
  
border-radius10px;

  
animation-namerotateAnimation;
  
animation-duration5s/* Dauer */
  
animation-delay3s /* Verzögerung */
  
animation-timing-function: linear/* linear, ease, ease-in, ease-out, ease-in-out, steps(10, start),  steps(5, end) */
  
animation-directionalternate/* normal, alternate, reverse , alternate-reverse */
  
animation-fill-modeboth/* forwards, backwards, both */
  
animation-iteration-countinfinite/* <number>, infinite */
  
animation-play-staterunning/* running, paused */
  
box-shadow0px 0px 7px 2px deeppinkinset  0px 0px 25px 10px pink;
  
filterdrop-shadow(0px 0px 25px deeppink);
}

@
keyframes rotateAnimation {
  
from {
    
transformrotate(3turn);
  }
  
to {
    
transformrotate(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

CSS - Pflichtfeld hervorheben

PHP - Alle PHP Funktionen auflisten

JavaScript - Geladenes Stylesheet austauschen

MySQL - Zufällige Datensätze auslesen

Leuchtende Navigation
Lassen Sie ihre Navigation dadurch leuchten, dass jeder sich zurechtfindet, Einer der wichtigsten Punkte ist dem Besucher den Weg zu seinen Informationen so schnell und einfach wie nur möglich zu gestalten. Um effizient arbeiten zu können, hilft es oftmals, sich in die Lage des Besuchers zu versetzen, denn der einzige Weg eine optimale Navigation für Ihre Webseite zu planen und zu entwerfen ist genauso zu denken, wie es ein typischer Besucher tun würde.