CSS熒光特效是一種非常酷炫的效果,可以使網頁的某些元素發出熒光色的炫目效果,為網頁增加了一抹亮點。下面我們將介紹幾種實現CSS熒光特效的方法。
/*方法一:使用文字陰影*/ .glowing-text { color: #fff; text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #8f00ff, 0 0 70px #8f00ff, 0 0 80px #8f00ff, 0 0 100px #8f00ff, 0 0 150px #8f00ff; } /*方法二:使用偽元素*/ .glowing-effect::before { content: ''; position: absolute; top: -10px; left: -10px; width: calc(100% + 20px); height: calc(100% + 20px); border-radius: 8px; background-color: #8f00ff; z-index: -1; animation: glowing 2s ease-in-out infinite; } @keyframes glowing { 0% { opacity: 0.5; box-shadow: 0 0 10px #8f00ff; } 50% { opacity: 1; box-shadow: 0 0 20px #8f00ff; } 100% { opacity: 0.5; box-shadow: 0 0 10px #8f00ff; } } /*方法三:使用漸變色*/ .glowing-gradient { background-image: linear-gradient(145deg, #8f00ff, #00ff95); background-size: 400% 400%; animation: glowing-gradient 2s ease-in-out infinite; } @keyframes glowing-gradient { 0% { background-position: 0 0; } 50% { background-position: 100% 100%; } 100% { background-position: 0 0; } }
通過這三種方法,我們可以輕松地實現CSS熒光特效。特別是在網站的導航、按鈕、文字等元素上加上熒光特效,可以讓網站更加生動有趣,也更具吸引力。