這篇文章給大家分享的是有關(guān)HTML5和CSS3如何實現(xiàn)靈動畫的切換效果的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考。一起跟隨小編過來看看吧。

創(chuàng)新互聯(lián)公司-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價比閔行網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式閔行網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務覆蓋閔行地區(qū)。費用合理售后完善，十多年實體公司更值得信賴。

設(shè)計師給了一個 tab 切換的效果圖。雖然是一個很小的功能，但是前端工程師在實現(xiàn)的時候還是有很多細節(jié)需要注意。我寫了一個 demo 給大家參考。

最終實現(xiàn)效果如下：

為了 gif 動畫能夠展示細節(jié)，我將動畫時間延長到了 3 秒

實現(xiàn)思路

間隔豎線，因為不是頂天立地的，所以不能用邊框。我準備用偽元素實現(xiàn)。

只有 3 個豎線，但是有 4 個 li ，這個簡單，可以用 :not(:first-child) 選擇器來選擇。

切換的背景顏色變化，因為想要有從小到大的效果，因此，也不能直接使用背景顏色實現(xiàn)，我也準備用偽元素實現(xiàn)。

如果用偽元素的大小來控制，計算會比較復雜，因此，我想用 box-shadow 陰影來實現(xiàn)。

好，大體就是如此了，下面開始寫代碼，如下：

HTML 代碼

<p class="m">
    <ul class="tab">
      <li><a href="">導航1</a></li>
      <li><a href="">導航2</a></li>
      <li><a href="">導航3</a></li>
      <li><a href="">導航4</a></li>
    </ul>
  </p>

上面的代碼結(jié)構(gòu)是之前已經(jīng)寫好的，我看可以，就不做任何調(diào)整了。沒有什么累贅的代碼。

CSS 代碼

.m { margin: 100px; }
.tab { width: 400px; margin: 0 auto; border: 1px solid #ddd; height: 40px; text-align: center; line-height: 40px; background: #fff; border-radius: 10px; overflow: hidden; }
.tab li { float: left; width: 100px; position: relative; overflow: hidden; }
.tab li:before, .tab li:after, .tab li a { -webkit-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; }
.tab li:before, .tab li:after { content: ""; display: block; }
.tab li:not(:first-child):after { background: #ddd; height: 20px; width: 1px; left: 0; top: 10px; position: absolute; }
.tab li a { display: block; position: relative; z-index: 2; color: #000; font-size: 14px; }
.tab li:before { width: 0; height: 0; top: 50%; left: 50%; z-index: 1; position: absolute; }
.tab li:hover a { color: #fff; }
.tab li:hover:before { box-shadow: 0 0 0 100px #36bc99; }
.tab li:hover + li:after, .tab li:hover:after { height: 0; top: 20px; }

代碼分析：

動畫實現(xiàn)非常簡單，只要使用 transition 屬性即可。

控制自己的偽元素和下一個同級元素的偽元素，只需要使用 + 選擇器即可。

其他代碼都比較清晰簡單，自己分析即可。

實現(xiàn)這個效果還是非常簡單的，重點是平時的積累，以及各種參數(shù)的靈活搭配。想到實現(xiàn)方法，最終寫代碼是很快的事情。而且沒有什么知識高點在里面。

CSS 之所以難，不是你不會，而是不不會去搭配。

其實，還是只還原了99%的設(shè)計效果，兩條線一個在背景里面，一個在背景外面，想要把兩條分割線都放到背景里面來，應該如何實現(xiàn)呢？可以思考一下。

安利一下 scss 。上面的 css 是編譯出來的。其實用 scss 實現(xiàn)非常方便快捷，代碼可讀性也更高。

演示如下：

.m {
  margin: 100px;
}
.tab {
  width: 400px;margin: 0 auto;border: 1px solid $cdd;height: 40px;text-align: center;line-height: 40px;
  background: $cff;border-radius: 10px;overflow: hidden;
  li {
    float: left;width: 100px;position: relative;overflow: hidden;
    &:before,&:after,a {@include dz();}
    &:before,&:after {
      content: "";display: block;
    }
    &:not(:first-child) {
      &:after {
        background: $cdd;height: 20px;width: 1px;left: 0;top: 10px;position: absolute;
      }
    }
    a {
      display: block;position: relative;z-index: 2;color: $c00;font-size: 14px;
    }
    &:before {
      width: 0;height: 0;top: 50%;left: 50%;z-index: 1;position: absolute;
    }
    &:hover {
      a {color: $cff;}
      &:before {
        box-shadow: 0 0 0 100px $cyan;
      }
      & + li:after,&:after {
        height: 0;top: 20px;
      }
    }
  }
}

當然，這段代碼中我用了顏色變量以及 mixin 混入代碼。你不能直接使用。

感謝各位的閱讀！關(guān)于HTML5和CSS3如何實現(xiàn)靈動畫的切換效果就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

新聞名稱：HTML5和CSS3如何實現(xiàn)靈動畫的切換效果-創(chuàng)新互聯(lián)
文章出自：http://chinadenli.net/article28/picjp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站設(shè)計、全網(wǎng)營銷推廣、電子商務、動態(tài)網(wǎng)站、網(wǎng)站內(nèi)鏈、云服務器

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)