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.

tao-trai-tim-dong-voi-css3

Demo

 

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é.

ĐỂ LẠI PHẢN HỒI CỦA BẠN TẠI ĐÂY

Phản hồi về bài viết này

NO COMMENTS

LEAVE A REPLY


*