svg描边爱心动画效果-html代码-BFW代码库

svg描边爱心动画效果

代码语言：html

所属分类：动画

代码描述：svg描边爱心动画效果

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
:root {
  --bgColor: rgb(17, 10, 28);
  --pink: rgb(252, 25, 127);
  --eggplant: rgb(142, 25, 252);
  --creamsicle: rgb(252, 150, 25);
  --black: #333;
  --baseFont: 16px;
  --iconSize: 40px;
  --iconColor: var(--eggplant);
}

body {
  background-color: var(--bgColor);
  font-family: Arial, sans-serif;
  font-size: var(--baseFont);
  color: var(--black);
  line-height: 150%;
}

.main--wrapper {
  position: relative;
  width: 100%;
  height: 100vh;
}
.main--wrapper .main-content {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  width: 600px;
  height: 100vh;
}

.icon {
  position: absolute;
  bottom: 10px;
  right: 10px;
  content: '';
  width: var(--iconSize);
  cursor: pointer;
  transition: transform 0.3s;
}
.icon circle {
  fill: var(--iconColor);
}
.icon:hover {
  transform: translateY(-5px);
}

.heart--container {
  width: 50px;
  height: auto;
}
.heart--container .heart {
  stroke-width: 15;
  stroke-dasharray: 500;
}
.heart--container .heart-1 {
  stroke: var(--pink);
  animation: draw 3s ease-in-out alternate infinite;
}
.heart--container .heart-2 {
  stroke: var(--eggplant);
  animation: draw 3s ease-in-out alternate infinite;
  animation-delay: 0.5s;
}
.heart--container .heart-3 {
  stroke: var(--creamsicle);
  animation: draw 3s ease-in-out alternate infinite;
  animatio.........完整代码请登录后点击上方下载按钮下载查看