Heart in CSS3 for Valentine's Day
css
html

index.html 7.2KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268
  1. <!DOCTYPE html>
  2. <html lang="zxx">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>ゆい are the CSS of my HTML</title>
  6. <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" />
  7. <style>
  8. @import url(css/miniver.css);
  9. /* This uses experimental CSS properties
  10. ej: radial-gradient
  11. - http://htmlcss.wikia.com/wiki/-moz-radial-gradient
  12. - https://stackoverflow.com/questions/5715281/css-background-gradient-validation
  13. */
  14. @-ms-keyframes heartbeat
  15. {
  16. 0% /* from */
  17. {
  18. -ms-transform: scale(.5,.5) rotate(0deg);
  19. }
  20. 25%
  21. {
  22. -ms-transform: scale(1,1) rotate(15deg);
  23. }
  24. 50%
  25. {
  26. -ms-transform: scale(2,2) rotate(0deg);
  27. }
  28. 75%
  29. {
  30. -ms-transform: scale(3,3) rotate(-15deg);
  31. }
  32. 100% /* to */
  33. {
  34. -ms-transform: scale(4,4) rotate(0deg);
  35. }
  36. }
  37. @-moz-keyframes heartbeat
  38. {
  39. 0% /* from */
  40. {
  41. -moz-transform: scale(.5,.5) rotate(0deg);
  42. }
  43. 25%
  44. {
  45. -moz-transform: scale(1,1) rotate(15deg);
  46. }
  47. 50%
  48. {
  49. -moz-transform: scale(2,2) rotate(0deg);
  50. }
  51. 75%
  52. {
  53. -moz-transform: scale(3,3) rotate(-15deg);
  54. }
  55. 100% /* to */
  56. {
  57. -moz-transform: scale(4,4) rotate(0deg);
  58. }
  59. }
  60. @-o-keyframes heartbeat
  61. {
  62. 0% /* from */
  63. {
  64. -o-transform: scale(.5,.5) rotate(0deg);
  65. }
  66. 25%
  67. {
  68. -o-transform: scale(1,1) rotate(15deg);
  69. }
  70. 50%
  71. {
  72. -o-transform: scale(2,2) rotate(0deg);
  73. }
  74. 75%
  75. {
  76. -o-transform: scale(3,3) rotate(-15deg);
  77. }
  78. 100% /* to */
  79. {
  80. -o-transform: scale(4,4) rotate(0deg);
  81. }
  82. }
  83. @-webkit-keyframes heartbeat
  84. {
  85. 0% /* from */
  86. {
  87. -webkit-transform: scale(.5,.5) rotate(0deg);
  88. }
  89. 25%
  90. {
  91. -webkit-transform: scale(1,1) rotate(15deg);
  92. }
  93. 50%
  94. {
  95. -webkit-transform: scale(2,2) rotate(0deg);
  96. }
  97. 75%
  98. {
  99. -webkit-transform: scale(3,3) rotate(-15deg);
  100. }
  101. 100% /* to */
  102. {
  103. -webkit-transform: scale(4,4) rotate(0deg);
  104. }
  105. }
  106. @keyframes heartbeat
  107. {
  108. 0% /* from */
  109. {
  110. transform: scale(.5,.5) rotate(0deg);
  111. }
  112. 25%
  113. {
  114. transform: scale(1,1) rotate(15deg);
  115. }
  116. 50%
  117. {
  118. transform: scale(2,2) rotate(0deg);
  119. }
  120. 75%
  121. {
  122. transform: scale(3,3) rotate(-15deg);
  123. }
  124. 100% /* to */
  125. {
  126. transform: scale(4,4) rotate(0deg);
  127. }
  128. }
  129. body
  130. {
  131. background: pink;
  132. background-image: -ms-radial-gradient(center 45deg, circle cover, pink,crimson);
  133. background-image: -moz-radial-gradient(center 45deg, circle cover, pink,crimson);
  134. background-image: -o-radial-gradient(center 45deg, circle cover, pink,crimson);
  135. background-image: -webkit-gradient(radial,50% 50%,0,50% 50%,800,from(pink),to(crimson));
  136. font-family: 'Miniver', cursive;
  137. font-size: 16px;
  138. text-align: center;
  139. }
  140. h1
  141. {
  142. -webkit-animation: heartbeat 1s infinite 1s alternate ease;
  143. -o-animation: heartbeat 1s infinite 1s alternate ease;
  144. animation: heartbeat 1s infinite 1s alternate ease;
  145. -webkit-animation-play-state: running;
  146. -moz-animation-play-state: running;
  147. -o-animation-play-state: running;
  148. animation-play-state: running;
  149. font-size: 2em;
  150. left: 48%;
  151. position: fixed;
  152. text-shadow: .1em .1em .5em rgba(255,255,255,.8);
  153. top: 48%;
  154. z-index: 2;
  155. }
  156. h2
  157. {
  158. font-size: 3em;
  159. position: relative;
  160. text-shadow: .1em .1em .5em rgba(255,0,0,.5);
  161. z-index: 3;
  162. }
  163. .kokoro
  164. {
  165. /*
  166. animation: name duration numberTimes delay direction type Acceleration
  167. Address: normal, alternate
  168. 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
  169. Status animation: running or paused
  170. */
  171. -webkit-animation: heartbeat 2s infinite 1s alternate ease;
  172. -o-animation: heartbeat 2s infinite 1s alternate ease;
  173. animation: heartbeat 2s infinite 1s alternate ease;
  174. -webkit-animation-play-state: running;
  175. -moz-animation-play-state: running;
  176. -o-animation-play-state: running;
  177. animation-play-state: running;
  178. left: 43%;
  179. height: 180px;
  180. position: fixed;
  181. top: 45%;
  182. width: 200px;
  183. z-index: 1;
  184. }
  185. .kokoro:after, .kokoro:before
  186. {
  187. background: red;
  188. border-radius: 50px 50px 0 0;
  189. box-shadow: .1em .1em .5em rgba(255,0,0,.8);
  190. content: "";
  191. height: 160px;
  192. left: 100px;
  193. position: absolute;
  194. -webkit-transform: rotate(-45deg);
  195. -moz-transform: rotate(-45deg);
  196. -ms-transform: rotate(-45deg);
  197. -o-transform: rotate(-45deg);
  198. transform: rotate(-45deg);
  199. -webkit-transform-origin: 0 100%;
  200. -moz-transform-origin: 0 100%;
  201. -ms-transform-origin: 0 100%;
  202. -o-transform-origin: 0 100%;
  203. transform-origin: 0 100%;
  204. width: 100px;
  205. }
  206. .kokoro:after
  207. {
  208. left: 0;
  209. -webkit-transform: rotate(45deg);
  210. -moz-transform: rotate(45deg);
  211. -ms-transform: rotate(45deg);
  212. -o-transform: rotate(45deg);
  213. transform: rotate(45deg);
  214. -webkit-transform-origin: 100% 100%;
  215. -moz-transform-origin: 100% 100%;
  216. -ms-transform-origin: 100% 100%;
  217. -o-transform-origin: 100% 100%;
  218. transform-origin: 100% 100%;
  219. }
  220. </style>
  221. </head>
  222. <body>
  223. <h2>You are the CSS of my HTML</h2>
  224. <h1>結衣</h1>
  225. <div class="kokoro"></div>
  226. </body>
  227. </html>