Styles
CSS examples
a {
text-decoration:none;
}
.crazy a {
color: linear-gradient(0.25turn, #3f87a6, #ebf8e1, #f69d3c);
}
Transitions
-
blur
img { filter: blur(3px) grayscale(1); transition: all 1s ease-in-out; } img:hover{ filter:none; }
-
transform
img { transform:none; transition: all 1s ease-in-out; } img:hover{ transform: scale(1.1) rotate(5deg); }
Animations
-
blur/slide
details[open] { animation: focusing 0.75s ease-out; } @keyframes focusing { 0% {transform: translatex(100%) scale(1); filter: blur(1px);} 25% {transform: translatex(100%) scale(1.0);filter: blur(3px);} 75% {transform: scale(1.05); filter: blur(1px);} 90% {transform: scale(1); filter: none;} }
-
transform
nav li:hover { animation: wiggle 20s infinite linear; } @keyframes wiggle { 0%,1%, 2% {transform: rotateZ(3deg);} 0.5%, 1.5%, 2.5% {transform: rotateZ(-3deg);} 3.5%, 6.0%, 10% {transform: scale(1) rotateZ(0deg);} 4.0% {transform: scale(1.05);} }