jquery心形加载动画

jQuery是一个流行的JavaScript库，它简化了HTML文档遍历、事件处理、动画效果等操作。心形加载动画是一种常见的网页加载效果，可以通过jQuery来实现。

以下是一个简单的示例代码，实现了一个心形加载动画：

HTML部分：

<div class="loader"></div>

CSS部分：

.loader {
  width: 50px;
  height: 50px;
  position: relative;
  margin: 0 auto;
}

.loader:before,
.loader:after {
  content: "";
  position: absolute;
  top: 0;
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.loader:before {
  left: -25px;
  background-color: #ff0000;
  animation: loader-animation 1s infinite ease-in-out;
}

.loader:after {
  left: 25px;
  background-color: #ff0000;
  animation: loader-animation 1s infinite ease-in-out reverse;
}

@keyframes loader-animation {
  0% {
    transform: scale(0);
    opacity: 0.5;
  }
  50% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(0);
    opacity: 0.5;
  }
}

JavaScript部分：

$(document).ready(function() {
  // 在页面加载完成后执行
  $(".loader").show(); // 显示加载动画
});

以上代码定义了一个名为"loader"的div元素，通过CSS设置了心形的样式和动画效果。在JavaScript部分，使用jQuery的`$(document).ready()`函数来确保页面加载完成后执行代码，通过`.show()`方法显示加载动画。