CSS3午夜风车插画特效代码下载



12 45 16



特效描述:午夜风车插画,CSS3午夜风车插画特效代码下载

代码结构

1. 引入CSS

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

2. HTML代码

  <div class="canvas">
    <div class="stars">
      <div class="star star-1 opacity-quarter"></div>
      <div class="star star-2 opacity-quarter"></div>
      <div class="star star-3 opacity-half"></div>
      <div class="star star-4 opacity-half"></div>
      <div class="star star-5 opacity-half"></div>
      <div class="star star-6 opacity-half"></div>
      <div class="star star-7"></div>
      <div class="star star-8 opacity-quarter"></div>
      <div class="star star-9 opacity-quarter"></div>
      <div class="star star-10"></div>
      <div class="star star-11"></div>
      <div class="star star-12 opacity-half"></div>
      <div class="star star-13 opacity-quarter"></div>
      <div class="star star-14 opacity-quarter"></div>
      <div class="star star-15"></div>
      <div class="star star-16 opacity-half"></div>
      <div class="star star-17"></div>
      <div class="star star-18 opacity-half"></div>
      <div class="star star-19"></div>
      <div class="star star-20"></div>
      <div class="star star-21"></div>
      <div class="star star-22 opacity-half"></div>
      <div class="star star-23 opacity-quarter"></div>
      <div class="star star-24 opacity-quarter"></div>
      <div class="star star-25 opacity-half"></div>
      <div class="star star-26"></div>
      <div class="star star-27 opacity-half"></div>
      <div class="star star-28 opacity-quarter"></div>
      <div class="star star-29"></div>
      <div class="star star-30 opacity-half"></div>
    </div>
     <div class="shooting-star"></div>
     <div class="sun"></div> 
    <div class="forest">
      <div class="tree tree1"></div>
      <div class="tree tree2"></div>
      <div class="tree tree3"></div>
      <div class="tree tree4"></div>
      <div class="tree tree5"></div>
      <div class="tree tree6"></div>
      <div class="tree tree7"></div>
      <div class="tree tree8"></div>
      <div class="tree tree9"></div>
      <div class="tree tree10"></div>
      <div class="tree tree11"></div>
      <div class="tree tree12"></div>
      <div class="tree tree13"></div>
      <div class="tree tree14"></div>
    </div>
    <div class="house">
       <div class="windmill">
    <div class="mill-fan">
      <div class="fan-wing fan-1">
        <div class="fan-comb">
          <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
          </ul>
          </div>
      </div>
       <div class="fan-wing fan-2">
        <div class="fan-comb">
          <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
          </ul>
          </div>
      </div>
       <div class="fan-wing fan-3">
        <div class="fan-comb">
          <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
          </ul>
          </div>
      </div>
       <div class="fan-wing fan-4">
        <div class="fan-comb">
          <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
          </ul>
          </div>
      </div>
    </div> 
  </div>
      <div class="roof"></div>
      <div class="floors">
        <div class="light"></div>
        <div class="door"></div>
      </div>
    </div>
  </div>
<div style="text-align:center;margin:-80px 0; font:normal 14px/24px 'MicroSoft YaHei';color:#ffffff">
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: html5动画导航菜单 html5图片动画 html5文字动画 html5表情动画 html5线条动画 html5飘落动画 html5光标动画 html5悬停动画 加载动画 html5弹窗动画 html5动画h5动画 html5按钮动画

×
×
51前端

注册

官方QQ群
qq群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到