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

代码语言：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,310.7L626.6,310.7z"/>
	<path id="ground" class="st0" d="M604,886.9c-234.9,0-425,17-425,38.3c0,21.1,190.3,38.1,425,38.1c235,0,425.4-17,425.4-38.1
		C1029.4,903.9,839.2,886.9,604,886.9L604,886.9z"/>
	<g id="girl">
		<g id="girl-leg-1">
			<polygon class="st1" points="698.6,810.7 817.1,839.3 820,833 705.1,788.9 			"/>
			<polygon class="st2" points="819.3,876.7 808.5,841.1 812.5,827 832.3,833 			"/>
		</g>
		<g id="girl-leg-2">
			<polygon class="st1" points="690.8,801.3 713.6,921.1 720.5,921.1 713.2,798.3 			"/>
			<polygon class="st2" points="679.9,931.5 711,910.9 725.5,910.9 725.5,931.5 			"/>
		</g>
		<g id="girl-body">
			<path id="girl-shirt" class="st0" d="M638,572.4c0,0-47.6,31.5,24,117.4l41-12.3L667.3,588l-9.7-21.6L638,572.4z"/>
			<path id="girl-skirt" class="st0" d="M667.3,666.5c-70.9,27.4-52.2,153.8-52.2,153.8s71.9,19.6,188.3-57
				C803.4,763.2,748.3,635.2,667.3,666.5L667.3,666.5z"/>
			<path id="girl-arm" class="st1" d="M609.1,652.2c0,0,42.7-48.8,49.7-42.7c7.3,6.5-38.6,52-38.6,52h-76.5L609.1,652.2z"/>
    <g id="girl-head">
        			<path id="girl-face" class="st1" d="M695.4,509.5c-2-27.6-35.9-47.4-75.5-44.6c-39.6,3.1-70.1,27.7-68,55.1c2,27.6,35.7,47.5,75.3,44.6
				C667,561.7,697.4,537,695.4,509.5L695.4,509.5z"/>
			<path id="girl-eye" class="st3" d="M579.7,507.6c-4.6,0.3-8,4.4-7.7,9c0.3,4.6,4.2,8.2,8.8,7.8c4.8-0.3,8.2-4.4,7.8-9
				C588.4,510.8,584.3,507.3,579.7,507.6L579.7,507.6z"/>
        			<path id="girl-hair" class="st3" d="M561.8,491.5c0,0,25.8,24.7,76.2,33.5c18.5,32.6,57.5,136.6,57.5,136.6
				s41.2,39.8,78.4-1.9c-11.2-4.4-47.4-6.3-61.4-44.4c-13.9-38.3,6.6-90-13.3-125.5c-11.6-20.9-35.4-44.2-75.7-39.4
				C591.8,453.9,576.1,468.7,561.8,491.5L561.8,491.5z"/>
			&.........完整代码请登录后点击上方下载按钮下载查看