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.

<link> Logische Beziehung

CSS - Markieren von Text verhindern

PHP - Mit PHP 5 E-Mail-Adresse sicher prüfen

JavaScript - BBCode in einem Textarea einfügen

MySQL - Datum vom Timestamp anzeigen