首页 建站教程 前端编程 正文

原生 HTML 实现无 JS 交互效果合集｜纯 CSS 搞定常见交互，零 JavaScript！

前端编程
开会员与付费前请必须阅读这篇文章，在首页置顶第一篇：（进站必看本站VIP介绍/购买须知）
本站所有源码均为自动秒发货，默认（百度网盘）
在日常开发中，很多交互效果我们习惯性依赖 JavaScript 实现，但其实纯 HTML+CSS就能搞定绝大多数基础交互，不仅减少代码体积、提升加载速度，还能兼容低版本浏览器、降低开发成本。
今天给大家整理了10 个高频无 JS 交互效果，全部原生 HTML+CSS 实现，复制即用，适合新手学习、项目开发、面试积累！

前言

✅ 无任何 JavaScript 代码

✅ 纯 HTML+CSS 实现，兼容性极佳

✅ 适合导航、表单、菜单、弹窗、轮播等场景

✅ 代码简洁，可直接复制到项目中使用

一、纯 CSS 手风琴折叠菜单

不用 JS，利用checkbox选中状态实现折叠 / 展开，适合侧边栏、下拉菜单。
html
预览
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>纯CSS手风琴菜单</title>
    <style>
        .accordion { width: 300px; margin: 20px auto; }
        .item { border: 1px solid #eee; margin-bottom: 8px; }
        .title {
            padding: 12px;
            background: #f5f5f5;
            cursor: pointer;
            user-select: none;
        }
        .content {
            height: 0;
            overflow: hidden;
            transition: 0.3s;
            padding: 0 12px;
        }
        /* 核心：选中时展开内容 */
        input:checked ~ .content {
            height: auto;
            padding: 12px;
        }
        /* 隐藏原生checkbox */
        input { display: none; }
    </style>
</head>
<body>
<div class="accordion">
    <div class="item">
        <input type="checkbox" id="item1">
        <label class="title" for="item1">菜单 1</label>
        <div class="content">这里是折叠内容 1</div>
    </div>
    <div class="item">
        <input type="checkbox" id="item2">
        <label class="title" for="item2">菜单 2</label>
        <div class="content">这里是折叠内容 2</div>
    </div>
</div>
</body>
</html>
核心原理：<input type="checkbox"> + :checked 伪类控制内容显示隐藏。

二、纯 CSS 点击切换 Tab 标签页

前端最常用的 Tab 切换，零 JS 实现，支持多标签、样式自定义。
html
预览
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>纯CSS Tab切换</title>
    <style>
        .tab-box { width: 400px; margin: 30px auto; }
        .tab-nav { display: flex; border-bottom: 1px solid #eee; }
        .tab-nav label {
            padding: 10px 20px;
            cursor: pointer;
        }
        .tab-content { display: none; padding: 15px; }
        /* 选中对应标签显示内容 */
        #tab1:checked ~ .nav1,
        #tab2:checked ~ .nav2 {
            background: #42b983;
            color: white;
        }
        #tab1:checked ~ #content1,
        #tab2:checked ~ #content2 {
            display: block;
        }
        input { display: none; }
    </style>
</head>
<body>
<div class="tab-box">
    <input type="radio" name="tab" id="tab1" checked>
    <input type="radio" name="tab" id="tab2">

    <div class="tab-nav">
        <label for="tab1" class="nav1">标签 1</label>
        <label for="tab2" class="nav2">标签 2</label>
    </div>

    <div class="tab-content" id="content1">内容 1</div>
    <div class="tab-content" id="content2">内容 2</div>
</div>
</body>
</html>
适用场景：个人主页、后台管理系统、商品详情页。

三、纯 CSS hover 下拉菜单

最基础的导航下拉菜单，仅用:hover实现，无需任何 JS。
html
预览
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>纯CSS下拉菜单</title>
    <style>
        .nav { display: flex; background: #333; padding: 0 20px; }
        .menu {
            position: relative;
            padding: 12px 20px;
            color: white;
            cursor: pointer;
        }
        .submenu {
            position: absolute;
            top: 100%;
            left: 0;
            background: white;
            border: 1px solid #eee;
            min-width: 120px;
            display: none;
        }
        .submenu a {
            display: block;
            padding: 8px 12px;
            color: #333;
            text-decoration: none;
        }
        /* hover 显示下拉 */
        .menu:hover .submenu { display: block; }
    </style>
</head>
<body>
<div class="nav">
    <div class="menu">首页</div>
    <div class="menu">
        产品中心
        <div class="submenu">
            <a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >产品1</a>
            <a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >产品2</a>
        </div>
    </div>
</div>
</body>
</html>

四、纯 CSS 模态框（弹窗）

点击打开弹窗、点击关闭按钮关闭弹窗，完全无 JS！
html
预览
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>纯CSS模态框</title>
    <style>
        .modal { display: none; }
        .modal:target {
            display: flex;
            position: fixed;
            top: 0; left: 0;
            width: 100%; height: 100%;
            background: rgba(0,0,0,0.5);
            justify-content: center;
            align-items: center;
        }
        .content {
            background: white;
            padding: 30px;
            border-radius: 8px;
            position: relative;
        }
        .close {
            position: absolute;
            top: 10px; right: 15px;
            text-decoration: none;
            font-size: 20px;
            color: #666;
        }
    </style>
</head>
<body>
<a href="#modal1" rel="external nofollow" >打开弹窗</a>

<div id="modal1" class="modal">
    <div class="content">
        <a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  class="close">×</a>
        <h3>纯CSS弹窗</h3>
        <p>我是无JS实现的弹窗内容～</p>
    </div>
</div>
</body>
</html>
核心原理：利用 CSS :target 伪类匹配 URL 哈希值实现显示 / 隐藏。

五、纯 CSS 开关按钮（Switch）

表单常用开关按钮，纯 CSS 绘制，支持选中 / 未选中状态。
html
预览
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>纯CSS开关按钮</title>
    <style>
        .switch {
            position: relative;
            display: inline-block;
            width: 50px;
            height: 24px;
        }
        .switch input { display: none; }
        .slider {
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background: #ccc;
            border-radius: 24px;
            cursor: pointer;
            transition: 0.3s;
        }
        .slider:before {
            position: absolute;
            content: "";
            height: 18px;
            width: 18px;
            left: 3px;
            bottom: 3px;
            background: white;
            border-radius: 50%;
            transition: 0.3s;
        }
        input:checked + .slider {
            background: #42b983;
        }
        input:checked + .slider:before {
            transform: translateX(26px);
        }
    </style>
</head>
<body>
<label class="switch">
    <input type="checkbox">
    <span class="slider"></span>
</label>
</body>
</html>

六、纯 CSS 图片轮播（简易版）

自动轮播 + 手动切换，零 JS 实现基础轮播效果。
html
预览
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>纯CSS轮播</title>
    <style>
        .slider {
            width: 400px;
            height: 200px;
            margin: 20px auto;
            overflow: hidden;
            position: relative;
        }
        .slides {
            width: 300%;
            height: 100%;
            display: flex;
            animation: slide 6s infinite;
        }
        .slide {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 24px;
        }
        @keyframes slide {
            0% { transform: translateX(0); }
            33% { transform: translateX(-100%); }
            66% { transform: translateX(-200%); }
            100% { transform: translateX(0); }
        }
    </style>
</head>
<body>
<div class="slider">
    <div class="slides">
        <div class="slide" style="background:#42b983">轮播 1</div>
        <div class="slide" style="background:#2d8cf0">轮播 2</div>
        <div class="slide" style="background:#ff7d00">轮播 3</div>
    </div>
</div>
</body>
</html>

七、纯 CSS 悬停卡片上浮效果

UI 美化常用，鼠标悬停卡片上浮 + 阴影，提升页面质感。
html
预览
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>纯CSS卡片悬停效果</title>
    <style>
        .card {
            width: 250px;
            padding: 20px;
            margin: 30px auto;
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            transition: 0.3s;
        }
        .card:hover {
            transform: translateY(-10px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.15);
        }
    </style>
</head>
<body>
<div class="card">
    <h3>卡片标题</h3>
    <p>鼠标悬停查看上浮效果</p>
</div>
</body>
</html>

八、纯 CSS 滚动导航吸顶

页面滚动到一定位置，导航自动固定在顶部，无 JS！
html
预览
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>纯CSS吸顶导航</title>
    <style>
        body { height: 2000px; margin: 0; }
        .header {
            height: 60px;
            background: #333;
            color: white;
            line-height: 60px;
            text-align: center;
            position: sticky;
            top: 0;
            z-index: 99;
        }
    </style>
</head>
<body>
<div style="height: 100px;"></div>
<div class="header">我会吸顶～</div>
</body>
</html>
核心属性：position: sticky，CSS 原生吸顶方案。

九、纯 CSS 表单输入框聚焦动画

输入框聚焦时高亮边框、缩放效果，提升表单体验。
html
预览
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>纯CSS输入框聚焦效果</title>
    <style>
        input {
            padding: 10px 15px;
            border: 1px solid #ddd;
            border-radius: 4px;
            outline: none;
            transition: 0.3s;
            margin: 20px;
        }
        input:focus {
            border-color: #42b983;
            box-shadow: 0 0 0 3px rgba(66,185,131,0.2);
            transform: scale(1.02);
        }
    </style>
</head>
<body>
<input type="text" placeholder="聚焦我查看效果">
</body>
</html>

十、纯 CSS 折叠展开全文（阅读更多）

文章、商品描述常用的 “展开更多 / 收起” 功能，零 JS。
html
预览
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>纯CSS展开收起</title>
    <style>
        .text-box { width: 300px; margin: 20px auto; }
        .content {
            max-height: 60px;
            overflow: hidden;
            transition: 0.3s;
        }
        input:checked ~ .content {
            max-height: 500px;
        }
        label {
            color: #42b983;
            cursor: pointer;
            display: inline-block;
            margin-top: 8px;
        }
        input { display: none; }
    </style>
</head>
<body>
<div class="text-box">
    <input type="checkbox" id="readmore">
    <div class="content">
        这里是超长文本内容，默认只显示一部分，点击展开可以查看全部内容。这里是超长文本内容，默认只显示一部分，点击展开可以查看全部内容。
    </div>
    <label for="readmore">展开更多</label>
</div>
</body>
</html>

总结

以上10 个纯 HTML+CSS 交互效果，覆盖了前端开发中90% 的基础交互场景，完全不依赖 JavaScript，具备以下优势：
  1. 轻量高效：减少 JS 文件体积，页面加载更快
  2. 兼容性强：支持 IE9+、所有现代浏览器
  3. 维护简单：代码结构清晰，新手也能轻松修改
  4. 性能优秀：无 JS 逻辑，避免卡顿、报错
适合用于：

✅ 静态网站

✅ 移动端 H5 页面

✅ 后台管理系统侧边栏

✅ 个人博客、作品集

✅ 教学演示、面试手写代码

如果你需要更复杂的无 JS 交互（如轮播指示器、多级菜单、表单验证等），也可以在这些基础上扩展 CSS 逻辑实现！

💬 留言互动

你还想看哪些纯 CSS 实现的交互效果？欢迎在评论区留言，我会持续更新～
如果文章对你有帮助，欢迎点赞、收藏、关注，后续会分享更多前端干货！

购买须知/免责声明
1.本文部分内容转载自其它媒体，但并不代表本站赞同其观点和对其真实性负责。
2.若您需要商业运营或用于其他商业活动，请您购买正版授权并合法使用。
3.如果本站有侵犯、不妥之处的资源，请在网站右边客服联系我们。将会第一时间解决！
4.本站所有内容均由互联网收集整理、网友上传，仅供大家参考、学习，不存在任何商业目的与商业用途。
5.本站提供的所有资源仅供参考学习使用，版权归原著所有，禁止下载本站资源参与商业和非法行为，请在24小时之内自行删除！
6.不保证任何源码框架的完整性。
7.侵权联系邮箱：188773464@qq.com
8.若您最终确认购买，则视为您100%认同并接受以上所述全部内容。

海外源码网 前端编程 原生 HTML 实现无 JS 交互效果合集｜纯 CSS 搞定常见交互，零 JavaScript！ https://moyy.us/22105.html

上一篇： HTML性能优化三剑客：预加载、预连接与预解析实战指南
下一篇：

已经没有下一篇了!

相关文章

猜你喜欢
热门文章
随机推荐
热门标签
终身VIP会员限时钜惠