svg心动画

下载代码

html

css

分享到微信朋友圈

html

css

: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;
  animation-delay: 1s;
}

@keyframes draw {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: 500;
  }
}

JavaScript

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg