Styles
CSS basic
a { text-decoration:none; } .crazy a { color: linear-gradient(0.25turn, #3f87a6, #ebf8e1, #f69d3c); }
font
@import url('https://fonts.googleapis.com/css?family=Merriweather'); @import url('https://fonts.googleapis.com/css?family=Luckiest+Guy'); h1, h2, h3{ font-family: Merriweather,sans; } h1::first-letter, h2::first-letter, h3::first-letter { font: 200% oblique bold 'Luckiest Guy', sans; }
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);} }