CSS如何做到心跳的动画

html-css024

CSS如何做到心跳的动画,第1张

.heart {

  color: #EB5E28

  animation: heathing 1s ease infinite

}

@keyframes heathing {

  0% {

    transform: scale(0.75)

  }

  20% {

    transform: scale(1)

  }

  40% {

    transform: scale(0.75)

  }

  60% {

    transform: scale(1)

  }

  80% {

    transform: scale(0.75)

  }

  100% {

    transform: scale(0.75)

  }

}

假定这个元素id=heart,则答案如此。

纯画的,颜色可调整代码:fill: #ff4400

<svg version="1.1" id="图形" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="58" height="58" viewBox="0 0 58 58" enable-background="new 0 0 58.636 58.678" xml:space="preserve" data-tags="pic" style="margin-left:2pxfill: #ff4400margin-top:2px"><path id="J_icon_svg" d="M510.0032-140.96c-5.1456 0-9.9584 1.1264-14.1824 3.3792-61.8752 30.7456-174.0544 114.6624-274.304 226.3808-52.608 58.5728-94.4128 116.5056-124.2624 172.16-34.8928 65.024-52.5568 125.5168-52.5568 179.9424 0 112.1024 52.2496 176.7168 96.128 211.2512 48.7168 38.3488 115.3792 61.2352 178.304 61.2352 39.04 0 79.4624-11.9808 120.0896-35.6608 29.7984-17.3824 54.1184-37.8112 70.784-53.5808 16.6144 15.7696 40.9856 36.1984 70.7584 53.5808 40.6528 23.68 81.0496 35.6608 120.1408 35.6608 62.8992 0 129.5616-22.8864 178.2528-61.2352 43.904-34.5344 96.2048-99.1488 96.2048-211.2512 0-54.4256-17.6896-114.9184-52.608-179.9424-29.8496-55.6544-71.6544-113.5616-124.2624-172.16-100.1984-111.6928-212.3776-195.6608-274.1504-226.432C519.8336-139.8592 515.0208-140.96 510.0032-140.96L510.0032-140.96zM319.1296 650.3616" transform="translate(16, 24) scale(1, -1) scale(0.025,0.025)" style="

"></path></svg>