纯css手表动画效果

纯CSS绘制手表动画代码

纯css手表动画效果-青鹿云

html代码

<div class="wrapper">
  <div class="watch-strap">
    <div class="strap-circle"></div>
    <div class="strap"></div>
    <div class="watch-strap-holder left-up"></div>
    <div class="watch-strap-holder left-bottom"></div>
    <div class="watch-strap-holder right-up"></div>
    <div class="watch-strap-holder right-bottom"></div>
    <div class="watch-lace">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <span class="top"></span>
      <span class="bottom"></span>
    </div>
  </div>
  <div class="watch-case">
    <div class="reflection"></div>
    <div class="reflection bottom"></div>
    <div class="watch-center">
      <div class="watch-points"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>
      <div class="watch-tips">
        <span class="hours"></span>
        <span class="minutes"></span>
        <span class="seconds"></span>
      </div>
      <div class="watch-date">17 SEP</div>
      <div class="watch-alert">Your meeting <br>in <strong>15</strong> min</div>
      <div class="watch-week">
        <span class="week-arrow"></span>
        <ul>
          <div>S</div>
          <div>M</div>
          <div>T</div>
          <div>W</div>
          <div>T</div>
          <div>F</div>
          <div>S</div>
        </ul>
      </div>
       <div class="watch-day">
         <div class="sun">
           <div></div>
           <div></div>
           <div></div>
           <div></div>
           <div></div>
           <div></div>
           <div></div>
           <div></div>
           <div></div>
         </div>
         
      </div>
      <div class="watch-week days">
        <span class="week-arrow"></span>
        <ul>
          <div>3</div>
          <div>6</div>
          <div>9</div>       
        </ul>
      </div>
    </div>
  </div>
</div>
© 版权声明
THE END
喜欢就支持一下吧
点赞131 分享
评论 共1条

请登录后发表评论