svg+css实现炫酷点赞动画效果代码-html代码-BFW代码库

svg+css实现炫酷点赞动画效果代码

代码语言：html

所属分类：动画

代码描述：svg+css实现炫酷点赞动画效果代码

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

    <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%;
      transform: scale(0.3);
      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, transform 0.2s 1s, fill 0.2s 1s, opacity 0.2s 1.2s;
      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 {
      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;
      transform: translateY(-100px);
      background: #00e5ff;
      transition: transform 1s, opacity 0.5s 1s, background 0.1s 0.2s;
    }
    body.liked div.dot:after {
      display: block;
    }
    body.liked div.dot.dot-2 {
      transform: rotate(45deg) translateY(-100px);
    }
    body.liked div.dot.dot-3 {
      transform: rotate(90deg) translateY(-100px);
    }
    body.liked div.dot.dot-4 {
      transform: rotate(135deg) translateY(-100px);
    }
    body.liked div.dot.dot-5 {
      transform: rotate(180deg) translateY(-100px);
    }
    body.liked div.dot.dot-6 {
      transform: rotate(225deg) translateY(-100px);
    }
    body.liked div.dot.dot-7 {
      transform: rotate(270deg) translateY(-100px);
    }
    body.liked div.dot.dot-8 {
      transform: rotate(305deg) translateY(-100px);
    }
    
    @-webkit-keyframes blink {
      10% {
        transform: scale(0.42);
        background: #8815b7;
      }
      100% {
        background: #e01f4f;
      }
    }
    
    @keyframes blink {
      10% {
        transform: scale(0.42);
        background: #8815b7;
      }
      100% {
        background: #e01f4f;
      }
    }
    @-we.........完整代码请登录后点击上方下载按钮下载查看