CSS動畫篇之404動畫

404
當前頁面無法訪問，可能沒有許可權或已刪除。作為一個從事網際網路行業的你是不是見過各種各種的404頁面，今天剛好發現一個比較有趣的404頁面，如上圖所示，是不是感覺挺炫酷呢，本文將和大家分享一下實現原理。

前言

看到上面的404你的第一感覺會是這麼做呢？

來，UI同學給我上GIF。
當然這種方式對於前端同學來說肯定是最簡單的實現方式，單純的載入一張圖片即可。

但是對於一個有追求的前端，絕對不會答應這麼幹，載入一張GIF圖片的成本太高了，網路差的情況下會導致白屏時間過長，所以我們儘可能的用程式碼實現，減少這種不必要的網路請求。

實現

當你仔細看這個動畫的時候可以發現其實主體只有一個標籤，內容就是404，另外的幾個動畫都是基於這個主體實現，所以我們先寫好這個最簡單的html程式碼。

<h1 data-t="404">404</h1>

細心的同學應該看到了我們自定義了一個熟悉data-t，這個我們後續在css中會用到，接下來實現主體的動畫效果，主要的動畫效果就是讓主體抖動並增加模糊的效果，程式碼實現如下所示。

h1 {
  text-align: center;
  width: 100%;
  font-size: 6rem;
  animation: shake .6s ease-in-out infinite alternate;
}

@keyframes shake {
  0% {
    transform: translate(-1px)
  }
  
  10% {
    transform: translate(2px, 1px)
  }
  
  30% {
    transform: translate(-3px, 2px)
  }
  
  35% {
    transform: translate(2px, -3px);
    filter: blur(4px)
  }
  
  45% {
    transform: translate(2px, 2px) skewY(-8deg) scaleX(.96);
    filter: blur(0)
  }
  
  50% {
    transform: translate(-3px, 1px)
  }
}

接下來增加主體動畫後面子兩個子動畫內容，基於偽元素實現，偽元素的內容通過上面html中自定義data-t獲取，主要還用了clip中的rect，具體css程式碼如下。

h1:before {
    content: attr(data-t);
    position: absolute;
    left: 50%;
    transform: translate(-50%,.34em);
    height: .1em;
    line-height: .5em;
    width: 100%;
    animation: scan .5s ease-in-out 275ms infinite alternate,glitch-anim .3s ease-in-out infinite alternate;
    overflow: hidden;
    opacity: .7;
}

@keyframes glitch-anim {
    0% {
        clip: rect(32px,9999px,28px,0)
    }

    10% {
        clip: rect(13px,9999px,37px,0)
    }

    20% {
        clip: rect(45px,9999px,33px,0)
    }

    30% {
        clip: rect(31px,9999px,94px,0)
    }

    40% {
        clip: rect(88px,9999px,98px,0)
    }

    50% {
        clip: rect(9px,9999px,98px,0)
    }

    60% {
        clip: rect(37px,9999px,17px,0)
    }

    70% {
        clip: rect(77px,9999px,34px,0)
    }

    80% {
        clip: rect(55px,9999px,49px,0)
    }

    90% {
        clip: rect(10px,9999px,2px,0)
    }

    to {
        clip: rect(35px,9999px,53px,0)
    }
}

@keyframes scan {
    0%,20%,to {
        height: 0;
        transform: translate(-50%,.44em)
    }

    10%,15% {
        height: 1em;
        line-height: .2em;
        transform: translate(-55%,.09em)
    }
}

偽元素after的動畫與before中的一致，只是部分引數改動，如下所示。

h1:after {
    content: attr(data-t);
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translate(-50%,.34em);
    height: .5em;
    line-height: .1em;
    width: 100%;
    animation: scan 665ms ease-in-out .59s infinite alternate,glitch-anim .3s ease-in-out infinite alternate;
    overflow: hidden;
    opacity: .8
}

總結

到此為止我們的功能就實現完成啦，看完程式碼是不是感覺並沒有很複雜，又為我們的頁面效能提升了大大的一步。

完整的程式碼可以訪問codepen檢視 ? codepen-404

專注前端開發，分享前端相關技術乾貨，公眾號：南城大前端（ID: nanchengfe）

CSS動畫篇之404動畫

前言

實現

總結

相關文章