Foreword:

Today we have selected a HTML5+CSS3 text special effect for you. The text special effect has super cool animation types. Not much to say, let’s take a look.

Description:
This text effect has both reflection effect and random color, which looks very cool. The full text is completed based on HTML5+CSS3.

Project effect display:

insert image description here

Code implementation idea:

make text editable
Set background color, center, style adjustment
set shadow effect
Convert letters to uppercase
Set custom properties
Set box shadow, call custom property
Animate

Key function explanation:

contenteditable is an enumerated attribute indicating whether the element can be edited by the user. If it can, the browser modifies the element's components to allow editing.

Projection effect:

-webkit-box-reflect:below 1px linear-gradient(transparent, rgba(0,0,0,0.2));

The -webkit-box-reflect property provides element reflection:

Three parameters:
- Parameter 1: Direction: above (up) below (down) left (left) right (right).
- Parameter 2: The distance between the reflection and the element (px or percentage).
- Parameter 3: cover the image, the syntax is similar to background-image.

The linear-gradient() function is used to create an image representing a linear gradient of two or more colors. The result is of the gradient data type, which is a special image data type.

transparent: transparent.

Convert English letters to uppercase

text-transform: uppercase;

Custom attribute --c, which can be called through the var function

--c:lightseagreen;

Call the custom attribute –c to set the text shadow (glow effect)

  text-shadow: 0 0 10px var(--c),
0 0 20px var(--c),
0 0 40px var(--c),
0 0 80px var(--c),
0 0 160px var(--c);

Executing the animation: the animation name can be played infinitely linearly

animation: animate 5s linear infinite;

define animation

@keyframes animate{
    to{
        /* 色相旋转过滤镜（设置度数可改变颜色） */
        filter: hue-rotate(360deg);
    }
}

Instructions:

Create a new file with the suffix HTML, copy the following code into it, and double-click to open it.
Of course, you can also download directly through the link below. After the download is complete, double-click to open it.
Click to download: https://download.csdn.net/download/weixin_62897746/87392558

Implementation code:

<!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>Document</title>
    <style>
        *{
            /* 初始化 */
            margin: 0;
            padding: 0;
        }
        body{
            /* 100% 窗口高度 */
            min-height: 100vh;
            width: 100%;
            /* 弹性布局 水平+垂直居中 */
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #06252e;
        }
        .box{
            width: 100%;
            /* 投影效果 */
            -webkit-box-reflect:below 1px linear-gradient(transparent, rgba(0,0,0,0.2));
        }
        h1{
            color: #fff;
            font-size: 96px;
            /* 字间距 */
            letter-spacing: 15px;
            /* 转大写 */
            text-transform: uppercase;
            text-align: center;
            line-height: 76px;
            outline: none;
            /* 自定义属性 --c,可通过 var 函数对其调用 */
            --c:lightseagreen;
            /* 调用自定义属性--c，设置文字阴影（发光效果） */
            text-shadow: 0 0 10px var(--c),
            0 0 20px var(--c),
            0 0 40px var(--c),
            0 0 80px var(--c),
            0 0 160px var(--c);
            /* 执行动画：动画名 时长 线性的 无限次播放 */
            animation: animate 5s linear infinite;
        }
        /* 定义动画 */
        @keyframes animate{
            to{
                /* 色相旋转过滤镜（设置度数可改变颜色） */
                filter: hue-rotate(360deg);
            }
        }
    </style>
</head>
<body>
    <div class="box">
        <h1 contenteditable="true">hello</h1>
    </div>
</body>
</html>

Summarize:

The above is a small example based on HTML5+CSS3: colorful luminous word special effects, if you don’t understand it, you can ask me in the comment area or chat with me privately. Some new functions will be released in the future, so stay tuned.
My other articles: https://blog.csdn.net/weixin_62897746?type=blog

Small example of HTML5+CSS3: colorful special effects of luminous characters