CSS文字選中樣式和文字閃爍效果

最近在做自己的網站漫島網的時候,用到了兩個CSS美化效果,爲了防止遺忘,記錄一下!

第一個是文字選中效果,這個可能很少有人注意過。一般網站默認的都是藍色背景白色字體代表文字被選中,效果如下:
這裏寫圖片描述

但是我們可以小小的改變一下配色,雖然只是微小的一點改動,但是效果卻很好呢!
這裏寫圖片描述

/*文字選中效果*/
*::selection {
    background-color: palevioletred;
    color: white;
}

*::-moz-selection {
    background-color: palevioletred;
    color: white;
}

*::-webkit-selection {
    background-color: palevioletred;
    color: white
}

另外一個就是文字的閃爍效果了,這個主要是利用C3的動畫實現的,通過控制透明度達到這個閃爍效果,用在某些特定場景下是很不錯的。
效果圖:
這裏寫圖片描述
CSS代碼如下:

@-webkit-keyframes shake {
    0% {
        opacity: 0.8;
    }
    50% {
        opacity: 0.4;
    }
    100% {
        opacity: 0.8;
    }
}

@keyframes shake {
    0% {
        opacity: 0.8;
    }
    50% {
        opacity: 0.4;
    }
    100% {
        opacity: 0.8;
    }
}

.shake {
    -webkit-animation: shake 2.2s infinite;
    animation: shake 2.2s infinite;
}

沒事去我的網站看看,現在連鹹魚都缺!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章