diff options
Diffstat (limited to 'style.css')
| -rw-r--r-- | style.css | 42 |
1 files changed, 36 insertions, 6 deletions
@@ -42,14 +42,14 @@ br{ flex-direction: column; justify-content:center; align-items:center; - width: 265px; + width: 215px; height: 215px; margin: 10px; background-color: rgba(220, 237, 200, 0.55); - /*border: 3px solid skyblue;*/ - border-radius: 2%; - transition-property: opacity, box-shadow; - transition-duration: 0.3s, 0.6s; + /* border: 8px solid skyblue; */ + border-radius: 50%; + transition-property: opacity, box-shadow, transform; + transition-duration: 0.3s, 0.6s, 0.8s; /*animation-name: spin; animation-duration: 2s; animation-iteration-count: infinite; @@ -70,14 +70,34 @@ a.text-link::after{ } .link:hover { - opacity: 0.6; + opacity: 0.75; box-shadow: 4px 4px chartreuse, -4px -4px chartreuse, -4px 4px chartreuse, 4px -4px chartreuse; + transform: scale(109%); /*animation-name: heylisten; animation-duration: 1.5s; animation-timing-function: linear; animation-iteration-count: infinite;*/ } +.linkimg1:hover { + content: url(img/mii.png); +} + +.linkimg2:hover { + content: url(img/ds.gif); +} + +.linkimg3:hover { + content: url(img/w800.png); +} + +.link img:hover { + animation-name: shakey; + animation-duration: 0.4s; + animation-timing-function: ease-in-out; + animation-iteration-count: infinite; +} + .link span{ font-family:tintin; font-size:1.5em; @@ -200,6 +220,16 @@ marquee{ transform:rotate(359deg); } } + +@keyframes shakey { + 25% { + transform: translateX(-5px) rotate(-5deg); + } + 75% { + transform: translateX(5px) rotate(5deg); + } +} + @keyframes foot-anim{ 0%{ color: #84008c; |