Tạo trái tim động với CSS3

Mặc dù ngày lễ tình nhân đã qua cách đây vài ngày, nhưng dư âm của nó thì vẫn còn đọng lại rất nhiều nơi các bạn trẻ đang iu. Hôm nay, mình sẽ chia sẻ cho các bạn đang iu cách làm một trai tim động bằng CSS3, các bạn có thể gửi những tin nhắn iu thương cùng với trái tim trong bài viết này để gửi tặng cho một nửa của mình.

Xem Demo | Download

HTML

Trước hết , chúng ta cần có khung chuẩn html như sau :

<div class="container">
  <div class="heart"></div>
</div>

CSS

Và đây là toàn bộ đoạn css giúp các bạn tạo ảnh động cho trái tim của mình .

html, body {
  height: 100%;
  background-color: #FFEB94;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.container {
  position: relative;
  awidth: 50%;
  max-awidth: 365px;
  margin: 0 auto;
  top: 50%;
}
.heart {
  position: relative;
  awidth: 50%;
  padding-bottom: 50%;
  top: 50%;
  left: 50%;
  -moz-transform: translate(-50%, -50%) rotate(-135deg);
  -webkit-transform: translate(-50%, -50%) rotate(-135deg);
  -o-transform: translate(-50%, -50%) rotate(-135deg);
  -ms-transform: translate(-50%, -50%) rotate(-135deg);
  transform: translate(-50%, -50%) rotate(-135deg);
  background-color: #ff4351;
}
.heart:before,
.heart:after {
  content: "";
  display: block;
  position: absolute;
  awidth: 100%;
  padding-bottom: 100%;
  border-radius: 50%;
  background-color: inherit;
}
.heart:before {
  top: 50%;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-animation:  move-h 4s infinite;
  -moz-animation:     move-h 4s infinite;
  -o-animation:       move-h 4s infinite;
  animation:          move-h 4s infinite;
}
.heart:after {
  left: 50%;
  -moz-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  -webkit-animation:  move-v 4s -1s infinite;
  -moz-animation:     move-v 4s -1s infinite;
  -o-animation:       move-v 4s -1s infinite;
  animation:          move-v 4s -1s infinite;
}

@-webkit-keyframes move-h {
  0%    { left: -50%; }
  25%   { left: 50%; }
  50%   { left: 50%; }
  75%   { left: -50%; }
  100%  { left: -50%; }
}
@-moz-keyframes move-h {
  0%    { left: -50%; }
  25%   { left: 50%; }
  50%   { left: 50%; }
  75%   { left: -50%; }
  100%  { left: -50%; }
}
@-o-keyframes move-h {
  0%    { left: -50%; }
  25%   { left: 50%; }
  50%   { left: 50%; }
  75%   { left: -50%; }
  100%  { left: -50%; }
}
@keyframes move-h {
  0%    { left: -50%; }
  25%   { left: 50%; }
  50%   { left: 50%; }
  75%   { left: -50%; }
  100%  { left: -50%; }
}


@-webkit-keyframes move-v {
  0%    { top: -50%; }
  25%   { top: 50%; }
  50%   { top: 50%; }
  75%   { top: -50%; }
  100%  { top: -50%; }
}
@-moz-keyframes move-v {
  0%    { top: -50%; }
  25%   { top: 50%; }
  50%   { top: 50%; }
  75%   { top: -50%; }
  100%  { top: -50%; }
}
@-o-keyframes move-v {
  0%    { top: -50%; }
  25%   { top: 50%; }
  50%   { top: 50%; }
  75%   { top: -50%; }
  100%  { top: -50%; }
}
@keyframes move-v {
  0%    { top: -50%; }
  25%   { top: 50%; }
  50%   { top: 50%; }
  75%   { top: -50%; }
  100%  { top: -50%; }
}

Chúc các bạn có thể gửi nhắn những lời yêu thương đến cho một nửa của mình , và hãy nhớ iu nhau bằng cả trái tim nhé.

Chuyên Mục: Css

Bài viết được đăng bởi webmaster