current position:Home>Flashing Neon Text Animation

Flashing Neon Text Animation

2022-08-06 08:45:31JiuMeilove

效果图
在这里插入图片描述

源码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flashing Neon Text Animation</title>
    <style> /* cyrillic */ @font-face {
       font-family: 'Bad Script'; font-style: normal; font-weight: 400; src: url(https://fonts.gstatic.com/s/badscript/v16/6NUT8F6PJgbFWQn47_x7pO8kzO1A.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* latin */ @font-face {
       font-family: 'Bad Script'; font-style: normal; font-weight: 400; src: url(https://fonts.gstatic.com/s/badscript/v16/6NUT8F6PJgbFWQn47_x7pOskzA.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } body {
       margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #000; font-family: 'Bad Script', cursive; } h1 {
       margin: 0; padding: 0; color: #111; font-size: 16em; } h1 span {
       display: table-cell; margin: 0; padding: 0; animation: animate 2s linear infinite; animation-delay: calc(var(--i)*0.25s); } @keyframes animate {
       0%, 100% {
       color: #fff; filter: blur(2px); text-shadow: 0 0 10px #00b3ff, 0 0 10px #00b3ff, 0 0 20px #00b3ff, 0 0 40px #00b3ff, 0 0 80px #00b3ff, 0 0 120px #00b3ff, 0 0 200px #00b3ff, 0 0 300px #00b3ff, 0 0 400px #00b3ff; } 5%, 95% {
       color: #111; filter: blur(0px); text-shadow: none; } } </style>
</head>

<body>
    <h1 class="text-luminous">
    </h1>
    <Script> window.onload = () => {
       let strText = "stunning" strLuminous(strText); function strLuminous() {
       let luminousBox = document.getElementsByClassName("text-luminous")[0]; var strList = arguments[0].slice(""); for (let index = 0; index < strList.length; index++) {
       var span = document.createElement('span'); span.style = '--i:' + index + ';'; span.innerHTML = strList[index]; luminousBox.appendChild(span); luminousBox.style = 'background-color: #000;' } } }; </Script>
</body>

</html>

copyright notice
author[JiuMeilove],Please bring the original link to reprint, thank you.
https://en.chowdera.com/2022/218/202208060818396438.html

Random recommended