div+css实现旋转的爱心发散动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：div+css实现旋转的爱心发散动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
<style>
    @charset "UTF-8";
html, body {
  width: 100%;
  height: 100%;
}

body {
  background-color: #140032;
  overflow: hidden;
  margin: 0;
}
body * {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  border-radius: 50%;
}

.heart:nth-child(0) {
  transform: scale(0);
}
.heart:nth-child(1) {
  transform: scale(0.12);
}
.heart:nth-child(2) {
  transform: scale(0.24);
}
.heart:nth-child(3) {
  transform: scale(0.36);
}
.heart:nth-child(4) {
  transform: scale(0.48);
}
.heart:nth-child(5) {
  transform: scale(0.6);
}
.heart:nth-child(6) {
  transform: scale(0.72);
}
.heart:nth-child(7) {
  transform: scale(0.84);
}
.heart:nth-child(8) {
  transform: scale(0.96);
}
.heart:nth-child(9) {
  transform: scale(1.08);
}
.heart:nth-child(10) {
  transform: scale(1.2);
}
.heart .wave span {
  width: 10px;
  height: 150px;
  -webkit-animation: heart 6s ease-in-out infinite;
          animation: heart 6s ease-in-out infinite;
  transform-origin: top;
  border-left: 1px solid transparent;
}
.heart .wave span:after {
  content: "♥";
  position: absolute;
  top: -20px;
  left: calc(50% - 17px);
  font-size: 35px;
}
.heart .wave:nth-child(0) {
  transform: rotate(0deg) translate(150px);
}
.heart .wave:nth-child(0) span {
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
  border-color: #ffaa00;
}
.heart .wave:nth-child(0) span:after {
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
  color: #ffaa00;
}
.heart .wave:nth-child(1) {
  transform: rotate(9deg) translate(150px);
}
.heart .wave:nth-child(1) span {
  -webkit-animation-delay: -0.15s;
          animation-delay: -0.15s;
  border-color: #ff9500;
}
.heart .wave:nth-child(1) span:after {
  -webkit-animation-delay: -0.15s;
          animation-delay: -0.15s;
  color: #ff9500;
}
.heart .wave:nth-child(2) {
  transform: rotate(18deg) translate(150px);
}
.heart .wave:nth-child(2) span {
  -webkit-animation-delay: -0.3s;
          animation-delay: -0.3s;
  border-color: #ff8000;
}
.heart .wave:nth-child(2) span:after {
  -webkit-animation-delay: -0.3s;
          animation-delay: -0.3s;
  color: #ff8000;
}
.heart .wave:nth-child(3) {
  transform: rotate(27deg) translate(150px);
}
.heart .wave:nth-child(3) span {
  -webkit-animation-delay: -0.45s;
          animation-delay: -0.45s;
  border-color: #ff6a00;
}
.heart .wave:nth-child(3) span:after {
  -webkit-animation-delay: -0.45s;
          animation-delay: -0.45s;
  color: #ff6a00;
}
.heart .wave:nth-child(4) {
  transform: rotate(36deg) translate(150px);
}
.heart .wave:nth-child(4) span {
  -webkit-animation-delay: -0.6s;
          animation-delay: -0.6s;
  border-color: #ff5500;
}
.heart .wave:nth-child(4) span:after {
  -webkit-animation-delay: -0.6s;
          animation-delay: -0.6s;
  color: #ff5500;
}
.heart .wave:nth-child(5) {
  transform: rotate(45deg) translate(150px);
}
.heart .wave:nth-child(5) span {
  -webkit-animation-delay: -0.75s;
          animation-delay: -0.75s;
  border-color: #ff4000;
}
.heart .wave:nth-child(5) span:after {
  -webkit-animation-delay: -0.75s;
          animation-delay: -0.75s;
  color: #ff4000;
}
.heart .wave:nth-child(6) {
  transform: rotate(54deg) translate(150px);
}
.heart .wave:nth-child(6) span {
  -webkit-animation-delay: -0.9s;
          animation-delay: -0.9s;
  border-color: #ff2b00;
}
.heart .wave:nth-child(6) span:after {
  -webkit-animation-delay: -0.9s;
          animation-delay: -0.9s;
  color: #ff2b00;
}
.heart .wave:nth-child(7) {
  transform: rotate(63deg) translate(150px);
}
.heart .wave:nth-child(7) span {
  -webkit-animation-delay: -1.05s;
          animation-delay: -1.05s;
  border-color: #ff1500;
}
.heart .wave:nth-child(7) span:after {
  -webkit-animation-delay: -1.05s;
          animation-delay: -1.05s;
  color: #ff1500;
}
.heart .wave:nth-child(8) {
  transform: rotate(72deg) translate(150px);
}
.heart .wave:nth-child(8) span {
  -webkit-animation-delay: -1.2s;
          animation-delay: -1.2s;
  border-color: red;
}
.heart .wave:nth-child(8) span:after {
  -webkit-animation-delay: -1.2s;
          animation-delay: -1.2s;
  color: red;
}
.heart .wave:nth-child(9) {
  transform: rotate(81deg) translate(150px);
}
.heart .wave:nth-child(9) span {
  -webkit-animation-delay: -1.35s;
          animation-delay: -1.35s;
  border-color: #ff0015;
}
.heart .wave:nth-child(9) span:after {
  -webkit-animation-delay: -1.35s;
          animation-delay: -1.35s;
  color: #ff0015;
}
.heart .wave:nth-child(10) {
  transform: rotate(90deg) translate(150px);
}
.heart .wave:nth-child(10) span {
  -webkit-animation-delay: -1.5s;
          animation-delay: -1.5s;
  border-color: #ff002b;
}
.heart .wave:nth-child(10) span:after {
  -webkit-animation-delay: -1.5s;
          animation-delay: -1.5s;
  color: #ff002b;
}
.heart .wave:nth-child(11) {
  transform: rotate(99deg) translate(150px);
}
.heart .wave:nth-child(11) span {
  -webkit-animation-delay: -1.65s;
          animation-delay: -1.65s;
  border-color: #ff0040;
}
.heart .wave:nth-child(11) span:after {
  -webkit-animation-delay: -1.65s;
          animation-delay: -1.65s;
  color: #ff0040;
}
.heart .wave:nth-child(12) {
  transform: rotate(108deg) translate(150px);
}
.heart .wave:nth-child(12) span {
  -webkit-animation-delay: -1.8s;
          animation-delay: -1.8s;
  border-color: #ff0055;
}
.heart .wave:nth-child(12) span:after {
  -webkit-animation-delay: -1.8s;
          animation-delay: -1.8s;
  color: #ff0055;
}
.heart .wave:nth-child(13) {
  transform: rotate(117deg) translate(150px);
}
.heart .wave:nth-child(13) span {
  -webkit-animation-delay: -1.95s;
          animation-delay: -1.95s;
  border-color: #ff006a;
}
.heart .wave:nth-child(13) span:after {
  -webkit-animation-delay: -1.95s;
          animation-delay: -1.95s;
  color: #ff006a;
}
.heart .wave:nth-child(14) {
  transform: rotate(126deg) translate(150px);
}
.heart .wave:nth-child(14) span {
  -webkit-animation-delay: -2.1s;
          animation-delay: -2.1s;
  border-color: #ff0080;
}
.heart .wave:nth-child(14) span:after {
  -webkit-animation-delay: -2.1s;
          animation-delay: -2.1s;
  color: #ff0080;
}
.heart .wave:nth-child(15) {
  transform: rotate(135deg) translate(150px);
}
.heart .wave:nth-child(15) span {
  -webkit-animation-delay: -2.25s;
          animation-delay: -2.25s;
  border-color: #ff0095;
}
.heart .wave:nth-child(15) span:after {
  -webkit-animation-delay: -2.25s;
          animation-delay: -2.25s;
  color: #ff0095;
}
.heart .wave:nth-child(16) {
  transform: rotate(144deg) translate(150px);
}
.heart .wave:nth-child(16) span {
  -webkit-animation-delay: -2.4s;
          animation-delay: -2.4s;
  border-color: #ff00aa;
}
.heart .wave:nth-child(16) span:after {
  -webkit-animation-delay: -2.4s;
          animation-delay: -2.4s;
  color: #ff00aa;
}
.heart .wave:nth-child(17) {
  transform: rotate(153deg) translate(150px);
}
.heart .wave:nth-child(17) span {
  -webkit-animation-delay: -2.55s;
          animation-delay: -2.55s;
  border-color: #ff00bf;
}
.heart .wave:nth-child(17) span:after {
  -webkit-animation-delay: -2.55s;
          animation-delay: -2.55s;
  color: #ff00bf;
}
.heart .wave:nth-child(18) {
  transform: rotate(162deg) translate(150px);
}
.heart .wave:nth-child(18) span {
  -webkit-animation-delay: -2.7s;
          animation-delay: -2.7s;
  border-color: #ff00d5;
}
.heart .wave:nth-child(18) span:after {
  -webkit-animation-delay: -2.7s;
          animation-delay: -2.7s;
  color: #ff00d5;
}
.heart .wave:nth-child(19) {
  transform: rotate(171deg) translate(150px);
}
.heart .wave:nth-child(19) span {
  -webkit-animation-delay: -2.85s;
          animation-delay: -2.85s;
  border-color: #ff00ea;
}
.heart .wave:nth-child(19) span:after {
  -webkit-animation-delay: -2.85s;
          animation-delay: -2.85s;
  color: #ff00ea;
}
.heart .wave:nth-child(20) {
  transform: rotate(180deg) translate(150px);
}
.heart .wave:nth-child(20) span {
  -webkit-animation-delay: -3s;
   .........完整代码请登录后点击上方下载按钮下载查看