最近在做自己的網站漫島網的時候,用到了兩個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;
}
沒事去我的網站看看,現在連鹹魚都缺!