开始学习 HTML 和 CSS 写的一个页面，后来在网上看到有意思的效果，都会写一遍

渐变

C O L O R F U L 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.color {
    width: 100%;
    font-size: 4em;
    text-align: center;
}
.color span {
    color: #e0e0e0;
    animation: ColorChange 1s infinite ease-in-out alternate;
}
@keyframes ColorChange {
    to {
        color: #ff0266;
    }
}
1
2
3
document.querySelectorAll('.color span').forEach((span, index) => {
    span.style.animationDelay = `${index * 0.1}s`;
});

透明字

可换艺术字、使用滚动动画

AMAZING

下划线

Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur recusandae voluptatum quo dolore tenetur cum ipsa corporis, reprehenderit tempore inventore et labore sit illum natus, est maiores! Eveniet, corrupti reprehenderit? 
1
2
3
4
5
6
7
8
9
10
11
12
.bline span {
    font-size: 1.5em;
    background: linear-gradient(to right, #f00, #00f) no-repeat;
    background-size: 0px 2px;
    background-position: right bottom;
    transition: background-size 1s;
    cursor: pointer;
}
.bline span:hover {
    background-size: 100% 2px;
    background-position: left bottom;
}

首字样式

A Covenant Between Civilization and Nature

Environmental crises now threaten humanity’s survival. Polar ice melting at unprecedented rates, 90% of seabirds ingesting plastics, and rampant deforestation expose a fractured ecosystem. These are not isolated issues but symptoms of a broken human-nature covenant. True solutions demand dual action: individuals adopting sustainable habits and governments enforcing green policies. As Jane Goodall warned, "Protecting nature is not a choice but a necessity for civilization’s continuity." Environmentalism must evolve from "saving Earth" to redefining humanity’s role as stewards of a shared biological legacy. Only by honoring this planetary covenant can we safeguard tomorrow’s world.

::selection 设置选中文本的样式

::first-letter 设置选中第一个字母

1
2
3
4
5
6
7
8
9
10
.letter div::first-letter {
    font-size: 2em;
    text-transform: uppercase;
    float: left;
    margin-right: 10px;
}
.letter div::selection {
    background-color: palevioletred;
    text-decoration: underline;
}