有趣的css - 加减动态多选框

大家好,我是 Just,这里是「设计师工作日常」,今天分享的是用 css 实现一个适用树形菜单场景的加减动态多选框。

最新文章通过公众号「设计师工作日常」发布。


目录

  • 整体效果
  • 核心代码
    • html 代码
    • css 部分代码
  • 完整代码如下
    • html 页面
    • css 样式
    • 页面渲染效果

整体效果

💎知识点:
1️⃣ appearance 属性应用
2️⃣ ::before 以及 ::after 伪元素
3️⃣ transform 以及 transition 属性
4️⃣ :hover:checked 选择器

🔑思路:
自定义多选框外观,利用伪元素搭建加号按钮,利用变形属性和过渡属性实现动画效果。

适用树形菜单场景。


核心代码部分,简要说明了写法思路;完整代码在最后,可直接复制到本地运行。

核心代码

html 代码

<label class="label67"><input type="checkbox" class="check-inp67"><span class="span67"></span>
</label>

label 标签整体, input 标签放到 label 中默认绑定,span 标签补充加号元素。

css 部分代码

.label67{position: relative;display: flex;justify-content: center;align-items: center;
}
.check-inp67{width: 32px;height: 32px;border-radius: 5px;position: absolute;background-color: rgba(0, 0, 0, 0.06);transition: background-color 0.2s linear;z-index: 1;cursor: pointer;appearance: none; /* none时可以自定义其外观 */
}
.span67{width: 20px;height: 20px;display: block;position: absolute;z-index: 2;cursor: pointer;
}
.span67::before,.span67::after{content: '';width: 20px;height: 4px;background-color: #0093E9;box-sizing: border-box;display: block;position: absolute;top: 8px;
}
.span67::after{transform: rotate(90deg);transition: transform 0.2s cubic-bezier(0.68,-0.55,0.27,1.55);
}
.label67:hover .check-inp67{background-color: rgba(0, 0, 0, 0.09);
}
.check-inp67:checked + .span67::after{transform: rotate(0deg);
}

1、利用 appearance 属性,定义 appearance: none;,定义矩形浅灰色背景,添加 transition 过渡属性参数。

2、定义 span 样式,然后利用伪元素 ::before 以及 ::after 绘制出两个矩形,通过 transform 变形属性旋转其中一个矩形(伪元素 ::after ) 90 度,形成加号元素,并且给旋转的矩形添加 transition 过渡属性参数,这里我还定义了一下曲线速率为 cubic-bezier(0.68,-0.55,0.27,1.55),增强其视觉效果。

3、利用 :hover 选择器,当鼠标悬浮到上方时,外框矩形浅灰色背景颜色过渡加深。

4、利用 :checked 选择器,当多选框选中时,旋转其伪元素 ::after 为 0 度,加号变成减号,表明已打开更多状态。

完整代码如下

html 页面

<!DOCTYPE html>
<html lang="zh"><head><meta charset="utf-8"><link rel="stylesheet" href="style.css"><title>加减动态多选框</title></head><body><div class="app"><label class="label67"><input type="checkbox" class="check-inp67"><span class="span67"></span></label></div></body>
</html>

css 样式

/** style.css **/
.app{width: 100%;height: 100vh;background-color: #ffffff;position: relative;display: flex;justify-content: center;align-items: center;
}
.label67{position: relative;display: flex;justify-content: center;align-items: center;
}
.check-inp67{width: 32px;height: 32px;border-radius: 5px;position: absolute;background-color: rgba(0, 0, 0, 0.06);transition: background-color 0.2s linear;z-index: 1;cursor: pointer;appearance: none; /* none时可以自定义其外观 */
}
.span67{width: 20px;height: 20px;display: block;position: absolute;z-index: 2;cursor: pointer;
}
.span67::before,.span67::after{content: '';width: 20px;height: 4px;background-color: #0093E9;box-sizing: border-box;display: block;position: absolute;top: 8px;
}
.span67::after{transform: rotate(90deg);transition: transform 0.2s cubic-bezier(0.68,-0.55,0.27,1.55);
}
.label67:hover .check-inp67{background-color: rgba(0, 0, 0, 0.09);
}
.check-inp67:checked + .span67::after{transform: rotate(0deg);
}

页面渲染效果

以上就是所有代码,以及简单的思路,希望对你有一些帮助或者启发。


[1] 原文阅读

[2] 网站《有趣的css》上线了,网址:funcss.liujueyi.cn,欢迎大家访问。


我是 Just,这里是「设计师工作日常」,求点赞求关注!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/841395.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【调试笔记-20240525-Windows-配置 QEMU/x86_64 运行 OpenWrt-23.05 发行版并搭建 WordPress 博客网站】

调试笔记-系列文章目录 调试笔记-20240525-Windows-配置 QEMU/x86_64 运行 OpenWrt-23.05 发行版并搭建 WordPress 博客网站 文章目录 调试笔记-系列文章目录调试笔记-20240525-Windows-配置 QEMU/x86_64 运行 OpenWrt-23.05 发行版并搭建 WordPress 博客网站 前言一、调试环境…

数组的理论知识

文章目录 数组的理论知识 数组的理论知识 数组是我们在编程时期经常使用到的一种数据结构。 特点&#xff1a; 在连续的内存空间中存储相同数据类型的数据 如图&#xff1a; arr 数组 注意点&#xff1a;数组的修改的效率是比较慢的&#xff0c;O(n)&#xff0c;因为数组只…

人工智能万卡 GPU 集群的硬件和网络架构

万卡 GPU 集群互联&#xff1a;硬件配置和网络设计 一、背景 自从 OpenAI 推出 ChatGPT 以来&#xff0c;LLM 迅速成为焦点关注的对象&#xff0c;并取得快速发展。众多企业纷纷投入 LLM 预训练&#xff0c;希望跟上这一波浪潮。然而&#xff0c;要训练一个 100B 规模的 LLM&a…

嵌入式学习——3——多点通信

1、套接字选项&#xff08;socket options&#xff09; int getsockopt(int sockfd, int level, int optname, void *optval, socklen_t *optlen); int setsockopt(int sockfd, int level, int optname, const void *optval, socklen_t optlen); 功能&#xff1a;获取或设置套接…

设计模式在芯片验证中的应用——单例

一、单例模式 单例模式(Singleton)是一种创建型设计模式&#xff0c;能够保证一个类只有一个实例&#xff0c; 并提供一个访问该实例的全局节点。验证环境配置(configuration)类、超时(timeout)处理类等可以使用单例实现。比如说验证环境需要在特定场景中监测特定接口上的超时事…

STM32-GPIO八种输入输出模式

图片取自 江协科技 STM32入门教程-2023版 细致讲解 中文字幕 p5 【STM32入门教程-2023版 细致讲解 中文字幕】 https://www.bilibili.com/video/BV1th411z7sn/?p5&share_sourcecopy_web&vd_source327265f5c70f26411a53a9226af0b35c 目录 ​编辑 一.STM32的四种输…

达梦数据库创建根据日期按月自动分区表

达梦数据库创建根据日期自动分区表 概念 达梦数据交换平台(简称DMETL)是在总结了众多大数据项目经验和需求并结合最新大数据发展趋势和技术的基础上&#xff0c;自主研发的通用的大数据处理与集成平台。 DMETL创新地将传统的ETL工具&#xff08;Extract、Transform、Loading…

maven默认src下的xml,properties文件不打包到classes文件夹下

一、第一种是建立src/main/resources文件夹&#xff0c;将xml&#xff0c;properties等资源文件放置到这个目录中。maven工具默认在编译的时候&#xff0c;会将resources文件夹中的资源文件一块打包进classes目录中。 这时候注意把resources设置成resource目录&#xff0c;已经…

CI/CD 管道中的自动化测试:类型和阶段

在上一篇文章中&#xff0c;我们讨论了敏捷团队自动化测试用例的各种用例。其中一种情况是&#xff0c;团队希望将测试与每个构建集成&#xff0c;并将持续集成作为构建过程的一部分。 在本文中&#xff0c;我们将讨论持续集成/持续交付平台中的集成测试。 让我们先从基础知识…

Sentinel Dashboard 规则联动持久化方案

一、Sentinel Dashboard 规则联动持久化方案 Sentinel 是阿里开源的一个流量控制组件&#xff0c;它提供了一种流量控制、熔断降级、系统负载保护等功能的解决方案。并且我们通过 Sentinel Dashboard 可以非常便捷的添加或修改规则策略&#xff0c;但是如果细心的小伙伴应该可…

Jenkins、GitLab部署项目

1、安装JDK 1.1、下载openJdk11 yum -y install fontconfig java-11-openjdk1.2、查看安装的版本号 java -version1.3、配置环境变量 vim /etc/profile在最底部添加即可 export JAVA_HOME/usr/lib/jvm/java-11-openjdk-11.0.23.0.9-2.el7_9.x86_64 export PATH$JAVA_HOME/…

经典链表题-链表回文结构

&#x1f389;&#x1f389;&#x1f389;欢迎莅临我的博客空间&#xff0c;我是池央&#xff0c;一个对C和数据结构怀有无限热忱的探索者。&#x1f64c; &#x1f338;&#x1f338;&#x1f338;这里是我分享C/C编程、数据结构应用的乐园✨ &#x1f388;&#x1f388;&…

神经网络的工程基础(一)——利用PyTorch实现梯度下降法

相关说明 这篇文章的大部分内容参考自我的新书《解构大语言模型&#xff1a;从线性回归到通用人工智能》&#xff0c;欢迎有兴趣的读者多多支持。 本文涉及到的代码链接如下&#xff1a;regression2chatgpt/ch06_optimizer/gradient_descent.ipynb 本文将讨论利用PyTorch实现…

BFS 解决最短路问题

目录 一、前言 1.1 如何使用 BFS 找到最短路&#xff1a; 1.2 为什么不用 dfs &#xff1a; 二、模板套路 三、例题练习 3.1 例题1&#xff1a;迷宫中离入口最近的出口 3.2 例题2&#xff1a;最小基因变化 3.3 例题3&#xff1a;单词接龙 3.4 例题4&#xff1a;为高尔…

HTML橙色爱心

目录 写在前面 准备开始 完整代码 运行结果 系列文章 写在后面 写在前面 本期小编给大家分享一颗热烈且浪漫的爱心&#xff0c;快来看看吧&#xff01; 准备开始 在开始之前&#xff0c;我们需要先简单的了解一下这颗爱心的原理哦~ 本期将用html实现这颗跳动的爱心&a…

YOLOv9改进策略 | 图像去雾 | 利用图像去雾网络UnfogNet辅助YOLOv9进行图像去雾检测(全网独家首发)

一、本文介绍 本文给大家带来的改进机制是利用UnfogNet超轻量化图像去雾网络,我将该网络结合YOLOv9针对图像进行去雾检测(也适用于一些模糊场景),我将该网络结构和YOLOv9的网络进行结合同时该网络的结构的参数量非常的小,我们将其添加到模型里增加的计算量和参数量基本可…

跨平台之用VisualStudio开发APK嵌入OpenCV(二)

开始干 新建解决方案&#xff0c;新建动态库&#xff08;Android&#xff09;项目 功能随便选一个吧&#xff0c;就模仿PS&#xff08;Photoshop&#xff09;的透视裁切功能&#xff0c;一个物体&#xff08;比如扑克牌&#xff09;透视图&#xff0c;选4个顶点&#xff0c;转…

python文件处理之os模块和shutil模块

目录 1.os模块 os.path.exists(path)&#xff1a;文件或者目录存在与否判断 os.path.isfile(path)&#xff1a;判断是否是文件 os.path.isdir(path)&#xff1a;判断是否是文件夹 os.remove(path)&#xff1a;尝试删除文件 os.rmdir(path)&#xff1a;尝试删除目录 os.m…

vue项目elementui刷新页面弹窗问题

bug&#xff1a;每次刷新页面都有这个鬼弹窗。 刚开始以为是自己的代码问题&#xff0c;于是我翻遍了每一行代码&#xff0c;硬是没找出问题。 后来在网上找了些资料&#xff0c;原来是引入的问题。 解决方案&#xff1a; 改一下引入方式即可。 错误姿势 import Vue from …

美发店服务预约会员小程序的作用是什么

美发店不同于美容美甲&#xff0c;男女都是必需且年龄层几乎不限&#xff0c;商家在市场拓展时只要方法得当相对比较容易&#xff0c;当今客户适应于线上信息获取、咨询及实际内容开展&#xff0c;商家也需要赋能和提升自身服务效率&#xff0c;合理化管理。 运用【雨科】平台…