css 实现js
CSS 实现 JavaScript 的部分功能
CSS 可以通过一些技巧模拟 JavaScript 的部分交互效果，例如点击事件、状态切换、动画等。以下是几种常见场景的实现方式。
使用 :checked 伪类实现点击切换
通过复选框或单选框的 :checked 状态，结合 label 标签实现点击切换效果。
<input type="checkbox" id="toggle" hidden>
<label for="toggle">点击切换</label>
<div class="content">内容区域</div>.content {
display: none;
}
#toggle:checked ~ .content {
display: block;
}使用 :hover 或 :focus 实现悬停/聚焦效果
通过伪类触发简单的交互效果，无需 JavaScript。
.button:hover {
background-color: #f0f0f0;
}
.input:focus {
border-color: blue;
}使用 CSS 变量动态修改样式
通过 CSS 变量结合 :root 或元素内联样式实现动态样式调整。
:root {
--primary-color: red;
}
.button {
background-color: var(--primary-color);
}<button style="--primary-color: blue">蓝色按钮</button>使用 @keyframes 实现动画
通过 CSS 动画模拟 JavaScript 的动画效果。
@keyframes slide {
from { transform: translateX(0); }
to { transform: translateX(100px); }
}
.box {
animation: slide 2s infinite alternate;
}使用 :target 伪类实现页面内跳转效果
通过 URL 的哈希值触发样式变化。
<a href="#section1">跳转到 Section 1</a>
<div id="section1">Section 1 内容</div>#section1:target {
background-color: yellow;
}注意事项
- CSS 实现的交互功能有限，复杂逻辑仍需 JavaScript。
- 部分伪类（如
:checked）依赖 HTML 结构，可能不够灵活。 - 动画和过渡效果在性能上通常优于 JavaScript，但控制粒度较低。
通过合理使用 CSS 的选择器、变量和动画，可以减少对 JavaScript 的依赖，尤其是在简单的交互场景中。
