色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

css3 文字閃光

李昊宇1年前7瀏覽0評論

CSS3中提供了許多美麗的文字效果,其中之一就是文字閃光。下面我們來學習一下如何使用CSS3來實現這種效果。

/*首先我們需要定義一個父級元素*/ 
.text-container {
position: relative;
}
/*然后定義文字樣式,如果需要閃光的文字不是所有的文字,記得使用span包裹*/
.text-container span {
font-size: 40px;
font-weight: bold;
color: #000;
}
/*最后定義閃光動畫*/
.text-container::after {
content: '';
width: 200%;
height: 200%;
position: absolute;
top: -50%;
left: -50%;
background-color: rgba(255, 255, 255, 0.5);
opacity: 0;
transform: rotate(45deg);
animation: shine 2s infinite;
}
/*閃光動畫*/
@keyframes shine {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}

以上就是實現文字閃光的全部樣式代碼。通過定義一個父級元素,然后使用偽元素::after來創建一個覆蓋在文字上面的偽元素,然后再通過CSS3的動畫來實現閃光效果。