diff options
Diffstat (limited to 'index.html')
| -rw-r--r-- | index.html | 268 |
1 files changed, 268 insertions, 0 deletions
diff --git a/index.html b/index.html new file mode 100644 index 0000000..d681a6e --- /dev/null +++ b/index.html @@ -0,0 +1,268 @@ +<!DOCTYPE html> +<html lang="zxx"> + <head> + <meta charset="UTF-8"> + <title>ゆい are the CSS of my HTML</title> + <meta name="description" content="On this day of love and friendship, I want to tell you how much I love you in the best way I can do it... <3" /> + <style> + @import url(css/miniver.css); + /* This uses experimental CSS properties + ej: radial-gradient + - http://htmlcss.wikia.com/wiki/-moz-radial-gradient + - https://stackoverflow.com/questions/5715281/css-background-gradient-validation + */ + @-ms-keyframes heartbeat + { + 0% /* from */ + { + -ms-transform: scale(.5,.5) rotate(0deg); + } + + 25% + { + -ms-transform: scale(1,1) rotate(15deg); + } + + 50% + { + -ms-transform: scale(2,2) rotate(0deg); + } + + 75% + { + -ms-transform: scale(3,3) rotate(-15deg); + } + + 100% /* to */ + { + -ms-transform: scale(4,4) rotate(0deg); + } + } + + @-moz-keyframes heartbeat + { + 0% /* from */ + { + -moz-transform: scale(.5,.5) rotate(0deg); + } + + 25% + { + -moz-transform: scale(1,1) rotate(15deg); + } + + 50% + { + -moz-transform: scale(2,2) rotate(0deg); + } + + 75% + { + -moz-transform: scale(3,3) rotate(-15deg); + } + + 100% /* to */ + { + -moz-transform: scale(4,4) rotate(0deg); + } + } + + @-o-keyframes heartbeat + { + 0% /* from */ + { + -o-transform: scale(.5,.5) rotate(0deg); + } + + 25% + { + -o-transform: scale(1,1) rotate(15deg); + } + + 50% + { + -o-transform: scale(2,2) rotate(0deg); + } + + 75% + { + -o-transform: scale(3,3) rotate(-15deg); + } + + 100% /* to */ + { + -o-transform: scale(4,4) rotate(0deg); + } + } + + @-webkit-keyframes heartbeat + { + 0% /* from */ + { + -webkit-transform: scale(.5,.5) rotate(0deg); + } + + 25% + { + -webkit-transform: scale(1,1) rotate(15deg); + } + + 50% + { + -webkit-transform: scale(2,2) rotate(0deg); + } + + 75% + { + -webkit-transform: scale(3,3) rotate(-15deg); + } + + 100% /* to */ + { + -webkit-transform: scale(4,4) rotate(0deg); + } + } + + @keyframes heartbeat + { + 0% /* from */ + { + transform: scale(.5,.5) rotate(0deg); + } + + 25% + { + transform: scale(1,1) rotate(15deg); + } + + 50% + { + transform: scale(2,2) rotate(0deg); + } + + 75% + { + transform: scale(3,3) rotate(-15deg); + } + + 100% /* to */ + { + transform: scale(4,4) rotate(0deg); + } + } + + body + { + background: pink; + background-image: -ms-radial-gradient(center 45deg, circle cover, pink,crimson); + background-image: -moz-radial-gradient(center 45deg, circle cover, pink,crimson); + background-image: -o-radial-gradient(center 45deg, circle cover, pink,crimson); + background-image: -webkit-gradient(radial,50% 50%,0,50% 50%,800,from(pink),to(crimson)); + font-family: 'Miniver', cursive; + font-size: 16px; + text-align: center; + } + + h1 + { + + -webkit-animation: heartbeat 1s infinite 1s alternate ease; + -o-animation: heartbeat 1s infinite 1s alternate ease; + animation: heartbeat 1s infinite 1s alternate ease; + + -webkit-animation-play-state: running; + -moz-animation-play-state: running; + -o-animation-play-state: running; + animation-play-state: running; + + font-size: 2em; + left: 48%; + position: fixed; + text-shadow: .1em .1em .5em rgba(255,255,255,.8); + top: 48%; + z-index: 2; + } + + h2 + { + font-size: 3em; + position: relative; + text-shadow: .1em .1em .5em rgba(255,0,0,.5); + z-index: 3; + } + + .kokoro + { + /* + animation: name duration numberTimes delay direction type Acceleration + Address: normal, alternate + Types of acceleration: ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier (n, n, n, n) where n goes from 0 to 1 + Status animation: running or paused + */ + + -webkit-animation: heartbeat 2s infinite 1s alternate ease; + -o-animation: heartbeat 2s infinite 1s alternate ease; + animation: heartbeat 2s infinite 1s alternate ease; + + -webkit-animation-play-state: running; + -moz-animation-play-state: running; + -o-animation-play-state: running; + animation-play-state: running; + + left: 43%; + height: 180px; + position: fixed; + top: 45%; + width: 200px; + z-index: 1; + } + + .kokoro:after, .kokoro:before + { + background: red; + border-radius: 50px 50px 0 0; + box-shadow: .1em .1em .5em rgba(255,0,0,.8); + content: ""; + height: 160px; + left: 100px; + position: absolute; + + -webkit-transform: rotate(-45deg); + -moz-transform: rotate(-45deg); + -ms-transform: rotate(-45deg); + -o-transform: rotate(-45deg); + transform: rotate(-45deg); + + -webkit-transform-origin: 0 100%; + -moz-transform-origin: 0 100%; + -ms-transform-origin: 0 100%; + -o-transform-origin: 0 100%; + transform-origin: 0 100%; + + width: 100px; + } + + .kokoro:after + { + left: 0; + + -webkit-transform: rotate(45deg); + -moz-transform: rotate(45deg); + -ms-transform: rotate(45deg); + -o-transform: rotate(45deg); + transform: rotate(45deg); + + -webkit-transform-origin: 100% 100%; + -moz-transform-origin: 100% 100%; + -ms-transform-origin: 100% 100%; + -o-transform-origin: 100% 100%; + transform-origin: 100% 100%; + } + </style> + </head> + <body> + <h2>You are the CSS of my HTML</h2> + <h1>結衣</h1> + <div class="kokoro"></div> + </body> +</html> |