CSS3金色劳力士手表特效代码下载


CSS3金色劳力士手表特效代码下载
CSS3金色劳力士手表特效代码下载以及金色劳力士手表等js/jquery网页特效代码下载。

1. 引入CSS

<link rel="stylesheet" href="css/style.css">

2. 引入JS

<script src='js/jquery.min.js'></script>
<script src="js/script.js"></script>

3. HTML代码

<div class="rolex">
  <div class="lug"></div>
  <div class="lug"></div>
  <div class="lug"></div>
  <div class="lug"></div>
  <div class="lug-bg"></div>
  <div class="band">
    <div class="band-detail-top-center">
      <div class="band-detail-top-brushed"></div>
      <div class="band-detail-top-brushed"></div>
    </div>
    <div class="band-detail-bottom-center">
      <div class="band-detail-bottom-brushed"></div>
      <div class="band-detail-bottom-brushed"></div>
    </div>
  </div>
  <div class="crown">
    <div class="crown-detail"></div>
    <div class="crown-detail"></div>
    <div class="crown-detail"></div>
    <div class="crown-detail"></div>
    <div class="crown-detail"></div>
  </div>
  <div class="bezel"><i class="bez"></i><i class="bez"></i><i class="bez"></i><i class="bez"></i><i class="bez"></i><i class="bez"></i><i class="bez"></i><i class="bez"></i><i class="bez"></i><i class="bez"></i><i class="bez"></i><i class="bez"></i><i class="bez"></i><i class="bez"></i><i class="bez"></i><i class="bez"></i><i class="bez"></i><i class="bez"></i><i class="bez"></i><i class="bez"></i><i class="bez"></i><i class="bez"></i><i class="bez"></i><i class="bez"></i><i class="bez"></i><i class="bez"></i><i class="bez"></i><i class="bez"></i><i class="bez"></i><i class="bez"></i><i class="bez"></i><i class="bez"></i><i class="bez"></i><i class="bez"></i><i class="bez"></i><i class="bez"></i><i class="bez"></i><i class="bez"></i><i class="bez"></i><i class="bez"></i><i class="bez"></i><i class="bez"></i><i class="bez"></i><i class="bez"></i><i class="bez"></i><i class="bez"></i><i class="bez"></i><i class="bez"></i><i class="bez"></i><i class="bez"></i><i class="bez"></i><i class="bez"></i><i class="bez"></i><i class="bez"></i><i class="bez"></i><i class="bez"></i><i class="bez"></i><i class="bez"></i><i class="bez"></i><i class="bez"></i><i class="bez"></i><i class="bez"></i><i class="bez"></i><i class="bez"></i><i class="bez"></i><i class="bez"></i><i class="bez"></i><i class="bez"></i><i class="bez"></i><i class="bez"></i><i class="bez"></i><i class="bez"></i><i class="bez"></i><i class="bez"></i><i class="bez"></i><i class="bez"></i><i class="bez"></i><i class="bez"></i><i class="bez"></i><i class="bez"></i><i class="bez"></i><i class="bez"></i><i class="bez"></i><i class="bez"></i><i class="bez"></i><i class="bez"></i><i class="bez"></i><i class="bez"></i><i class="bez"></i><i class="bez"></i><i class="bez"></i><i class="bez"></i><i class="bez"></i><i class="bez"></i><i class="bez"></i><i class="bez"></i>
  </div>
  <div class="face">
    <div class="content-upper">
      <div class="logo">
        <div class="logo-left"></div>
        <div class="logo-right"></div>
      </div>
      <p class="name">Rolex</p>
      <p class="sub-name">Oyster Perpetual<br/>Day &mdash; Date</p>
    </div>
    <div class="content-lower">
      <p class="sub-fine">Superlative Chronometer<br/>Officially Certified</p>
      <p class="sub-swiss"><span>Chris</span> <span>made</span></p>
    </div>
    <div class="gradient-overlay"></div>
    <div class="black-outline">
      <div class="outline-details"></div>
      <div class="outline-details"></div>
      <div class="outline-details"></div>
      <div class="outline-details"></div>
      <div class="outline-details"></div>
      <div class="outline-details"></div>
      <div class="outline-details"></div>
      <div class="outline-details"></div>
      <div class="outline-details"></div>
      <div class="outline-details"></div>
      <div class="outline-details"></div>
      <div class="outline-details"></div>
      <div class="outline-details"></div>
      <div class="outline-details"></div>
      <div class="outline-details"></div>
      <div class="outline-details"></div>
      <div class="outline-details"></div>
      <div class="outline-details"></div>
      <div class="outline-details"></div>
      <div class="outline-details"></div>
      <div class="outline-details"></div>
      <div class="outline-details"></div>
      <div class="outline-details"></div>
      <div class="outline-details"></div>
      <div class="outline-details"></div>
      <div class="outline-details"></div>
      <div class="outline-details"></div>
      <div class="outline-details"></div>
      <div class="outline-details"></div>
      <div class="outline-details"></div>
    </div>
    <div class="five-minute">
      <div class="five-minute-markers"></div>
      <div class="five-minute-markers"></div>
      <div class="five-minute-markers"></div>
      <div class="five-minute-markers"></div>
      <div class="five-minute-markers"></div>
    </div>
    <div class="date-window"></div>
    <div class="date-window-texture"></div>
    <div id="date"></div>
    <div class="day-window-border">
      <div class="day-window">
        <div class="day-wrapper">
          <div class="day">
            <div class="text-wrapper"><span class="char0">M</span><span class="char1">o</span><span class="char2">n</span><span class="char3">d</span><span class="char4">a</span><span class="char5">y</span></div>
          </div>
          <div class="day">
            <div class="text-wrapper"><span class="char0">T</span><span class="char1">u</span><span class="char2">e</span><span class="char3">s</span><span class="char4">d</span><span class="char5">a</span><span class="char6">y</span></div>
          </div>
          <div class="day">
            <div class="text-wrapper"><span class="char0">W</span><span class="char1">e</span><span class="char2">d</span><span class="char3">n</span><span class="char4">e</span><span class="char5">s</span><span class="char6">d</span><span class="char7">a</span><span class="char8">y</span></div>
          </div>
          <div class="day">
            <div class="text-wrapper"><span class="char0">T</span><span class="char1">h</span><span class="char2">u</span><span class="char3">r</span><span class="char4">s</span><span class="char5">d</span><span class="char6">a</span><span class="char7">y</span></div>
          </div>
          <div class="day">
            <div class="text-wrapper"><span class="char0">F</span><span class="char1">r</span><span class="char2">i</span><span class="char3">d</span><span class="char4">a</span><span class="char5">y</span></div>
          </div>
          <div class="day">
            <div class="text-wrapper"><span class="char0">S</span><span class="char1">a</span><span class="char2">t</span><span class="char3">u</span><span class="char4">r</span><span class="char5">d</span><span class="char6">a</span><span class="char7">y</span></div>
          </div>
          <div class="day">
            <div class="text-wrapper"><span class="char0">S</span><span class="char1">u</span><span class="char2">n</span><span class="char3">d</span><span class="char4">a</span><span class="char5">y</span></div>
          </div>
        </div>
      </div>
    </div>
    <div class="hand-hour">
      <div class="shadow"></div>
    </div>
    <div class="hand-min">
      <div class="shadow"></div>
    </div>
    <div class="hand-sec">
      <div class="shadow"></div>
    </div>
  </div>
</div>

相关推荐

发表评论

相关文章