TweenMax实现一个春夏秋冬四季分明的日历日期选择效果代码-html代码-BFW代码库

代码语言：html
所属分类：选择器
代码描述：TweenMax结合MorphSVGPlugin实现一个春夏秋冬四季分明的日历日期选择效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">

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

    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
    <style>
        :root {
      --theme: #8dcfff;
      --col: #FFFFFF ;
    }
    
    body {
      font-family: "Nunito", sans-serif;
      background-color: #F5F5F5;
    }
    
    a {
      color: #222222;
      text-decoration: none;
      display: inline-block;
    }
    
    .container {
      text-align: center;
      width: 430px;
      margin: 0 auto;
      position: relative;
    }
    
    .btn__wrapper, .calendar {
      display: inline-block;
    }
    
    .btn__wrapper {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
    }
    .btn__wrapper.next {
      right: 0;
    }
    .btn__wrapper.prev {
      left: 0;
    }
    .btn__wrapper.next, .btn__wrapper.prev {
      cursor: pointer;
    }
    .btn__wrapper.next path, .btn__wrapper.prev path {
      stroke: var(--theme);
    }
    
    .calendar {
      width: 350px;
      background-color: #FFFFFF;
      position: relative;
      margin: 3rem auto;
    }
    .calendar__header {
      background-color: var(--theme);
      color: var(--col);
      text-align: center;
      padding-top: 15px;
      padding-bottom: 15px;
    }
    .calendar__month__year {
      display: inline-block;
      background-color: var(--theme);
      position: relative;
      padding: 5px;
      z-index: 9999;
    }
    .calendar__body {
      position: relative;
    }
    .calendar__days {
      text-align: left;
    }
    .calendar__day {
      display: inline-block;
      width: 50px;
      height: 50px;
      position: relative;
    }
    .calendar__day__number {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    
    .draw-circle, .header__season {
      position: absolute;
    }
    .draw-circle svg, .header__season svg {
      position: relative;
    }
    
    .draw-circle svg {
      left: 5px;
      top: 5px;
    }
    
    svg use {
      stroke: #222;
      stroke-width: 1;
    }
    
    .today-svg {
      stroke: var(--theme);
      stroke-width: 2;
    }
    
    #winter, #spring, #summer, #fall {
      visibility: hidden;
    }
    
    #winter.winter, #spring.spring, #summer.summer, #fall.fall {
      visibility: visible;
    }
    
    .today-svg.hidden, .selected-days.hidden {
      display: none;
    }
    </style>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/prefixfree.js"></script>

</head>

<body>
    <!-- partial:index.partial.html -->
    <div class="container">
        <div class="btn__wrapper prev">
            <svg class="prev" width="11px" height="23px" viewBox="381 624 11 23" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 42 (36781) - http://www.bohemiancoding.com/sketch -->
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Artboard-Copy" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(381.000000, 624.000000)" stroke-linecap="square">
<path d="M0.3,11.7 L11.1,23.1" id="Line-Copy" stroke="#979797" stroke-width="2" transform="translate(5.700000, 17.400000) scale(-1, -1) translate(-5.700000, -17.400000) "></path>
<path d="M0.3,0.3 L11.1,11.7" id="Line" stroke="#979797" stroke-width="2" transform="translate(5.700000, 6.000000) scale(-1, 1) translate(-5.700000, -6.000000) "></path>
</g>
</svg>
        </div>
        <div class="calendar">
            <div class="header__season"><svg width="350" height="82" viewBox="0 0 350 82" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="seasons">
<!-- We can reuse def objects with the use element-->
<g id="winter">
<circle id="winter-el" fill="#FFFFFF" stroke="none" cx="8.5" cy="8.5" x="0" y="0" r="7.5"></circle>
<path id="path" d="M10.1914062,0.30859375 C2.67796308,8.26445677 -3.08980853,17.7764221 3.3125,28.6347656 C9.98437474,39.9502947 11.757796,34.2596999 13.9902344,45.6210938 C16.086191,56.2879007 2.77202896,63.3876879 4.3046875,74.9140625 C5.54396402,84.2340546 13.5353443,89.9877083 16.0175781,98.6816406" stroke="none" fill="none"></path>
</g>
<g id="spring">
<path d="M8.49023438,19.1347656 C1.30270336,29.7492023 -0.769546799,41.6346957 2.05859375,54.3613281" id="flowerPath" stroke="#2F590B" fill="none" stroke-width="1"></path>
<g class="flower">
<path d="M15.5566406,9.47460938 C10.7288259,9.99630664 7.18624346,16.1172825 13.0488281,17.484375 C19.4090417,18.9675093 20.7813567,12.7298889 16.0683594,9.58789062 L15.5566406,9.47460938" id="Path-2" stroke="#979797" stroke-width="1" fill="#ECF158"></path>
<path d="M12.1230469,9.73632812 C3.517263,-0.650664715 17.2924486,-0.751321104 17.2871094,9.1796875" id="Path-3" stroke="#979797" stroke-width="1" fill="#E9B0B0" class="petal"></path>
<path d="M17.5292969,9.90625 C25.9936584,2.1981089 32.1552105,12.7618762 19.9765625,13.7207031" id="Path-4" stroke="#979797" stroke-width="1" fill="#C47474" class="petal"></path>
<path d="M19.9765625,13.7207031 C21.9341725,14.3056276 32.2304919,32.8114908 16.5644531,18.6484375" id="Path-5" stroke="#979797" stroke-width="1" fill="#C57070" class="petal"></path>
<path d="M15.9414062,17.6640625 C12.0811844,27.1614337 6.52622684,22.3670394 9.99804687,16.1933594" id="Path-6" stroke="#979797" stroke-width="1" fill="#E78282" class="petal"></path>
<path d="M9.26367187,15.1171875 C1.41280793,14.5132749 6.47665559,4.45907747 11.7851562,9.76757812" id="Path-7" stroke="#979797" stroke-width="1" fill="#D07A7A" class="petal"></path>
</g>
</g>
<g id="summer">
<circle id="Oval" fill="#ffc500" cx="39.75" cy="39.65" r="17.55"></circle>
<path d="M8.459375,12.88125 C12.7385417,16.9132812 17.0177083,20.9453125 21.296875,24.9773437 L8.459375,12.88125 Z" id="Path-2" stroke="#ffc500" stroke-width="1.3" class="shine"></path>
<path d="M8.459375,12.88125 C12.7385417,16.9132812 17.0177083,20.9453125 21.296875,24.9773437 L8.459375,12.88125 Z" id="Path-2-Copy-5" stroke="#ffc500" stroke-width="1.3" class="shine" transform="translate(95, 43.929297) rotate(135.000000)"></path>
<path d="M8.459375,12.88125 C12.7385417,16.9132812 17.0177083,20.9453125 21.296875,24.9773437 L8.459375,12.88125 Z" id="Path-2-Copy-3" stroke="#ffc500" stroke-width="1.3" transform="translate(-13.875357, 38.929297) rotate(-45.000000)" class="shine"></path>
<path d="M8.459375,12.88125 C12.7385417,16.9132812 17.0177083,20.9453125 21.296875,24.9773437 L8.459375,12.88125 Z" id="Path-2-Copy-4" stroke="#ffc500" stroke-width="1.3" transform="translate(75.875357, 81.929297) rotate(182.000000)" class="shine"></path>
<path d="M8.459375,12.88125 C12.7385417,16.9132812 17.0177083,20.9453125 21.296875,24.9773437 L8.459375,12.88125 Z" id="Path-2-Copy-2" stroke="#ffc500" stroke-width="1.3" transform="translate(80.878049, 5.928750) rotate(90.000000)" class="shine"></path>
<path d="M8.459375,12.88125 C12.7385417,16.9132812 17.0177083,20.9453125 21.296875,24.9773437 L8.459375,12.88125 Z" id="Path-2-Copy-6" stroke="#ffc500" stroke-width="1.3" transform="translate(-3.878049, 75.928750) rotate(273.000000)" class="shine"></path>
<path d="M8.459375,12.88125 C12.7385417,16.9132812 17.0177083,20.9453125 21.296875,24.9773437 L8.459375,12.88125 Z" id="Path-2-Copy" stroke="#ffc500" stroke-width="1.3" transform="translate(39.879134, -12.930838) rotate(43.000000)" class="shine"></path>
<path d="M8.459375,12.88125 C12.7385417,16.9132812 17.0177083,20.9453125 21.296875,24.9773437 L8.459375,12.88125 Z" id="Path-2-Copy-7" stroke="#ffc500" stroke-width="1.3" transform="translate(35.879134, 95.930838) rotate(225.000000)" class="shine"></path>
</g>
<g id="fall" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(-1018.000000, 400.000000)">
<g id="fall-el">  
<path d="M10.546875,30.3359375 C12.6465102,5.32092875 20.3465935,12.6242861 39.484375,7.16015625 C43.8547482,5.91234776 48.2189076,-2.00711917 51.640625,0.984375 C55.5465711,4.39921421 51.629364,11.5065325 50.140625,16.4765625 C45.0502822,33.4702439 24.1092521,55.2687926 10.890625,32.5976562 L10.546875,30.3359375 Z" id="Path-4" stroke="#804400" fill="#d47d02"></path>
<path d="M-0.29296875,39.4179687 C21.3453552,29.3170536 41.5288558,22.6217754 53.0507812,0.9453125" id="Path-3" stroke="#804400"></path>
<path d="M24.1171875,26.6210938 L22.3945312,19.484375" id="Path-5" stroke="#804400"></path>
<path d="M36.3320312,21.5234375 L34.3632812,14.3867188" id="Path-6" stroke="#804400"></path>
<path d="M25.1835938,26.8320312 C27.6210938,28.3736979 30.0585938,29.9153646 32.4960938,31.4570312" id="Path-7" stroke="#804400"></path>
<path d="M35.7600098,21.519989 C37.9300098,22.7309265 40.1000099,23.941864 42.27001,25.1528015" id="Path-8" stroke="#804400"></path>
</g>
<path id="path" d="M-0.171875,0.234375 C9.61459211,12.9169658 16.2633042,19.8100645 33.4140625,20.1171875 C38.4289139,20.2069897 47.7387213,13.2631575 48.34375,18.2421875 C48.9888329,23.5508406 39.3693508,24.8068802 34.078125,25.5820313 C25.6734751,26.813291 16.9117356,22.1239437 8.640625,24.0585938 C6.27660906,24.6115477 9.28700366,29.0305653 10.5976562,31.0742188 C12.4287732,33.9294136 14.9899338,36.3490127 17.7695312,38.2929688 C32.235979,48.4103109 46.9157569,52.9625614 64.6171875,52.7851563 C65.9913612,52.7713842 68.7135541,49.4239899 68.1640625,50.6835938 C57.8020206,74.4365821 23.9513163,63.1119321 9.00390625,63.3125 C7.70836948,63.3298838 8.85102584,65.9753328 9.30859375,67.1875 C10.4130072,70.1132597 11.9645757,72.8660762 13.6132812,75.5234375 C16.8993048,80.8198058 20.0426315,86.271514 24.0898437,91.0117188 C36.1829827,105.175531 48.4969991,110.28785 67.5078125,115.738281 C73.4618328,117.445309 79.8796327,117.357699 86.0546875,116.875 C88.3815691,116.693109 94.6086953,113.233417 92.34375,113.796875 C80.3008122,116.792837 68.8416886,122.180302 56.5976562,124.203125 C38.3955739,127.21027 36.6290656,115.071545 16.9765625,115.496094 C14.4998728,115.549597 16.9128936,120.675004 18.1171875,122.839844 C24.610454,134.512144 29.5538936,139.470812 40.2382812,145.828125 C41.9918309,146.871504 43.956048,147.612167 45.9570312,148.011719 C47.2619275,148.272278 48.6132812,147.847656 49.9414062,147.765625" stroke="none" fill="none"></path>
</g>
</svg>
            </div>
            <div class="calendar__header">
                <div class="calendar__month__year">
                    <div class="calendar__month">Month</div>
                    <div class="calendar__year">Year</div>
                </div>
            </div>
            <div class="calendar__body">
                <div class="draw-circle">
                    <!-- must be width and height of calendar__body-->
                    <svg width="350px" height="280px" viewB.........完整代码请登录后点击上方下载按钮下载查看