css实现爱心按钮点击绽放爱心动画效果代码-html代码-BFW代码库

css实现爱心按钮点击绽放爱心动画效果代码

代码语言：html

所属分类：动画

代码描述：css实现爱心按钮点击绽放爱心动画效果代码

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

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>SVG和CSS3实现的爱心Like按钮DEMO演示</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  position: relative;
}

svg.like {
  position: fixed;
  z-index: 10;
  top: calc(50vh - 160px);
  left: calc(50vw - 160px);
  border-radius: 100%;
  -webkit-transform: scale(0.3);
          transform: scale(0.3);
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  box-shadow: 0 0 250px rgba(0, 0, 0, 0.4);
  background: #212121;
  cursor: pointer;
}

svg.fly {
  position: fixed;
  top: calc(50vh - 55px);
  left: calc(50vw - 55px);
  fill: #18FFFF;
}

svg.h {
  position: fixed;
  z-index: 8;
  top: calc(50vh - 20px);
  left: calc(50vw - 20px);
  fill: #fbff00;
}
svg.h.h-5, svg.h.h-6, svg.h.h-7, svg.h.h-8 {
  fill: #00ffb8;
}

div.dot {
  width: 12px;
  height: 12px;
  background: white;
  position: fixed;
  z-index: 9;
  border-radius: 100%;
  top: calc(50vh - 6px);
  left: calc(50vw - 6px);
}
div.dot:before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 100%;
  top: -20px;
  left: 2px;
  position: absolute;
  background: white;
}
div.dot:after {
  content: "";
  width: 11px;
  height: 11px;
  border-radius: 100%;
  top: -160px;
.........完整代码请登录后点击上方下载按钮下载查看