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 .........完整代码请登录后点击上方下载按钮下载查看