diff options
| -rw-r--r-- | index.html | 4 | ||||
| -rw-r--r-- | style.css | 27 |
2 files changed, 16 insertions, 15 deletions
diff --git a/index.html b/index.html index 5b42cf7..994d99c 100644 --- a/index.html +++ b/index.html @@ -1,11 +1,11 @@ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> - <title>Andrew Yu's WIP website</title> + <title>Andrew Yu's Website</title> <link rel="stylesheet" href="/style.css" /> </head> <body> - <h1>Andrew Yu's WIP website</h1> + <h1>Andrew Yu's Website</h1> <div id="nav"> <ul> <li><a href="https://www.andrewyu.org">Home</a></li> diff --git a/style.css b/style.css index 798f690..c881cc7 100644 --- a/style.css +++ b/style.css @@ -79,27 +79,23 @@ a:active { #nav ul li { display: inline; padding: 0 1.5em; + border: none; } #nav ul li a { font-weight: bold; } -@keyframes borderBlinkRed { - 0% { - border-color: transparent; - } - 50% { - border-color: red; - } -} #campaign { color: red; display: block; border: 1px solid red; - animation-name: borderBlinkRed; - animation-duration: .2s; - animation-timing-function: step-end; - animation-iteration-count: 20; - animation-direction: alternate; + transition: font-size 3s, transform 0.3s; +} +#campaign:hover{ + font-size: 200%; + transition: font-size 0.3s, transform 0.3s; + animation-name: shake; + animation-iteration-count: 8; + animation-duration: 0.3s; } .alarm { color: red; @@ -113,3 +109,8 @@ a:active { color: lime; border: solid lime 1px; } +@keyframes shake { + 0%, 100% {transform: rotate(0deg);} + 10%, 30%, 50%, 70%, 90% {transform: rotate(-7deg);} + 20%, 40%, 60%, 80% {transform: rotate(7deg);} +} |