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

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

代码语言：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 .........完整代码请登录后点击上方下载按钮下载查看