卡巴拉日历

下载代码

html

css

分享到微信朋友圈

html

<div class="logo">
<svg
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="566.33929"
   height="566.33929"
   id="svg21252"
   version="1.1">
  <g
     inkscape:label="Layer 1"
     inkscape:groupmode="layer"
     id="layer1">
    <path
       
       
       id="path21770"
       
       
       
       
       d="m 725.71429,326.64789 c 0,156.21769 -126.63945,282.85715 -282.85714,282.85715 C 286.63946,609.50504 160,482.86558 160,326.64789 160,170.4302 286.63946,43.790741 442.85715,43.790741 c 156.21769,0 282.85714,126.639459 282.85714,282.857149 z"
       transform="translate(-159.6875,-43.478241)" />
    <path
       
       d="M 52.282135,150.29338 C 75.653767,109.77004 109.3872,75.976033 149.8628,52.531006"
       id="path21846" />
    <path
       
       d="M 149.8628,52.531006 C 189.06906,29.82123 234.60123,16.821508 283.16965,16.821508"
       id="path21844" />
    <path
       
       d="m 283.16965,16.821508 c 48.24731,0 93.49839,12.828397 132.52839,35.26034"
       id="path21842" />
    <path
       
       d="m 415.69804,52.081848 c 40.83448,23.469047 74.85935,57.450172 98.38145,98.250252"
       id="path21840" />
    <path
       
       d="m 514.07949,150.3321 c 22.54204,39.10012 35.4383,84.46279 35.4383,132.83755"
       id="path21838" />
    <path
       
       d="m 549.51779,283.16965 c 0,48.56842 -12.99972,94.10059 -35.70949,133.30685"
       id="path21836" />
    <path
       
       d="m 513.8083,416.4765 c -23.34154,40.29693 -56.94088,73.91109 -97.22612,97.27056"
       id="path21834" />
    <path
       
       d="M 416.58218,513.74706 C 377.35207,536.4947 331.78171,549.5178 283.16965,549.5178"
       id="path21832" />
    <path
       
       d="m 283.16965,549.5178 c -48.4566,0 -93.89092,-12.93993 -133.03596,-35.5528"
       id="path21830" />
    <path
       
       d="M 150.13369,513.965 C 109.69419,490.60436 75.966798,456.92047 52.55346,416.51527"
       id="path21828" />
    <path
       
       d="M 52.55346,416.51527 C 29.829795,377.30026 16.821502,331.75408 16.821502,283.16965"
       id="path21826" />
    <path
       
       d="m 16.821502,283.16965 c 0,-48.39073 12.904775,-93.76738 35.460633,-132.87627"
       id="path21772" />
    <path
       
       
       id="path21774"
       
       
       
       
       d="m 600.58815,320.93359 c 0,132.87317 -107.71498,240.58815 -240.58815,240.58815 -132.87317,0 -240.58815,-107.71498 -240.58815,-240.58815 0,-132.87316 107.71498,-240.588146 240.58815,-240.588146 132.87317,0 240.58815,107.714986 240.58815,240.588146 z"
       transform="translate(-76.830353,-37.763941)" />
    <path
       
       
       id="path21776"
       
       
       
       
       d="m 557.6301,320.93359 c 0,109.14809 -88.48201,197.6301 -197.6301,197.6301 -109.14809,0 -197.6301,-88.48201 -197.6301,-197.6301 0,-109.14808 88.48201,-197.63009 197.6301,-197.63009 109.14809,0 197.6301,88.48201 197.6301,197.63009 z"
       transform="translate(-76.830353,-37.763941)" />
    <path
       
       d="m -16.83035,203.16965 0,-203.16965003320314"
       id="path21778"
       inkscape:path-effect="#path-effect21780"
       inkscape:original-d="m -16.83035,203.16965 0,-203.16965003320314"
       inkscape:connector-curvature="0"
       inkscape:transform-center-y="-141.57143"
       inkscape:tile-cx="283.16965"
       inkscape:tile-cy="283.15625"
       inkscape:tile-w="0"
       inkscape:tile-h="283.16965"
       inkscape:tile-x0="283.16965"
       inkscape:tile-y0="0"
        />
    <use
       x="0"
       y="0"
       inkscape:tiled-clone-of="#path21778"
       xlink:href="#path21778"
       id="use21782"
       inkscape:transform-center-y="-141.57143"
       width="566.33929"
       height="566.33929"
       transform="translate(300,3.320315e-8)" />
    <use
       x="0"
       y="0"
       inkscape:tiled-clone-of="#path21778"
       xlink:href="#path21778"
       transform="matrix(0.8660254,0.5,-0.5,0.8660254,439.32332,46.35092)"
       id="use21784"
       inkscape:transform-center-x="-70.785717"
       inkscape:transform-center-y="-122.60446"
       width="566.33929"
       height="566.33929" />
    <use
       x="0"
       y="0"
       inkscape:tiled-clone-of="#path21778"
       xlink:href="#path21778"
       transform="matrix(0.5,0.8660254,-0.8660254,0.5,536.80534,156.15365)"
       id="use21786"
       inkscape:transform-center-x="-122.60446"
       inkscape:transform-center-y="-70.785713"
       width="566.33929"
       height="566.33929" />
    <use
       x="0"
       y="0"
       inkscape:tiled-clone-of="#path21778"
       xlink:href="#path21778"
       transform="matrix(0,1,-1,0,566.3259,299.9866)"
       id="use21788"
       inkscape:transform-center-x="-141.57143"
       width="566.33929"
       height="566.33929" />
    <use
       x="0"
       y="0"
       inkscape:tiled-clone-of="#path21778"
       xlink:href="#path21778"
       transform="matrix(-0.5,0.8660254,-0.8660254,-0.5,519.97499,439.30992)"
       id="use21790"
       inkscape:transform-center-x="-122.60446"
       inkscape:transform-center-y="70.785712"
       width="566.33929"
       height="566.33929" />
    <use
       x="0"
       y="0"
       inkscape:tiled-clone-of="#path21778"
       xlink:href="#path21778"
       transform="matrix(-0.8660254,0.5,-0.5,-0.8660254,410.17224,536.79194)"
       id="use21792"
       inkscape:transform-center-x="-70.785718"
       inkscape:transform-center-y="122.60446"
       width="566.33929"
       height="566.33929" />
    <use
       x="0"
       y="0"
       inkscape:tiled-clone-of="#path21778"
       xlink:href="#path21778"
       transform="matrix(-1,0,0,-1,266.3393,566.31251)"
       id="use21794"
       inkscape:transform-center-y="141.57143"
       width="566.33929"
       height="566.33929" />
    <use
       x="0"
       y="0"
       inkscape:tiled-clone-of="#path21778"
       xlink:href="#path21778"
       transform="matrix(-0.8660254,-0.5,0.5,-0.8660254,127.01598,519.96159)"
       id="use21796"
       inkscape:transform-center-x="70.785717"
       inkscape:transform-center-y="122.60446"
       width="566.33929"
       height="566.33929" />
    <use
       x="0"
       y="0"
       inkscape:tiled-clone-of="#path21778"
       xlink:href="#path21778"
       transform="matrix(-0.5,-0.8660254,0.8660254,-0.5,29.53396,410.15884)"
       id="use21798"
       inkscape:transform-center-x="122.60446"
       inkscape:transform-center-y="70.785713"
       width="566.33929"
       height="566.33929" />
    <use
       x="0"
       y="0"
       inkscape:tiled-clone-of="#path21778"
       xlink:href="#path21778"
       transform="matrix(0,-1,1,0,0.01339503,266.32591)"
       id="use21800"
       inkscape:transform-center-x="141.57143"
       width="566.33929"
       height="566.33929" />
    <use
       x="0"
       y="0"
       inkscape:tiled-clone-of="#path21778"
       xlink:href="#path21778"
       transform="matrix(0.5,-0.8660254,0.8660254,0.5,46.36431,127.00259)"
       id="use21802"
       inkscape:transform-center-x="122.60446"
       inkscape:transform-center-y="-70.785712"
       width="566.33929"
       height="566.33929" />
    <use
       x="0"
       y="0"
       inkscape:tiled-clone-of="#path21778"
       xlink:href="#path21778"
       transform="matrix(0.8660254,-0.5,0.5,0.8660254,156.16704,29.52057)"
       id="use21804"
       inkscape:transform-center-x="70.785718"
       inkscape:transform-center-y="-122.60446"
       width="566.33929"
       height="566.33929" />
    <path
       
       
       id="path21806"
       
       
       
       
       d="m 363.14984,283.16965 a 79.980194,79.980194 0 1 1 -159.96039,0 79.980194,79.980194 0 1 1 159.96039,0 z" />
    <path
       
       
       id="path21808"
       
       
       
       
       d="m 368.72494,283.16965 a 85.55529,85.55529 0 1 1 -171.11058,0 85.55529,85.55529 0 1 1 171.11058,0 z" />
    <path
       
       
       id="path21810"
       
       
       
       
       d="m 475.8651,283.16965 a 192.69545,192.69545 0 1 1 -385.390903,0 192.69545,192.69545 0 1 1 385.390903,0 z" />
    <text
       xml:space="preserve"
       
       id="text21848"
       ><textPath
         xlink:href="#path21842"
         startOffset="50%"
         id="textPath21875"><tspan
   id="tspan21850">Enero</tspan></textPath></text>
    <text
       
       id="text21855"
       
       xml:space="preserve"><textPath
         xlink:href="#path21840"
         startOffset="50%"
         id="textPath21878"><tspan
   id="tspan21857">Febrero</tspan></textPath></text>
    <text
       xml:space="preserve"
       
       id="text21859"
       ><textPath
         xlink:href="#path21838"
         startOffset="50%"
         id="textPath21881"><tspan
   id="tspan21861">Marzo</tspan></textPath></text>
    <text
       
       id="text21863"
       
       xml:space="preserve"><textPath
         xlink:href="#path21836"
         startOffset="50%"
         id="textPath21884"><tspan
   id="tspan21865">Abril</tspan></textPath></text>
    <text
       xml:space="preserve"
       
       id="text21867"
       ><textPath
         xlink:href="#path21834"
         startOffset="50%"
         id="textPath21887"><tspan
   id="tspan21869">Mayo</tspan></textPath></text>
    <text
       
       id="text21871"
       
       xml:space="preserve"><textPath
         xlink:href="#path21832"
         startOffset="50%"
         id="textPath21890"><tspan
   id="tspan21873">Junio</tspan></textPath></text>
    <text
       xml:space="preserve"
       
       id="text21893"
       ><textPath
         xlink:href="#path21830"
         startOffset="50%"
         id="textPath21946"><tspan
   id="tspan21895">Julio</tspan></textPath></text>
    <text
       
       id="text21897"
       
       xml:space="preserve"><textPath
         xlink:href="#path21828"
         startOffset="50%"
         id="textPath21949"><tspan
   id="tspan21899">Agosto</tspan></textPath></text>
    <text
       xml:space="preserve"
       
       id="text21901"
       ><textPath
         xlink:href="#path21826"
         startOffset="50%"
         id="textPath21952"><tspan
   id="tspan21903">Septiembre</tspan></textPath></text>
    <text
       xml:space="preserve"
       
       id="text21901-8"
       ><textPath
         xlink:href="#path21772"
         startOffset="50%"
         id="textPath21955"><tspan
   id="tspan21903-8">Octubre</tspan></textPath></text>
    <text
       
       id="text21938"
       
       xml:space="preserve"><textPath
         xlink:href="#path21846"
         startOffset="50%"
         id="textPath21958"><tspan
   id="tspan21940">Noviembre</tspan></textPath></text>
    <text
       xml:space="preserve"
       
       id="text21942"
       ><textPath
         xlink:href="#path21844"
         startOffset="50%"
         id="textPath21961"><tspan
   id="tspan21944">Diciembre</tspan></textPath></text>
    <path
       
       
       id="path21968"
       
       
       
       
       
       
       
       inkscape:flatsided="true"
       inkscape:rounded="0"
       inkscape:randomized="0"
       d="M 283.16965,522.76807 75.671333,402.96886 75.671326,163.37044 283.16964,43.571228 490.66796,163.37043 l 1e-5,239.59842 z" />
    <path
       
       
       id="path21970"
       
       
       
       
       
       
       
       inkscape:flatsided="true"
       inkscape:rounded="0"
       inkscape:randomized="0"
       d="m 523.57774,283.16965 -120.20404,208.19952 -240.4081,0 L 42.761551,283.16965 162.9656,74.970129 l 240.4081,0 z" />
    <path
       
       
       id="path21972"
       
       
       
       
       
       
       
       inkscape:flatsided="true"
       inkscape:rounded="0"
       inkscape:randomized="0"
       d="m 283.16965,464.72768 -157.23387,-90.77901 0,-181.55803 157.23386,-90.77902 157.23387,90.77901 1e-5,181.55803 z" />
    <path
       
       
       id="path21974"
       
       
       
       
       
       
       
       inkscape:flatsided="true"
       inkscape:rounded="0"
       inkscape:randomized="0"
       d="m 373.94955,440.40506 -181.55982,-10e-6 -90.7799,-157.23541 90.77992,-157.23541 181.55981,1e-5 90.7799,157.23542 z" />
    <path
       
       
       id="path22324"
       
       
       
       
       d="m 333.2827,101.58482 a 50.113056,50.113056 0 1 1 -100.22611,0 50.113056,50.113056 0 1 1 100.22611,0 z"
       inkscape:transform-center-y="-181.58482"
       inkscape:tile-cx="283.16965"
       inkscape:tile-cy="283.16964"
       inkscape:tile-w="100.22611"
       inkscape:tile-h="100.22611"
       inkscape:tile-x0="233.05659"
       inkscape:tile-y0="51.471767" />
    <use
       x="0"
       y="0"
       xlink:href="#path22324"
       inkscape:transform-center-y="-157.18378"
       id="use22566"
       transform="matrix(0.8656218,0.50069841,-0.50069841,0.8656218,179.83442,-103.73077)"
       width="566.33929"
       height="566.33929"
       inkscape:transform-center-x="-90.919233" />
    <use
       x="0"
       y="0"
       xlink:href="#use22566"
       inkscape:transform-center-x="-157.25313"
       inkscape:transform-center-y="-90.799232"
       id="use22568"
       transform="matrix(0.8664501,0.49926367,-0.49926367,0.8664501,179.19359,-103.55904)"
       width="566.33929"
       height="566.33929" />
    <use
       x="0"
       y="0"
       xlink:href="#use22568"
       inkscape:transform-center-x="-181.58442"
       inkscape:transform-center-y="-0.38236251"
       id="use22570"
       transform="matrix(0.86705474,0.49821289,-0.49821289,0.86705474,178.72483,-103.4327)"
       width="566.33929"
       height="566.33929" />
    <use
       x="0"
       y="0"
       xlink:href="#use22570"
       inkscape:transform-center-x="-157.3472"
       inkscape:transform-center-y="90.636109"
       id="use22572"
       transform="matrix(0.86546883,0.50096277,-0.50096277,0.86546883,179.95259,-103.76231)"
       width="566.33929"
       height="566.33929" />
    <use
       x="0"
       y="0"
       xlink:href="#use22572"
       inkscape:transform-center-x="-90.676807"
       inkscape:transform-center-y="157.32375"
       id="use22574"
       transform="matrix(0.86515982,0.50149625,-0.50149625,0.86515982,180.19116,-103.82587)"
       width="566.33929"
       height="566.33929" />
    <use
       x="0"
       y="0"
       xlink:href="#use22574"
       inkscape:transform-center-x="-0.60734728"
       inkscape:transform-center-y="181.5838"
       id="use22576"
       transform="matrix(0.86805803,0.49646275,-0.49646275,0.86805803,177.94514,-103.22122)"
       width="566.33929"
       height="566.33929" />
    <use
       x="0"
       y="0"
       xlink:href="#use22576"
       inkscape:transform-center-x="90.833529"
       inkscape:transform-center-y="157.23331"
       id="use22578"
       transform="matrix(0.86421665,0.50311985,-0.50311985,0.86421665,180.918,-104.01855)"
       width="566.33929"
       height="566.33929" />
    <use
       x="0"
       y="0"
       xlink:href="#use22578"
       inkscape:transform-center-x="157.46492"
       inkscape:transform-center-y="90.431432"
       id="use22580"
       transform="matrix(0.86500742,0.50175907,-0.50175907,0.86500742,180.30874,-103.85714)"
       width="566.33929"
       height="566.33929" />
    <use
       x="0"
       y="0"
       xlink:href="#use22580"
       inkscape:transform-center-x="181.58478"
       inkscape:transform-center-y="-0.11340949"
       id="use22582"
       transform="matrix(0.86685888,0.49855358,-0.49855358,0.86685888,178.87677,-103.47372)"
       width="566.33929"
       height="566.33929" />
    <use
       x="0"
       y="0"
       xlink:href="#use22582"
       inkscape:transform-center-x="157.72273"
       inkscape:transform-center-y="-89.98104"
       id="use22584"
       transform="matrix(0.86889915,0.49498916,-0.49498916,0.86889915,177.28969,-103.04213)"
       width="566.33929"
       height="566.33929" />
    <use
       x="0"
       y="0"
       xlink:href="#use22584"
       inkscape:transform-center-x="90.899088"
       inkscape:transform-center-y="-157.19543"
       id="use22586"
       transform="matrix(0.86378007,0.50386902,-0.50386902,0.86378007,181.25377,-104.10707)"
       width="566.33929"
       height="566.33929" />
    <path
       
       
       id="path22588"
       
       
       
       
       
       
       
       inkscape:flatsided="false"
       inkscape:rounded="0"
       inkscape:randomized="0"
       d="m 283.16965,203.44434 19.93132,45.20323 49.11282,-5.34058 -29.18149,39.86266 29.18149,39.86265 -49.11281,-5.34058 -19.93133,45.20324 -19.93133,-45.20324 -49.11282,5.34058 29.18149,-39.86265 -29.18149,-39.86266 49.11282,5.34059 z" />
    <path
       
       
       id="path22590"
       
       
       
       
       
       
       
       inkscape:flatsided="false"
       inkscape:rounded="0"
       inkscape:randomized="0"
       d="m 323.09864,352.3287 -39.92899,-29.23006 -39.929,29.23006 5.34947,-49.19455 -45.27847,-19.96451 45.27847,-19.96449 -5.34947,-49.19456 39.929,29.23006 39.929,-29.23005 -5.34948,49.19455 45.27847,19.9645 -45.27847,19.96449 z" />
    <path
       
       
       id="path22592"
       
       
       
       
       d="m 322.10973,283.16965 a 38.940086,38.940086 0 1 1 -77.88017,0 38.940086,38.940086 0 1 1 77.88017,0 z" />
  </g>
</svg>
    </div>

css

JavaScript

var i = 0,
    j = 0,
    p = 0,
    time = 0,
    $path = $('path, text'),
    lastNow = null,
    color = [0,0,0,1],
    fromColor = [50,70,100,0],
    toColor = [0,220,255,1],
    dashOffset = 0,
    dashArray = [0,100];

dashArray[0] = i;
    dashArray[1] = (100 - i);
    dashOffset = i * 2;
    
    if (this.localName === 'path') {
      $(this)
        .attr('stroke', 'rgba(' + color.join(',') + ')')
        .attr('stroke-dasharray', dashArray.join(','))
        .attr('stroke-dashoffset', dashOffset);
    } else {
      $(this)
        .attr('stroke', 'rgba(255,255,255,' + color[3] + ')')
        .attr('stroke-dasharray', dashArray.join(','))
        .attr('stroke-dashoffset', dashOffset);
    }
    
  });
  
  requestAnimationFrame(loop);
  
}

loop();

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg