123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268 |
- <!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>
|