Advertisement
Guest User

Heart

a guest
Mar 6th, 2013
153
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 2.69 KB | None | 0 0
  1. @-webkit-keyframes beat {
  2.     0% {-webkit-transform: scale(1) rotate(225deg); -webkit-box-shadow:0 0 40px rgba(213,9,60,1);}
  3.     50% {-webkit-transform: scale(1.1) rotate(225deg); -webkit-box-shadow:0 0 70px rgba(213,9,60,0.6);}
  4.     100% {-webkit-transform: scale(1) rotate(225deg); -webkit-box-shadow:0 0 40px rgba(213,9,60,1);}
  5. }
  6. @-moz-keyframes beat {  
  7.     0% {-moz-transform: scale(1) rotate(225deg); -moz-box-shadow:0 0 40px rgba(213,9,60,1);}
  8.     50% {-moz-transform: scale(1.1) rotate(225deg); -moz-box-shadow:0 0 70px rgba(213,9,60,0.6);}
  9.     100% {-moz-transform: scale(1) rotate(225deg); -moz-box-shadow:0 0 40px rgba(213,9,60,1);}
  10. }
  11. @keyframes beat {  
  12.     0% {transform: scale(1) rotate(225deg); box-shadow:0 0 40px #d5093c;}
  13.     50% {transform: scale(1.1) rotate(225deg); box-shadow:0 0 70px #d5093c;}
  14.     100% {transform: scale(1) rotate(225deg); box-shadow:0 0 40px #d5093c;}
  15. }
  16.  
  17. #background {
  18.     position:fixed;
  19.     top:0;
  20.     left:0;
  21.     z-index:-1;
  22.     width:100%;
  23.     height:100%;
  24.     background: #ffa5a5;
  25.     background: -moz-linear-gradient(top,  #ffa5a5 0%, #ffd3d3 100%);
  26.     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffa5a5), color-stop(100%,#ffd3d3));
  27.     background: -webkit-linear-gradient(top,  #ffa5a5 0%,#ffd3d3 100%);
  28.     background: linear-gradient(top,  #ffa5a5 0%,#ffd3d3 100%);
  29. }
  30. #chest {
  31.     position:relative;
  32.     width:500px;
  33.     height:450px;
  34.     margin:0 auto;
  35. }
  36. .heart {
  37.     position:absolute;
  38.     z-index:2;
  39.     background: -moz-linear-gradient(-180deg,  #F50A45 0%, #d5093c 40%);
  40.     background: -webkit-gradient(linear, right 50%, left 50%, color-stop(0%,#F50A45), color-stop(40%,#d5093c));
  41.     background: -webkit-linear-gradient(-180deg,  #F50A45 0%,#d5093c 40%);
  42.     background: linear-gradient(-180deg,  #F50A45 0%,#d5093c 40%);
  43.     -webkit-animation: beat 0.7s ease 0s infinite normal;
  44.     -moz-animation: beat 0.7s ease 0s infinite normal;
  45.     animation: beat 0.7s ease 0s infinite normal;
  46. }
  47. .heart.center {
  48.     background: -moz-linear-gradient(-45deg,  #B80734 0%, #d5093c 40%);
  49.     background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#B80734), color-stop(40%,#d5093c));
  50.     background: -webkit-linear-gradient(-45deg,  #B80734 0%,#d5093c 40%);
  51.     background: linear-gradient(-45deg,  #B80734 0%,#d5093c 40%);
  52. }
  53. .heart.top {
  54.     z-index:3;
  55. }
  56. .side {
  57.     top:50px;
  58.     width:220px;
  59.     height:220px;
  60.     -moz-border-radius: 220px;
  61.     -webkit-border-radius: 220px;
  62.     border-radius: 220px;
  63. }
  64. .center {
  65.     width:210px;
  66.     height:210px;
  67.     bottom:100px;
  68.     left:145px;
  69.     font-size:0;
  70.     text-indent:-9999px;
  71. }
  72. .left {
  73.     left:62px;
  74. }
  75. .right {
  76.     right:62px;
  77. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement