发布作者: _北海彡
百度收录: 正在检测是否收录...
最后更新: 2025年 03月 01日 22:14
作品采用: 《 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 》许可协议授权
又搓一个实用的web小组件。当鼠标悬停在文字上方,或轻触一下文字,此背景就会变成一条彩色渐变直线,挺好看的很实用。٩(ˊᗜˋ )و
可能加载一点慢,请耐心等待
https://lgnb.asia/admin/demo/81-bgtext
使用类名 text-bg
使用.在html里在文字标签中添加如: <p class="text-bg">我是文字Hello World</p>
这样就可以使用啦.
.text-bg {
color: #ffffff;
padding: 0 2vmin;
background: linear-gradient(30deg, #2cd8d5, #c5c1ff, #ffbac3) center;
background-size: 100% 90%;
background-repeat: no-repeat;
transition: all 0.4s;
display: inline-block;
margin-top: 5px;
border-radius: 10px;
}
.text-bg:hover, .text-bg.active {
background-size: 100% 10%;
background-position-y: 88%;
color: #2c2c2c;
text-shadow: 0.05em 0.05em 0 #fcfcfc, -0.05em 0.05em 0 #fcfcfc, 0 0.05em 0 #fcfcfc;
此演示页面进入默认显示h1,h2,h3,h4,h5,h6大小的Hello Word
刚在输入框输入文字,可以实时显示对应的文字
输入后自动保存cookie,下次进入自动加载上次保存的内容
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>多彩背景文字演示</title>
<!-- 引入Bootstrap CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f5f5f5;
font-family: Arial, sans-serif;
}
.container {
text-align: center;
background-color: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
max-width: 90vw;
}
#textInput {
width: 100%;
margin-bottom: 20px;
padding: 10px;
font-size: 16px;
border-radius: 25px;
border: 1px solid #ced4da;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
#textInput:focus {
border-color: #80bdff;
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
#textsContainer {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.label {
color: #ccc;
font-size: 0.8em;
margin-top: 5px;
}
.text-bg {
color: #ffffff;
padding: 0 2vmin;
background: linear-gradient(30deg, #2cd8d5, #c5c1ff, #ffbac3) center;
background-size: 100% 90%;
background-repeat: no-repeat;
transition: all 0.4s;
display: inline-block;
margin-top: 5px;
border-radius: 10px;
}
.text-bg:hover, .text-bg.active {
background-size: 100% 10%;
background-position-y: 88%;
color: #2c2c2c;
text-shadow: 0.05em 0.05em 0 #fcfcfc, -0.05em 0.05em 0 #fcfcfc, 0 0.05em 0 #fcfcfc;
}
/* 自定义弹窗样式 */
.custom-modal {
display: none;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.5);
justify-content: center;
align-items: center;
}
.modal-content {
background-color: #fefefe;
padding: 20px;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
max-width: 90%;
text-align: center;
}
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
<input type="text" id="textInput" class="form-control" placeholder="请输入文字...">
<div id="textsContainer"></div>
</div>
<!-- 自定义弹窗 -->
<div id="customModal" class="custom-modal">
<div class="modal-content">
<span class="close">×</span>
<p id="modalText"></p>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
const inputElement = document.getElementById('textInput');
const textsContainer = document.getElementById('textsContainer');
const customModal = document.getElementById('customModal');
const modalText = document.getElementById('modalText');
const closeBtn = document.querySelector('.close');
// 加载上次保存的内容
let lastInput = getCookie("lastInput");
if (lastInput) {
showModal(`已保留上次输入内容:${lastInput}`);
inputElement.value = lastInput;
updateTexts(lastInput);
} else {
updateTexts("Hello World");
}
inputElement.addEventListener('input', function () {
const textValue = inputElement.value;
setCookie("lastInput", textValue, 365);
updateTexts(textValue);
});
function updateTexts(text) {
textsContainer.innerHTML = '';
for (let i = 1; i <= 6; i++) {
let label = document.createElement('span');
label.className = 'label';
label.textContent = `h${i}`;
textsContainer.appendChild(label);
let heading = document.createElement(`h${i}`);
heading.textContent = text;
heading.classList.add('text-bg'); // 应用文本背景样式
textsContainer.appendChild(heading);
// 添加触摸事件监听器
heading.addEventListener('touchstart', function () {
this.classList.add('active');
});
heading.addEventListener('touchend', function () {
setTimeout(() => this.classList.remove('active'), 400); // 延迟移除类以保持动画效果
});
heading.addEventListener('mouseenter', function () {
this.classList.add('active');
});
heading.addEventListener('mouseleave', function () {
this.classList.remove('active');
});
}
}
function setCookie(name, value, days) {
let expires = "";
if (days) {
let date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = "; expires=" + date.toUTCString();
}
document.cookie = name + "=" + (value || "") + expires + "; path=/";
}
function getCookie(name) {
let nameEQ = name + "=";
let ca = document.cookie.split(';');
for (let i = 0; i < ca.length; i++) {
let c = ca[i];
while (c.charAt(0) == ' ') c = c.substring(1, c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
}
return null;
}
function showModal(message) {
modalText.textContent = message;
customModal.style.display = "flex";
}
closeBtn.onclick = function () {
customModal.style.display = "none";
};
window.onclick = function (event) {
if (event.target == customModal) {
customModal.style.display = "none";
}
};
});
</script>
</body>
</html>
—— 评论区 ——