CSS3白天夜晚卡通场景切换特效代码下载


CSS3白天夜晚卡通场景切换特效代码下载
CSS3白天夜晚卡通场景切换特效代码下载以及白天夜晚、卡通场景切换等js/jquery网页特效代码下载。

1. 引入CSS

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

2. 引入JS

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

3. HTML代码

<div class="container-wrapper">
  <h1>早上好,晚安</h1>
  <p id="subtitle">点击太阳/月亮动画切换</p>
  <div class="container">
    <div class="circle-container">
      <div class="sky">
        <div class="sky-night">
          <div class="stars">
            <div class="shooting-star"></div>
            <div class="star-group-1"></div>
            <div class="star-group-2"></div>
            <div class="star-group-3"></div>
            <div class="star-group-4"></div>
          </div>
        </div>
        <div class="cloud cloud-1"></div>
        <div class="cloud cloud-2"></div>
        <div class="cloud cloud-3"></div>
        <div class="cloud cloud-4"></div>
        <div class="cloud cloud-5"></div>
        <div class="cloud cloud-6"></div>
        <div class="bird bird-1"></div>
        <div class="bird bird-2"></div>
        <div class="bird bird-3"></div>
      </div>
      <div class="mountains">
        <div class="mountain-back">
          <div class="mountain-back-1"></div>
          <div class="mountain-back-2"></div>
        </div>
        <div class="mountain-middle">
          <div class="mountain-middle-1"></div>
          <div class="mountain-middle-2"></div>
        </div>
        <div class="mountain-top">
          <div class="mountain-top-1"></div>
        </div>
      </div>
      <div class="sun-container">
        <div class="sun"></div>
      </div>
      <div class="ocean">
        <div class="boat"></div>
        <div class="ocean-night">
          <div class="moon"></div>
          <div class="mountains mountains-bottom">
            <div class="mountain-back">
              <div class="mountain-back-1"></div>
              <div class="mountain-back-2"></div>
            </div>
            <div class="mountain-middle">
              <div class="mountain-middle-1"></div>
              <div class="mountain-middle-2"></div>
            </div>
            <div class="mountain-top">
              <div class="mountain-top-1"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>

相关推荐

发表评论

相关文章