累计撰写 38 篇文章
累计添加 13 个标签
累计收到 223 条评论

动态文字多彩渐变背景触摸鼠标滑动可变直线多彩美观

2025年02月12日 63阅读 0评论 2点赞

首页
/
默认分类
/
正文

又搓一个实用的web小组件。当鼠标悬停在文字上方，或轻触一下文字，此背景就会变成一条彩色渐变直线，挺好看的很实用。٩(ˊᗜˋ )و

演示地址

可能加载一点慢，请耐心等待
https://lgnb.asia/admin/demo/81-bgtext

演示图片

使用类名 text-bg 使用.在html里在文字标签中添加如: <p class="text-bg">我是文字Hello World</p> 这样就可以使用啦.

CSS

.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，下次进入自动加载上次保存的内容
81-2
81-3

演示页面代码 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>
    <!-- 引入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">&times;</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>

2赞

打赏