当前位置：首页 > 文章列表 > 文章 > 前端 > CSSplaceholder动画效果实现方法

CSSplaceholder动画效果实现方法

2025-11-08 17:09:31 0浏览收藏

想要提升网页表单的用户体验吗？本文将深入探讨如何利用 CSS 的 `::placeholder-shown` 伪元素，结合 `:focus` 状态和 `transition` 属性，轻松实现令人惊艳的 placeholder 动画效果。无需复杂的 JavaScript 代码，即可打造 Material Design 风格的标签上浮效果，让你的输入框更具吸引力。文章将详细介绍实现原理，提供 HTML 结构和 CSS 样式示例，并着重讲解关键代码的细节，例如如何判断用户是否已输入内容、如何使用 `transform` 提升性能，以及如何让动画更加自然。掌握 `::placeholder-shown`，让你的表单交互体验更上一层楼！

当输入框无内容时，::placeholder-shown 激活，结合 :focus 和 transition 可实现占位符上浮动画，如 translateY(-20px) 和缩小字体，模拟 Material Design 标签效果。

css伪元素::placeholder-shown输入占位符动画

当用户在输入框中未输入内容时，::placeholder-shown 伪元素会处于激活状态。我们可以利用它来实现优雅的占位符动画效果，比如让占位符文字“上浮”或缩小，模拟 Material Design 风格的标签动画。

基本原理

::placeholder-shown 是一个 CSS 伪元素，用于匹配当前显示占位符文本的 <input> 或 <textarea> 元素。结合 :focus 和 CSS 过渡，可以创建平滑的占位符动画。

实现占位符上浮动画

目标：输入框获得焦点且用户未输入时，占位符向上移动并变小，形成标签效果。

HTML 结构示例：

CSS 样式：

.input-group {
  position: relative;
  margin: 20px 0;
}

.input-group input {
  padding: 12px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  outline: none;
  transition: 0.3s ease;
}

.input-group input::placeholder {
  opacity: 1;
  color: #999;
  transition: all 0.3s ease;
}

.input-group input:placeholder-shown:not(:focus)::placeholder {
  transform: translateY(0);
}

.input-group input:focus::placeholder,
.input-group input:not(:placeholder-shown)::placeholder {
  transform: translateY(-20px);
  font-size: 12px;
  color: #4a90e2;
}