本身動手作一個小動畫

時間 2019-11-18

標籤本身動手一個動畫简体版

原文原文鏈接

動手作一個小動畫

@(妙瞳)[html|css|jquery]css

製做動畫想法

由於好久沒寫分享的文章了，以爲分享仍是很重要的，今天跟你們分享個簡單的動畫效果，有不足的地方，但願多多指出，謝謝！
今天注意的是使用transition,實現滑動的動畫，具體代碼能夠參考下面貼出來的代碼塊，假若有疑問的地方，請在評論區提出，謝謝！
因爲好久沒寫了，可能生疏了，有好的建議也能夠提出咯。哈哈。html

html代碼塊

<body>
     <div class="success-lists">
      <ul id="success-img">
          <li class="my-transition">
              <a href="/www.baidu.com" target="_blank" class="my-transition">
                  <div class="suc-img-bg my-transition"></div>
                  <div class="img img1 my-transition">
                  </div>
                  <div class="suc-font-w my-transition transition-center">
                      <div class="suc-name">我是標題1</div>
                      <div class="suc-uni">我是正文1</div>
                      <div class="suc-uni-font my-transition">
                      我是內容1 我是內容1 我是內容1 我是內容1
                      </div>
                  </div>
              </a>
          </li>
          <li class="my-transition">
              <a href="/www.baidu.com" target="_blank" class="my-transition">
                  <div class="suc-img-bg my-transition"></div>
                  <div class="img img2 my-transition">
                  </div>
                  <div class="suc-font-w my-transition transition-center">
                      <div class="suc-name">我是標題2</div>
                      <div class="suc-uni">我是正文2</div>
                      <div class="suc-uni-font my-transition">
                      我是內容2 我是內容2 我是內容2 我是內容2
                      </div>
                  </div>
              </a>
          </li>
          <li class="my-transition active">
              <a href="/www.baidu.com" target="_blank" class="my-transition">
                  <div class="suc-img-bg my-transition"></div>
                  <div class="img img3 my-transition">
                  </div>
                  <div class="suc-font-w my-transition transition-center">
                      <div class="suc-name">我是標題3</div>
                      <div class="suc-uni">我是正文3</div>
                      <div class="suc-uni-font my-transition">
                      我是內容3 我是內容3 我是內容3 我是內容3
                      </div>
                  </div>
              </a>
          </li>
          <li class="my-transition">
              <a href="/www.baidu.com" target="_blank" class="my-transition">
                  <div class="suc-img-bg my-transition"></div>
                  <div class="img img4 my-transition">
                  </div>
                  <div class="suc-font-w my-transition transition-center">
                      <div class="suc-name">我是標題4</div>
                      <div class="suc-uni">我是正文4</div>
                      <div class="suc-uni-font my-transition">
                      我是內容4 我是內容4 我是內容4 我是內容4
                      </div>
                  </div>
              </a>
          </li>
         <li class="my-transition">
              <a href="/www.baidu.com" target="_blank" class="my-transition">
                  <div class="suc-img-bg"></div>
                  <div class="img img5 my-transition">
                  </div>
                  <div class="suc-font-w my-transition transition-center">
                      <div class="suc-name">我是標題5</div>
                      <div class="suc-uni">我是正文5</div>
                      <div class="suc-uni-font my-transition">
                      我是內容5 我是內容5 我是內容5 我是內容5
                      </div>
                  </div>
              </a>
          </li>
      </ul>
    </div>
</body>

CSS代碼塊

<style>
    ul,
    li {
      margin: 0;
      padding: 0;
      list-style-type: none;
    }
    .transition-center{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      -ms-transform: translate(-50%,-50%);
      -moz-transform: translate(-50%,-50%);
      -webkit-transform: translate(-50%,-50%);
      -o-transform: translate(-50%,-50%);
    }
    .my-transition{
      transition-duration: .3s;
    -moz-transition-property: all;
    -moz-transition-duration: .3s;
    -moz-transition-timing-function: ease;
    -moz-transition-delay: 0;
    -o-transition-property: all;
    -o-transition-duration: .3s;
    -o-transition-timing-function: ease;
    -o-transition-delay: 0;
    -webkit-transition-property: all;
    -webkit-transition-duration: .3s;
    -webkit-transition-timing-function: ease;
    -webkit-transition-delay: 0;
    -ms-transition-property: all;
    -ms-transition-duration: .3s;
    -ms-transition-timing-function: ease;
    -ms-transition-delay: 0;
    }
    .success-lists{
      width:1170px;
      margin:0 auto;
      overflow:hidden;
      position:relative;
      height:500px;
    }
    .success-lists ul{
      overflow:hidden;
      height:500px;
    }

    .success-lists ul li{
      float:left;
      width:195px;
      height:500px;
    }
    .success-lists ul li a{
      position:relative;
      display:block;
      width:195px;
      height:500px;
    }
    .success-lists ul li a .suc-img-bg{
        position:absolute;
        z-index:2;
        width:100%;
        height:100%;
        background:rgba(0,0,0,.5);
    }
    .success-lists ul li a .img{
        position:absolute;
        z-index:1;
        background-size: cover;
    }
    .success-lists ul li a .suc-font-w{
        z-index:3;
        color:#fff;
        width:220px;
        height:90px;
        top:75%;
        text-align:center;
    }
    .success-lists ul li a .suc-font-w .suc-name{
        font-size:22px;
    }
    .success-lists ul li a .suc-font-w .suc-uni{
        font-size:14px;
        margin-top: 5px;
    }
    .success-lists ul li a .suc-font-w  .suc-uni-font{
        font-size:16px;
        opacity:0;
        margin-top: 16px;
    }
    .img{
      width:100%;
      height:500px;
    }
    .img1{
      background:url("img1.jpg") no-repeat center center;
    }
    .img2{
      background:url("img2.jpg") no-repeat center center;
    }
    .img3{
      background:url("img3.jpg") no-repeat center center;
    }
    .img4{
      background:url("img4.jpg") no-repeat center center;
    }
    .img5{
      background:url("img5.jpg") no-repeat center center;
    }
    
    .success-lists ul li.active{
      width:390px;
    }
    .success-lists ul li.active a{
      width:100%;
    }
    .success-lists ul li.active a .suc-img-bg{
      width:100%;
      height:100%;
      background:rgba(0,0,0,0);
    }
    .success-lists ul li.active a .img{
      position:absolute;
      z-index:1;
      width:390px;
    }
    .success-lists ul li.active a .suc-font-w{
      width:220px;
      height:90px;
      color:violet;
    }
              
    .success-lists ul li.active a .suc-font-w .suc-uni-font{
      display:block;
      opacity:1;
      color:violet;
    }    
</style>

js 代碼塊

<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>  
    <script>
           $("#success-img>li").hover(function(){
                $(this).addClass("active");
                $(this).siblings().removeClass("active");
            }); 
    </script>

效果圖

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。