heckyel
/
css3kokoro


			
				
					
						
						
							
							<!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
            - https://htmlcss.fandom.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>