卡卡網(wǎng)

本文介紹一個純CSS實現(xiàn)的跳動的紅心。

demodownload

實例介紹

純CSS實現(xiàn)，一個小紅心不斷的跳動。

HTML代碼

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

HTML代碼非常簡單，只有一個div，并且內(nèi)容為空。

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，實現(xiàn)紅色心形的樣式。通過使用偽元素::after和::before，使用動畫設(shè)計屬性animation，來實現(xiàn)心形的跳動，詳解 CSS3 animation 6個動畫屬性：animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction。另外，使用了transform屬性，實現(xiàn)循環(huán)跳動效果，實例分析CSS3 transform。

總結(jié)

本文介紹了如何用純CSS實現(xiàn)一個不斷跳動的紅心，代碼簡單清晰，使用方便。

相關(guān)文章

• 一圖解釋 animation-direction 屬性 normal | reverse | alternate | alternate-reverse
• 一圖解釋 animation-timing-function 6個屬性值的區(qū)別
• 一圖了解animation-fill-mode: none|forwards|backwards|both各屬性值
• 【實例】詳解 CSS3 animation 6個動畫屬性
• 一圖理解animation屬性linear/ease/ease-in/ease-out/ease-in-out

• 詳細(xì)介紹CSS+SVG創(chuàng)建圓圈/圓環(huán)動畫
• [實例]純 CSS SVG 畫圓/圓環(huán)/圓弧動畫
• 實例分析CSS3 transform: translateY() rotate() rotateY() rotateX()
• CSS3 transform: scale() 縮放轉(zhuǎn)換【實例分析演示】
• 純CSS實現(xiàn)的星光動畫背景

標(biāo)簽: css  css紅心  css跳動的紅心  animation  動畫