TweenMax+svg实现情人节男女拥抱亲嘴表白动画效果代码-html代码-BFW代码库

TweenMax+svg实现情人节男女拥抱亲嘴表白动画效果代码

代码语言：html

所属分类：表白

代码描述：TweenMax+svg实现情人节男女拥抱亲嘴表白动画效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">



    <style>
        *, *:before, *:after {
          box-sizing: border-box;
        }
        
         body {
          margin: 0;
          padding: 0;
          background-color: #ca57a5;
          overflow: hidden;
        }
        
        .container {
          height: 100vh;
          overflow: hidden;
        }
        #couple {
          max-height: 100%;
          width: 100%;
        }
        
        #girl-hair {
          fill:url(#hair-gradient);
        }
        #girl-eye {
          fill: green;
        }
        
        #girl-earring {
          fill: #8d8d8d;
        }
        #girl-skirt, #girl-shirt {
          fill: #791e43;
        }
        #boy-pants {
          fill: #848487;
        }
        #boy-sleeve {
          fill: #b8bcbb;
        }
        
        #boy-shirt {
          fill: #256e89;
        }
        
        #boy-hat-1 {
           fill: #2e6773;
        }
        #boy-hat-2 {
           fill: #4f3723;
        }
        
        #couple,
        #heart, 
        #triangle-light
        {
          visibility: hidden;
        }
         #triangle-light {
          fill:url(#light-gradient);
          fill-opacity: 0.3;
        } 
        
        #ground {
          fill: #5c5757;
        }
        
        
        
        .heart {
            position: relative;
            width: 100px;
            height: 90px;
        }
        .heart:before,
        .heart:after {
            position: absolute;
            content: "";
            left: 50px;
            top: 0;
            width: 50px;
            height: 80px;
            background: red;
            -moz-border-radius: 50px 50px 0 0;
            border-radius: 50px 50px 0 0;
            -webkit-transform: rotate(-45deg);
               -moz-transform: rotate(-45deg);
                -ms-transform: rotate(-45deg);
                 -o-transform: rotate(-45deg);
                    transform: rotate(-45deg);
            -webkit-transform-origin: 0 100%;
               -moz-transform-origin: 0 100%;
                -ms-transform-origin: 0 100%;
                 -o-transform-origin: 0 100%;
                    transform-origin: 0 100%;
        }
        .heart:after {
            left: 0;
            -webkit-transform: rotate(45deg);
               -moz-transform: rotate(45deg);
                -ms-transform: rotate(45deg);
                 -o-transform: rotate(45deg);
                    transform: rotate(45deg);
            -webkit-transform-origin: 100% 100%;
               -moz-transform-origin: 100% 100%;
                -ms-transform-origin: 100% 100%;
                 -o-transform-origin: 100% 100%;
                    transform-origin :100% 100%;
        }
    </style>


</head>

<body>
    <div class="container">
        <svg id="couple" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="150 100 900 900">
<style type="text/css">
        .st0{fill:#F8E5C5;}
        .st1{fill:#F0B38A;}
        .st2{fill:#660000;}
        .st3{fill:#161C1D;}
        .st4{fill:#EB1D23;}
        .st5{fill:url(#triangle-light_4_);fill-opacity:0.3;}
        .st6{fill:url(#triangle-light_5_);fill-opacity:0.3;}
</style>
<defs>
  <linearGradient id="hair-gradient">
    <stop offset="0%" stop-color="#5e3634" />
    <stop offset="50%" stop-color="#dfc57b" />
  </linearGradient>
      <linearGradient id="light-gradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="10%" stop-color="rgb(120,175,120)" />
      <stop offset="60%" stop-color="#1a2124" />
    </linearGradient>
</defs>
<g>
        <path id="heart" class="st0" d="M626.6,310.7c-20.1-35-58.8-12.9-70.8,4.6c-11.7-17.5-50.7-39.6-70.8-4.6
                c-26.2,45.9,36.6,83.2,70.2,102c0.2,0,1,0.2,1.2,0C590.1,393.8,653,356.6,626.6,3.........完整代码请登录后点击上方下载按钮下载查看