卡卡网

本文介绍一个纯CSS实现的跳动的红心。

demodownload

实例介绍

纯CSS实现，一个小红心不断的跳动。

HTML代码

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

HTML代码非常简单，只有一个div，并且内容为空。

CSS代码

.heart {
  position: absolute;
  width: 50px;
  height: 50px;
  margin: auto;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  transform: rotate(-45deg);
  background-color: red;
  animation-name: beat;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}
.heart::after, .heart::before {
  content: "";
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: red;
}
.heart::after {
  left: 25px;
  top: 0px;
}
.heart::before {
  left: 0px;
  top: -25px;
}

@keyframes beat {
  0% {
    transform: scale(1) rotate(-45deg);
  }
  50% {
    transform: scale(1.5) rotate(-45deg);
  }
  100% {
    transform: scale(1) rotate(-45deg);
  }
}

CSS只有一个类，.heart，实现红色心形的样式。通过使用伪元素::after和::before，使用动画设计属性animation，来实现心形的跳动，详解 CSS3 animation 6个动画属性：animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction。另外，使用了transform属性，实现循环跳动效果，实例分析CSS3 transform。

总结

本文介绍了如何用纯CSS实现一个不断跳动的红心，代码简单清晰，使用方便。

相关文章

• 一图解释 animation-direction 属性 normal | reverse | alternate | alternate-reverse
• 一图解释 animation-timing-function 6个属性值的区别
• 一图了解animation-fill-mode: none|forwards|backwards|both各属性值
• 【实例】详解 CSS3 animation 6个动画属性
• 一图理解animation属性linear/ease/ease-in/ease-out/ease-in-out

• 详细介绍CSS+SVG创建圆圈/圆环动画
• [实例]纯 CSS SVG 画圆/圆环/圆弧动画
• 实例分析CSS3 transform: translateY() rotate() rotateY() rotateX()
• CSS3 transform: scale() 缩放转换【实例分析演示】
• 纯CSS实现的星光动画背景

标签: css  css红心  css跳动的红心  animation  动画