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

代码语言：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;
  left: 2px;
  position: absolute;
  background: white;
  display: none;
}

body {
  background-image: linear-gradient(-10deg, #7028e4 0%, #e5b2ca 100%);
  width: 100vw;
  height: 100vh;
}
body.liked svg.like {
  -webkit-animation: blink 1s forwards;
          animation: blink 1s forwards;
}
body.liked svg.fly.fly-1 {
  -webkit-animation: fly-1 1s 0.1s;
          animation: fly-1 1s 0.1s;
}
body.liked svg.fly.fly-2 {
  -webkit-animation: fly-2 1s 0.1s;
          animation: fly-2 1s 0.1s;
}
body.liked svg.h {
  transition: margin cubic-bezier(0.165, 0.84, 0.44, 1) 1.4s, fill 0.2s 1s, opacity 0.2s 1.2s, -webkit-transform 0.2s 1s;
  transition: margin cubic-bezier(0.165, 0.84, 0.44, 1) 1.4s, transform 0.2s 1s, fill 0.2s 1s, opacity 0.2s 1.2s;
  transition: margin cubic-bezier(0.165, 0.84, 0.44, 1) 1.4s, transform 0.2s 1s, fill 0.2s 1s, opacity 0.2s 1.2s, -webkit-transform 0.2s 1s;
  opacity: 0;
}
body.liked svg.h.h-5, body.liked svg.h.h-6, body.liked svg.h.h-7, body.liked svg.h.h-8 {
  -webkit-transform: scale(1.5);
          transform: scale(1.5);
  fill: white;
}
body.liked svg.h.h-1 {
  margin-top: -200px;
}
body.liked svg.h.h-2 {
  margin-left: 200px;
}
body.liked svg.h.h-3 {
  margin-top: 200px;
}
body.liked svg.h.h-4 {
  margin-left: -200px;
}
body.liked svg.h.h-5 {
  margin-top: -140px;
  margin-left: 140px;
}
body.liked svg.h.h-6 {
  margin-top: 140px;
  margin-left: 140px;
}
body.liked svg.h.h-7 {
  margin-top: -140px;
  margin-left: -140px;
}
body.liked svg.h.h-8 {
  margin-top: 140px;
  margin-left: -140px;
}
body.liked div.dot {
  opacity: 0;
  -webkit-transform: translateY(-100px);
          transform: translateY(-100px);
  background: #00e5ff;
  transition: opacity 0.5s 1s, background 0.1s 0.2s, -webkit-transform 1s;
  transition: transform 1s, opacity 0.5s 1s, background 0.1s 0.2s;
  transition: transform 1s, opacity 0.5s 1s, background 0.1s 0.2s, -webkit-transform 1s;
}
body.liked div.dot:after {
  display: block;
}
body.liked div.dot.dot-2 {
  -webkit-transform: rotate(45deg) translateY(-100px);
          transform: rotate(45deg) translateY(-100px);
}
body.liked div.dot.dot-3 {
  -webkit-transform: rotate(90deg) translateY(-100px);
          transform: rotate(90deg) translateY(-100px);
}
body.liked div.dot.dot-4 {
  -webkit-transform: rotate(135deg) translateY(-100px);
          transform: rotate(135deg) translateY(-100px);
}
body.liked div.dot.dot-5 {
  -webkit-transform: rotate(180deg) translateY(-100px);
          transform: rotate(180deg) translateY(-100px);
}
body.liked div.dot.dot-6 {
  -webkit-transform: rotate(225deg) translateY(-100px);
          transform: rotate(225deg) translateY(-100px);
}
body.liked div.dot.dot-7 {
  -webkit-transform: rotate(270deg) translateY(-100px);
          transform: rotate(270deg) translateY(-100px);
}
body.liked div.dot.dot-8 {
  -webkit-transform: rotate(305deg) translateY(-100px);
          transfo.........完整代码请登录后点击上方下载按钮下载查看