"
Team:NCTU Formosa/source/header-human practice
From 2014.igem.org
(Difference between revisions)
Alex19950425 (Talk | contribs) |
|||
| Line 1: | Line 1: | ||
<html> | <html> | ||
<style> | <style> | ||
| - | + | .letter-container h2 a { | |
| + | text-align: center; | ||
| + | font-size: 130px; | ||
| + | line-height: 160px; | ||
| + | display: block; | ||
| + | padding-bottom: 30px; | ||
| + | mask: url(../images/mask.png) repeat; | ||
| + | } | ||
| + | .letter-container h2 a span { | ||
| + | color: #fff; | ||
| + | opacity: 1; | ||
| + | text-shadow: 0px 0px 2px #fff, 1px 1px 4px rgba(0,0,0,0.7); | ||
| + | transition: all 0.3s linear; | ||
| + | animation: sharpen 0.9s linear backwards; | ||
| + | } | ||
| + | .letter-container h2 a span:hover{ | ||
| + | text-shadow: 0px 0px 40px #fff; | ||
| + | } | ||
| + | .letter-container h2 a span:nth-child(1) { | ||
| + | animation-delay: 0s; | ||
| + | } | ||
| + | .letter-container h2 a span:nth-child(2) { | ||
| + | animation-delay: 0.1s; | ||
| + | } | ||
| + | .letter-container h2 a span:nth-child(3) { | ||
| + | animation-delay: 0.2s; | ||
| + | } | ||
| + | /* ...and so on for all the letters */ | ||
| + | |||
| + | @keyframes sharpen { | ||
| + | 0% { | ||
| + | opacity: 0; | ||
| + | text-shadow: 0px 0px 100px #fff; | ||
| + | color: transparent; | ||
| + | } | ||
| + | 90% { | ||
| + | opacity: 0.9; | ||
| + | text-shadow: 0px 0px 10px #fff; | ||
| + | color: transparent; | ||
| + | } | ||
| + | 100% { | ||
| + | color: #fff; | ||
| + | opacity: 1; | ||
| + | text-shadow: 0px 0px 2px #fff, 1px 1px 4px rgba(0,0,0,0.7); | ||
| + | } | ||
| + | } | ||
Revision as of 13:33, 8 October 2014
