遙領先~

可以點擊查看運行效果，雖然適配了手機屏幕，但是動畫效果還是火狐瀏覽器最流暢

前言

最近在看到一位大佬用CSS寫了鴻蒙OS的開機動畫，不過只是字母O的出場特效，看完覺得挺有意思，就想著能不能把整個動畫效果給實現出來，說干就干，也不管能不能實現，拿起鍵盤就是一頓敲……

當然了，開始敲之前肯定是先在網上搜一波，看有沒有現成的，如果有人已經寫了并且還原度很高，那我直接copy過來看一下不就得了， 還敲個錘子……

然后我網上搜到的答案只有這兩個：

• 純css實現華為鴻蒙開機動畫：這個是css實現的，但是最終效果差了點意思，只是做了個大概，與預期有點差距
• codepen：這個是codepen上搜到的，看著還原度更高了一點，有了聚光燈模糊漸變的效果，但是用的是canvas

最后就是不想搞這么麻煩，只想用css一把梭，能用css實現的動效，我就不想用js……

分析動畫

仔細看了好幾遍鴻蒙OS的開機動畫，大致分成以下幾個階段：

1. 字母O的睜眼效果，直接把上面大佬寫的copy下來
2. HarmonyOS 除了O之外的其他字母顯現，并且整體縮小向左平移
3. 平移的同時會有一個聚光燈效果，像一個手電筒照亮在O上面，然后擴散至全部字母顯現
4. 字母O下方的下劃線動效

開敲

屏幕兼容問題

首先需要考慮的一個問題是兼容，當然這里說的不是兼容IE……只是需要簡單兼容一下不同屏幕大小的顯示，確保在PC和手機上能正常顯示

簡單用媒體查詢rem布局寫了一下不同分辨率屏幕下的顯示大小，主要為了自己方便計算，這里貼一下代碼，不做太多解釋了，不熟悉的可以去了解一下rem布局的原理

html {
    font-size: 10px;
}

@media screen and (max-width: 767px) {
    html {
        font-size: 6px;
    }
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
    html {
        font-size: 8px;
    }
}

@media screen and (min-width: 1024px) and (max-width: 1199px) {
    html {
        font-size: 10px;
    }
}

@media screen and (min-width: 1200px) {
    html {
        font-size: 12px;
    }
}

字母O的睜眼動畫就不做解釋了，直接去看原文，我在此基礎上做了修改

HarmonyOS 除了O之外的其他字母顯現，并且整體縮小向左平移

html結構如下，做了一些修改

<div class="container">
    <span class="delay">Harmony</span>
    <div class="letter">
        <ul class="ul">
            <li class="harmony"></li>
        </ul>
        <ul class="ul">
            <li class="harmony"></li>
        </ul>
        <svg>
            <filter id="blur">
                <feGaussianBlur in="SourceGraphic" stdDeviation="0 6" />
            </filter>
        </svg>
    </div>
    <span class="delay">S</span>
</div>

除了O之外其他字母顯現這個很容易，用opacity就可以實現，等2秒是讓字母O動畫結束后執行，加這個動畫的目的主要是先讓字母O執行完動畫，配合聚光燈效果

.delay{
    opacity: 0;
    animation: fade_in 2s 0.5s forwards;
}

@keyframes fade_in {
    to {
        opacity: 1;
    }
}

整體縮小向左平移首先想到的是縮放然后向左平移，最后發現平移都沒必要了，直接默認整體放大，原點設置在左側中間位置，這樣縮小動畫的時候會整體以左邊為基點恢復到原位

chrome在放大后動畫感覺不是那么絲滑，沒關系，不用在意這些細節……用火狐瀏覽器效果不錯

scale(2.5)大概試了個值，這個時候字母O剛好在中間，差不多就行，不用在意這些細節……

cubic-bezier(0.1, 0.6, 0, 1)這個貝塞爾曲線是自己試出來的，感覺效果比較類似

.container {
    position: relative;
    display: flex;
    justify-content: center;
    font-size: 10rem;
    color: white;
    transform: scale(2.5);
    transform-origin: 100% 50%;
    animation: move 0.8s 1.5s cubic-bezier(0.1, 0.6, 0, 1) forwards;
}

@keyframes move {
    to {
        transform: none;
    }
}

聚光燈效果

html結構新增<div class="shadow__spot"></div>與class="container"同級

這個其實我首先想到的就是類似聚光燈效果的蒙版擴散，所以在codepen上搜了一下，有個效果比較滿意：XWdRwrm，但是這個css屬性值不能使用動畫過渡，想實現的話應該需要js，所以我又想到了用漸變色做蒙版好像也可以，但是漸變色的屬性值也是不支持動畫過渡的，我改成紅色先看一下效果：

.shadow__spot {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, transparent 6rem, red 20rem);
    animation: fade_spot 1s 1.5s forwards;
}

@keyframes fade_spot {
    to {
        background: radial-gradient(circle, transparent 30rem, red 60rem);
    }
}

額……難道還得用js?

不，總有簡單粗暴的方法，既然不支持過渡，那就直接放大，放大到全部顯示為止……

.shadow__spot {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, transparent 6rem, red 20rem);
    animation: fade_spot 1s 1.5s forwards;
}

@keyframes fade_spot {
    to {
        transform: translateX(10rem) scale(5);
    }
}

效果好像還不錯，把顏色改成黑色就大功告成了

注意這里加了個translateX(10rem)讓蒙版向右偏移了一點，主要目的是為了盡量讓焦點聚焦在字母O上，更接近官方動畫效果，也是個大概值……

注意這里scale(5)放大5倍后是會出現滾動條的，所以在body上設置了overflow: hidden

字母O下方的下劃線動效

這個比較簡單就不多做解釋了，直接flex布局，水平居中改變寬度就實現了

html結構中svg標簽下方添加<div class="line"></div>

.letter .line{
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 1rem;
    display: flex;
    justify-content: center;
}

.letter .line::after{
    content: '';
    width: 0%;
    background-color: #146df7;
    animation: line 0.5s 1.7s forwards;
}

@keyframes line {
    to {
        width: 60%;
    }
}

最后看一下最終效果，火狐瀏覽器比較絲滑，我錄個火狐的運行gif圖

是不是有內味了？

其實最后還有個掃光效果，懶得搞了，也是比較簡單，類似于骨架屏的掃光

全部代碼