黑幕
删除线
下划线
文字模糊
蓝色
红色背景
字号
粗体
粗体
斜体
倾斜文本
内边距
外边距
边框
带边框和内边距
阴影
行高
字间距
半透明
文字[1]
文字<a href="#cite_note-1">[注释]</a>
<select data-vv-as="选择框" name="yzwb_mainyjfxm" class="wb-select mid-select" data-vv-id="3" aria-required="true" aria-invalid="true"><option value="">请选择</option> <option value="01">A</option><option value="02">B</option><option value="03">C</select>
<a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="https://www.bilibili.com/">链接</a>
<a href="https://www.bilibili.com/" target="_blank" data-type="link">https://www.bilibili.com/</a>
<a href="https://www.bilibili.com" target="_blank" rel="noopener noreferrer">链接</a>
<iframe src="//player.bilibili.com/player.html?aid=1503591312&bvid=BV19D421J7dW&cid=1520661965&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
<input type="text" placeholder="test" style="width:200px; padding-left:10px; border:2px solid #00CC66; border-radius:10px;">
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>测试文字模糊效果</title>
<style>
.wenzimohu {
filter: blur(5px);
}
.wenzimohu.hovers-blur:hover {
filter: blur(0);
}
</style>
</head>
<body>
<span class="wenzimohu hovers-blur"
style="color:;transition-duration:.75s;vertical-align:initial;"
title="你知道的太多了">
文字模糊
</span>
</body>
</html>
<span class="heimu" title="你知道的太多了">黑幕</span>
<style>.heimu{background:#000;color:#000;transition:.3s;cursor:pointer;padding:2px 6px;border-radius:3px}.heimu:hover,.heimu:active{background:#e0e0e0;color:#000}</style>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>彩虹字体效果</title>
<style>
.rainbow-text {
font-size: 24px;
font-weight: bold;
background: linear-gradient(90deg,
#ff0000, #ff8000, #ffff00,
#80ff00, #00ff80, #00ffff,
#0080ff, #0000ff, #8000ff,
#ff00ff, #ff0080, #ff0000);
background-size: 1200% 100%;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: rainbow-flow 8s linear infinite;
}
@keyframes rainbow-flow {
0% { background-position: 0% 50%; }
100% { background-position: 100% 50%; }
}
</style>
</head>
<body>
<span class="rainbow-text">彩虹字体</span>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>彩虹文本效果</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.container {
max-width: 800px;
width: 100%;
text-align: center;
}
h1 {
font-size: 3rem;
margin-bottom: 2rem;
letter-spacing: 2px;
}
.demo-section {
background: rgba(30, 41, 59, 0.7);
border-radius: 15px;
padding: 2rem;
margin: 2rem 0;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
backdrop-filter: blur(10px);
}
.rainbow-text, .rainbow-text * {
background-image: linear-gradient(to left, #ff4500, orange, gold, #90ee90, #0ff, #1e90ff, #9370db, #ff69b4, #ff4500);
background-size: 110vw;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-animation: rainbow 60s linear infinite;
animation: rainbow 60s linear infinite;
}
@-webkit-keyframes rainbow {
to {
background-position: -2000vw;
}
}
@keyframes rainbow {
to {
background-position: -2000vw;
}
}
.text-large {
font-size: 3.5rem;
font-weight: 800;
margin: 1.5rem 0;
}
.text-medium {
font-size: 2.2rem;
font-weight: 600;
margin: 1.2rem 0;
}
.text-small {
font-size: 1.5rem;
margin: 1rem 0;
}
.controls {
display: flex;
flex-wrap: wrap;
gap: 1rem;
justify-content: center;
margin-top: 2rem;
}
button {
background: rgba(15, 23, 42, 0.8);
color: #e2e8f0;
border: 2px solid #475569;
border-radius: 8px;
padding: 0.8rem 1.5rem;
font-size: 1rem;
cursor: pointer;
transition: all 0.3s ease;
}
button:hover {
background: rgba(30, 41, 59, 0.9);
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
.info-box {
background: rgba(15, 23, 42, 0.6);
border-radius: 10px;
padding: 1.5rem;
margin-top: 2rem;
text-align: left;
line-height: 1.6;
}
.info-box h3 {
margin-bottom: 1rem;
color: #94a3b8;
}
.info-box code {
background: rgba(0, 0, 0, 0.3);
padding: 0.2rem 0.4rem;
border-radius: 4px;
font-family: 'Courier New', monospace;
}
.example-container {
display: flex;
flex-wrap: wrap;
gap: 1rem;
justify-content: center;
margin: 2rem 0;
}
.example-item {
flex: 1;
min-width: 200px;
background: rgba(15, 23, 42, 0.5);
border-radius: 10px;
padding: 1.5rem;
transition: transform 0.3s ease;
}
.example-item:hover {
transform: translateY(-5px);
}
@media (max-width: 768px) {
h1 {
font-size: 2rem;
}
.text-large {
font-size: 2.5rem;
}
.text-medium {
font-size: 1.8rem;
}
.text-small {
font-size: 1.2rem;
}
}
</style>
</head>
<body>
<span class="rainbow-text">彩虹字体彩虹字体彩虹字体彩虹字体彩虹字体彩虹字体彩虹字体彩虹字体彩虹字体彩虹字体彩虹字体彩虹字体彩虹字体彩虹字体彩虹字体彩虹字体彩虹字体彩虹字体彩虹字体彩虹字体彩虹字体彩虹字体彩虹字体彩虹字体彩虹字体彩虹字体</span>
</body>
</html>