卡卡網(wǎng)

本文介紹一個(gè)純CSS實(shí)現(xiàn)的跳動(dòng)的紅心。

demodownload

實(shí)例介紹

純CSS實(shí)現(xiàn)，一個(gè)小紅心不斷的跳動(dòng)。

HTML代碼

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

HTML代碼非常簡(jiǎn)單，只有一個(gè)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只有一個(gè)類，.heart，實(shí)現(xiàn)紅色心形的樣式。通過(guò)使用偽元素::after和::before，使用動(dòng)畫(huà)設(shè)計(jì)屬性animation，來(lái)實(shí)現(xiàn)心形的跳動(dòng)，詳解 CSS3 animation 6個(gè)動(dòng)畫(huà)屬性：animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction。另外，使用了transform屬性，實(shí)現(xiàn)循環(huán)跳動(dòng)效果，實(shí)例分析CSS3 transform。

總結(jié)

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

相關(guān)文章

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

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

標(biāo)簽: css  css紅心  css跳動(dòng)的紅心  animation  動(dòng)畫(huà)