SOURCE

console 命令行工具 X clear

                    
>
console
document.getElementById( "btn-top" ).addEventListener( "click", function(){
    
    var tl = gsap.timeline();
  
 
    tl.to("#phone",{y: 20, ease: "expo.out", duration: 0.4},"<");
    tl.to("#phone",{y: -20, ease: "expo.out", duration: 0.4}, 0.3);
  
    tl.to("#like", {y: -200, ease: "expo.out", duration: 0.4},"<");
    tl.to("#like", {css:{opacity: 1},duration: 0.1}, "<");
   
    tl.to("#like", {y: 200, ease: "expo.out", duration: 0.4}, 1.3);
    tl.to("#like", {css:{opacity: 0},duration: 0.1}, "<");
  
  
} );
<div class="container">
<svg width="110%" height="110%" viewBox="0 0 1920 1080" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
    <g id="phone">
        <g transform="matrix(1,0,0,1,-143,-72.8832)">
            <path d="M1577.88,690L1577.88,667.783L627.115,507L627.115,530.214L1577.88,690Z" style="fill:rgb(89,98,118);"/>
        </g>
        <g transform="matrix(0.866025,-0.5,0.866025,0.5,-504.083,772.117)">
            <path d="M1306,254.74C1306,239.43 1295.24,227 1281.98,227L923.023,227C909.764,227 899,239.43 899,254.74L899,920.26C899,935.57 909.764,948 923.023,948L1281.98,948C1295.24,948 1306,935.57 1306,920.26L1306,254.74Z" style="fill:rgb(89,98,118);"/>
        </g>
        <g transform="matrix(0.866025,-0.5,0.866025,0.5,-504.083,794.103)">
            <path d="M1306,254.74C1306,239.43 1295.24,227 1281.98,227L923.023,227C909.764,227 899,239.43 899,254.74L899,920.26C899,935.57 909.764,948 923.023,948L1281.98,948C1295.24,948 1306,935.57 1306,920.26L1306,254.74Z" style="fill:rgb(89,98,118);"/>
        </g>
        <g transform="matrix(0.807145,-0.466005,0.829443,0.478879,-417.675,747.046)">
            <path d="M1306,253.994C1306,239.096 1295.24,227 1281.98,227L923.023,227C909.764,227 899,239.096 899,253.994L899,921.006C899,935.904 909.764,948 923.023,948L1281.98,948C1295.24,948 1306,935.904 1306,921.006L1306,253.994Z" style="fill:white;"/>
        </g>
        <g transform="matrix(0.866025,-0.5,0.866025,0.5,-451.31,807.973)">
            <path d="M1269.77,287.773C1269.77,284.201 1267.57,282 1264,282C1227.13,282 1024.27,282 963.321,282C959.748,282 955.346,284.201 951.774,287.774C948.201,291.346 946,295.748 946,299.321C946,358.281 946,549.511 946,585.227C946,588.799 948.201,591 951.774,591C988.641,591 1191.51,591 1252.45,591C1256.03,591 1260.43,588.799 1264,585.226C1267.57,581.654 1269.77,577.252 1269.77,573.679L1269.77,287.773Z" style="fill:rgb(62,208,222);"/>
        </g>
        <g transform="matrix(0.674243,-0.389274,0.674243,0.389274,-543.345,564.028)">
            <circle cx="1006.12" cy="672.125" r="36.125" style="fill:rgb(89,98,118);"/>
        </g>
        <g transform="matrix(1.28394,-0.741285,0.671804,0.387866,-484.373,1393.65)">
            <path d="M1264.39,287.5C1264.39,280.601 1261.85,275 1258.72,275L1051.66,275C1048.54,275 1046,280.601 1046,287.5C1046,294.399 1048.54,300 1051.66,300L1258.72,300C1261.85,300 1264.39,294.399 1264.39,287.5Z" style="fill:rgb(89,98,118);"/>
        </g>
        <g transform="matrix(0.689111,-0.397858,0.671804,0.387866,171.132,1053.66)">
            <path d="M1264.39,287.5C1264.39,280.601 1259.66,275 1253.83,275L1056.55,275C1050.73,275 1046,280.601 1046,287.5C1046,294.399 1050.73,300 1056.55,300L1253.83,300C1259.66,300 1264.39,294.399 1264.39,287.5Z" style="fill:rgb(89,98,118);"/>
        </g>
        <g id="btn-top" transform="matrix(1,0,0,1,-143,-42.3401)">
            <g id="btn-top-base" transform="matrix(0.866025,-0.5,0.866025,0.5,-361.083,814.457)">
                <path d="M1264.39,722.789C1264.39,717.938 1260.98,714 1256.78,714L948.225,714C944.024,714 940.613,717.938 940.613,722.789L940.613,791.211C940.613,796.062 944.024,800 948.225,800L1256.78,800C1260.98,800 1264.39,796.062 1264.39,791.211L1264.39,722.789Z" style="fill:rgb(246,129,127);"/>
            </g>
            <g id="heart-top" transform="matrix(0.535417,-0.309123,0.535417,0.309123,351.217,714.246)">
                <path d="M956,696.6C964.842,681 982.526,681 991.368,688.8C1000.21,696.6 1000.21,712.2 991.368,727.8C985.179,739.5 969.263,751.2 956,759C942.737,751.2 926.821,739.5 920.632,727.8C911.789,712.2 911.789,696.6 920.632,688.8C929.474,681 947.158,681 956,696.6Z" style="fill:white;"/>
            </g>
        </g>
    </g>
    <g transform="matrix(0.517673,0,0,0.517673,412.745,102.656)">
        <g id="like">
            <g>
                <path d="M775.959,655.016C766.774,651.383 760.803,640.373 760.803,624.07L760.803,525.857C760.803,498.754 777.306,467.222 797.633,455.486L975.987,352.514C984.087,347.837 991.58,347.005 997.661,349.411L997.661,349.411L997.661,349.411C999.328,350.07 1000.89,350.973 1002.33,352.105L1053.09,381.411L1012.82,435.749L1012.82,478.57C1012.82,505.673 996.314,537.205 975.987,548.941L915.6,583.805L886.555,640.147L870.664,627.56L827.94,685.209L775.959,655.016L775.959,655.016Z" style="fill:rgb(246,129,127);"/>
                <g transform="matrix(0.866025,-0.5,4.80741e-17,1,119.078,509.25)">
                    <g transform="matrix(1,0,0,0.810997,86,89.7663)">
                        <path d="M1010,445.551C1010,412.132 990.944,385 967.472,385L761.528,385C738.056,385 719,412.132 719,445.551L719,566.653C719,600.073 738.056,627.205 761.528,627.205L830.837,627.205L864.206,676L897.744,627.205L967.472,627.205C990.944,627.205 1010,600.073 1010,566.653L1010,445.551Z" style="fill:rgb(244,95,95);"/>
                    </g>
                    <g transform="matrix(1.10429,0,0,1,107.216,-31.799)">
                        <path d="M716.149,505.021C725.234,488 743.402,488 752.486,496.51C761.57,505.021 761.57,522.042 752.486,539.063C746.127,551.829 729.776,564.594 716.149,573.105C702.523,564.594 686.172,551.829 679.813,539.063C670.729,522.042 670.729,505.021 679.813,496.51C688.897,488 707.065,488 716.149,505.021Z" style="fill:white;"/>
                    </g>
                    <g transform="matrix(1.10429,0,0,1,107.216,-31.799)">
                        <path d="M716.149,505.021C725.234,488 743.402,488 752.486,496.51C761.57,505.021 761.57,522.042 752.486,539.063C746.127,551.829 729.776,564.594 716.149,573.105C702.523,564.594 686.172,551.829 679.813,539.063C670.729,522.042 670.729,505.021 679.813,496.51C688.897,488 707.065,488 716.149,505.021Z" style="fill:white;"/>
                    </g>
                    <g transform="matrix(7.49275,0,0,7.49275,-6514.63,-3161.28)">
                        <text x="1001.14px" y="492.451px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:12px;fill:white;">1</text>
                    </g>
                </g>
            </g>
        </g>
    </g>
</svg>

  </div>
body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background: #3ED0DE;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content:center;
  overflow: hidden;
  }

  .container{
  margin-right: 120px;
  }

  #btn-top{
  cursor: pointer;
  }

  #like{
  opacity: 0;
  }

本项目引用的自定义外部资源