英雄聯盟比賽選手的六芒星能力圖影片是如何制作的？-有解無憂

最近，在看 LPL 比賽的時候，看到這樣一個有意思的六芒星能力圖影片：

今天，我們就來使用純 CSS 實作這樣一個影片效果！

實作背景網格

對于如下這樣一個背景網格，最好的方式當然肯定是切圖，或者使用 SVG 路徑，

如果一定要使用 CSS，勉強也能做，這就涉及了不規則圖形邊框效果，我們有一些方式可以實作，可以參考一下這幾篇文章：

現代 CSS 高階技巧，不規則邊框解決方案
有意思！不規則邊框的生成方案

這里，我們可以使用 drop-shadow()，大致實作一下這個效果，核心步驟：

通過疊加實作一個六邊形圖形
利用 drop-shadow() 實作邊框效果

用動圖演示一下，大概是這樣：

代碼如下：

<div></div>

div {
    position: relative;
    width: 150px;
    height: 260px;
    background: #fff;
    filter: 
        drop-shadow(0 0 .5px #333)
        drop-shadow(0 0 .5px #333)
        drop-shadow(0 0 .5px #333);
    &::before,
    &::after {
        content: "";
        position: absolute;
        inset: 0;
        background: inherit;
    }
    &::before {
        transform: rotate(60deg);
    }
    &::after {
        transform: rotate(-60deg);
    }
}

效果如下：

只需要多疊加幾次，配合 3 條直線，整個背景就能很快的畫出來，完整的代碼，使用 SASS 表示如下：

<div >
    <ul >
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

.g-container {
    position: relative;
    width: 300px;
    height: 300px;
}
.g-bg {
    position: absolute;
    inset: 0;
    
    &::after {
        content: "";
        position: absolute;
        inset: 20px 0;
        z-index: 6;
        background: 
            linear-gradient(transparent, transparent calc(50% - .5px), #333 calc(50% - .5px), #333 calc(50% + .5px), transparent calc(50% + .5px), transparent),
            linear-gradient(120deg, transparent, transparent calc(50% - 1px), #333 calc(50% - .5px), #333 calc(50% + .5px), transparent calc(50% + 1px), transparent),
            linear-gradient(240deg, transparent, transparent calc(50% - 1px), #333 calc(50% - .5px), #333 calc(50% + .5px), transparent calc(50% + 1px), transparent);
        clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    }
    
    li {
        --rotate: 0deg;
        position: absolute;
        width: 150px;
        height: 260px;
        translate: -50% -50%;
        left: 50%;
        top: 50%;
        background: #fff;
        filter: 
            drop-shadow(0 0 .5px #333)
            drop-shadow(0 0 .5px #333)
            drop-shadow(0 0 .5px #333);

        &::before,
        &::after {
            content: "";
            position: absolute;
            inset: 0;
            background: inherit;
        }
        &::before {
            transform: rotate(60deg);
        }
        &::after {
            transform: rotate(-60deg);
        }
    }
    @for $i from 1 to 5 {
        li:nth-child(#{$i}) {
            z-index: #{$i};
            width:  #{(1 - $i / 5) * 150}px;
            height: #{(1 - $i / 5) * 260}px;
        }
    }
}

背景網格就出來了：

實作六芒星樣式

有了背景圖，接下來，我們只需要實作六芒星效果圖加上影片即可，

要實作這么一個圖形其實非常簡單，利用 clip-path 裁剪即可：

只需要兩步：

實作一個漸變圖形
利用 clip-path 進行裁剪

核心代碼：

<div></div>
···
```CSS
div {
    background: linear-gradient(rgba(241,94,174, .8), rgba(255, 152, 0, .8));
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

當然，我們可以把坐標點當成引數，把坐標點計算好后，通過行內標簽的 style 傳遞進 CSS 中，這樣，就可以展示不同基于的六芒星的圖案，

像是這樣：

<div style="--polygon: 30% 10%, 75% 1%, 94% 51%, 71% 94%, 44% 60%, 8% 50%"></div>
<div style="--polygon: 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%"></div>
···
```CSS
div {
    background: linear-gradient(rgba(241,94,174, .8), rgba(255, 152, 0, .8));
    clip-path: polygon(var(--polygon));
}

這樣就能快速得到不同的圖形：

借助 CSS @property 實作影片 Hover 效果

最后一步，我們只需要實作 Hover 影片即可，

這里，我們需要借助 CSS @property 實作，

關于 CSS @property，還不太了解的同學，可以參考：CSS @property，讓不可能變可能，

這里其實就是一個餅圖影片，首先，我們來實作一個動態的餅圖影片，

假設，我們有如下結構：

<div></div>

.normal {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: conic-gradient(yellowgreen, yellowgreen 25%, transparent 25%, transparent 100%); 
    transition: background 300ms;
    
    &:hover {
        background: conic-gradient(yellowgreen, yellowgreen 60%, transparent 60.1%, transparent 100%); 
    }
}

將會得到這樣一種效果，由于 conic-gradient 是不支持過渡影片的，得到的是一幀向另外一幀的直接變化：

好，使用 CSS @property 自定義變數改造一下：

@property --per {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 25%;
}

div {
    background: conic-gradient(yellowgreen, yellowgreen var(--per), transparent var(--per), transparent 100%); 
    transition: --per 300ms linear;
    
    &:hover {
        --per: 60%;
    }
}

看看改造后的效果，借助 CSS @property 自定義變數，我們能夠實作過往無法實作的過渡影片效果：

CodePode Demo -- conic-gradient 配合 CSS @property 實作餅圖影片

在本 DEMO 中，我們會運用一樣的技巧，只不過，我們會把 CSS @property 自定義變數運用在 mask 上，通過 mask 的遮罩效果，實作 Hover 程序的展示影片，

關于 mask，還不太了解的同學，可以參考：奇妙的 CSS MASK，

核心代碼如下：

<div  style="--polygon: 43% 36%, 69% 12%, 99% 50%, 71% 94%, 30% 90%, 5% 50%"></div>

@property --per {
  syntax: '<percentage> | <angle>';
  inherits: false;
  initial-value: 360deg;
}
.g-content {
    position: absolute;
    inset: 20px 0;
    z-index: 10;
    mask: conic-gradient(#000, #000 var(--per), transparent var(--per), transparent 360deg); 

    &:hover {
        animation: hoverPie 600ms ease-in-out;
    }
    
    &::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(rgba(241,94,174, .8), rgba(255, 152, 0, .8));
        clip-path: polygon(var(--polygon));
    }
}
@keyframes hoverPie {
    0% {
        --per: 0deg;
    }
    100% {
        --per: 360deg;
    }
}

這里：

我們用元素的 &::before 實作了我們上述說的六芒星樣式圖
利用元素本身的 mask 配合一個 CSS @property 屬性實作遮罩影片

整體 Hover 上去的效果如下：

我們把上述所有的內容融合一下，就能得到完整的效果：

至此，我們就大致還原了整個效果，撒花！

完整的代碼，你可以戳這里：CodePen Demo -- LPL Player Hexagram Ability Chart Animation

最后

好了，本文到此結束，希望本文對你有所幫助 ??

想 Get 到最有意思的 CSS 資訊，千萬不要錯過我的公眾號 -- iCSS前端趣聞 ??

更多精彩 CSS 技術文章匯總在我的 Github -- iCSS ，持續更新，歡迎點個 star 訂閱收藏，

如果還有什么疑問或者建議，可以多多交流，原創文章，文筆有限，才疏學淺，文中若有不正之處，萬望告知，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/547968.html

標籤：其他

上一篇：解決ueditor表格拖拽沒反應的問題

下一篇：前端設計模式——外觀模式