Tạo trái tim động bằng CSS3

Cập nhật: Lượt xem: 638 [ Css ]

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 yêu 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.

Tạo trái tim động bằng CSS3

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;
  width: 50%;
  max-width: 365px;
  margin: 0 auto;
  top: 50%;
}
.heart {
  position: relative;
  width: 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;
  width: 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é.