【HTML&CSS】最新記事を強調する「New」のPopupアニメーションのSampleCode

こんにちは、フロントエンドエンジニアのまさにょんです。

今回は、最新記事を強調する「New」のPopupアニメーションのSampleCodeを掲載します。

1 最新記事を強調する「New」のPopupアニメーションのSampleCode
2 おすすめ書籍(HTML&CSS編)
3 Twitterやってます！Follow Me！
4 最近の投稿

最新記事を強調する「New」のPopupアニメーションのSampleCode

SampleCodeを実行すると次のような「New」で最新記事を強調するリストが画面に表示されます。

この最新記事リストはアニメーションによって、指定した間隔でStyleが変わるようになっています。

HTMLを実行してみてもらえばわかりますが、Newが一定間隔で点滅するようになっています。

SampleCodeは、次のとおりです。


<!-- Page-List-Style -->
<style>

    .new-article-list {
        list-style: none; 
    }
                    
    .new-article-highlight {
        color: orangered;
        transform: scale(0.6)
                    translateX(-30%);
        animation: newAnime .9s infinite alternate; /* ブリンクのアニメ指定    */
    }
    @keyframes newAnime {
        0% { color: orangered;          /* ブリンク時の文字色      */
                background : #ffffff;          /* ブリンク時の背景色      */
            }
        100% { color: orangered;      /* ブリンク時の文字色      */
                background : #ff0000;          /* ブリンク時の背景色      */
            }
    }
</style>

<div>
    <ul class="new-article-list">
        <li>
            <span class="new-article-highlight">New</span>
             
            <span>ロボ玉の冒険🔥</span>
        </li>
        <li>
            <span class="new-article-highlight">New</span>
             
            <span>神聖グンマー帝国、ロボ玉教団🔥</span>
        </li>
        <li>
            <span class="new-article-highlight">New</span>
             
            <span>今日もぷるぷる！！ロボ玉なのだ🔥</span>
        </li>
    </ul>
</div>