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的動畫來實現閃光效果。