问剑白玉京 2024-05-26 10:31 采纳率: 74.2%
浏览 22

CSS实现输入框placeholder滚动显示无效

现在我想实现一个功能：当页面变大的时候让输入框中的placeholder滚动显示，实现第一步滚动显示的时候就出错了，根本没有效果
前端我不太懂

img

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Input Animation Demo</title>
    <link rel="stylesheet" href="style.css"> <!-- 引入外部CSS文件 -->
</head>

<body>

    <div class="input-container">
        <input type="text" class="animated-input" placeholder="请输入文字...hahahahahhahhah 呵呵">
    </div>

</body>

</html>

/* 基础样式 */
.input-container {
    display: flex;
    justify-content: center;
    margin-top: 50px;
}

.animated-input {
    padding: 10px;
    font-size: 16px;
    border: 2px solid #ccc;
    border-radius: 4px;
    transition: all 0.3s ease;
}

@keyframes example {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(-100%);
    }
}

.animated-input::placeholder {
    animation-name: example;
    animation-duration: 1s;
}
  • 写回答

3条回答 默认 最新

  • 阿里嘎多学长 2024-05-26 10:31
    关注

    以下内容由CHATGPT及阿里嘎多学长共同生成、有用望采纳：

    根据您提供的代码和描述，问题出在CSS动画的使用上。::placeholder伪元素不支持animation属性，这就是为什么您的滚动显示效果没有实现的原因。要实现placeholder的滚动效果，我们可以使用JavaScript来辅助，或者通过CSS伪元素::after或::before来模拟placeholder，并对其应用动画。

    以下是使用JavaScript实现placeholder滚动效果的一种方法：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Input Animation Demo</title>
    <style>
        .input-container {
            display: flex;
            justify-content: center;
            margin-top: 50px;
        }

        .animated-input {
            padding: 10px;
            font-size: 16px;
            border: 2px solid #ccc;
            border-radius: 4px;
        }

        .placeholder-text {
            white-space: nowrap;
            position: absolute;
            left: 10px;
            top: 50%;
            transform: translateY(-50%);
            color: #ccc;
            animation: scroll 10s linear infinite;
        }

        @keyframes scroll {
            0% { transform: translateX(100%); }
            100% { transform: translateX(-100%); }
        }
    </style>
</head>
<body>

    <div class="input-container">
        <input type="text" class="animated-input" placeholder="请输入文字...hahahahahhahhah 呵呵">
        <div class="placeholder-text">请输入文字...hahahahahhahhah 呵呵</div>
    </div>

    <script>
        const input = document.querySelector('.animated-input');
        const placeholderText = document.querySelector('.placeholder-text');

        input.addEventListener('focus', () => {
            placeholderText.style.animation = 'none';
        });

        input.addEventListener('blur', () => {
            placeholderText.style.animation = '';
        });
    </script>

</body>
</html>

    在这个例子中，我们创建了一个div元素作为placeholder，并为其添加了动画。当输入框获得焦点时，我们停止动画，当输入框失去焦点时，我们恢复动画。

    请注意，这个解决方案依赖于JavaScript来处理输入框获得和失去焦点的事件。

    至于参考资料，您可以查阅以下资源来了解更多关于CSS动画和JavaScript事件处理的知识：

    1. MDN Web Docs - Using CSS animations
    2. MDN Web Docs - CSS ::placeholder
    3. MDN Web Docs - Event reference

    这些资源可以帮助您更深入地了解如何使用CSS和JavaScript来创建动态和交互式的网页效果。

    评论 编辑记录

报告相同问题？

问题事件

  • 创建了问题 5月26日