有趣的css - 圆形背景动效多选框

大家好,我是 Just,这里是「设计师工作日常」,今天分享的是用 css 实现一个圆形背景动效多选框,适用提醒用户勾选场景,突出多选框选项,可以有效增加用户识别度。

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


目录

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

整体效果

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

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

适用提醒用户勾选场景,突出多选框选项,可以有效增加用户识别度。


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

核心代码

html 代码

<label class="label66"><input type="checkbox" class="check-inp66"><span class="span66"></span>
</label>

label 标签作为多选框主体, input 标签放到 label 中默认绑定,span 标签补充多选框外观元素。

css 部分代码

.label66{position: relative;display: flex;justify-content: center;align-items: center;
}
.check-inp66{width: 40px;height: 40px;border-radius: 50%;position: absolute;background-color: rgba(0, 0, 0, 0.06);z-index: 1;transform: scale(1);transition: transform 0.15s linear;appearance: none; /* none时可以自定义其外观 */
}
.span66{width: 20px;height: 20px;display: block;position: absolute;z-index: 2;cursor: pointer;
}
.span66::before{content: '';width: 20px;height: 20px;border: 2px solid rgba(0,0,0,0.6);border-radius: 3px;box-sizing: border-box;display: block;position: absolute;transition: all 0.3s linear;
}
.span66::after{content: "";width: 10px;height: 5px;display: block;position: absolute;top: 5px;left: 4px;border: solid 2px transparent;border-right: none;border-top: none;transform: rotate(-45deg);transition: border-color 0.3s linear;
}
.label66:hover .span66::before{border-color: #0093E9;
}
.label66:active .check-inp66,.label66:active .check-inp66:checked{transform: scale(0);transition: transform 0.15s linear;
}
.check-inp66:checked{background-color: rgba(0,147,233,0.08);
}
.check-inp66:checked ~ .span66::before{background-color: #0093E9;border-color: #0093E9;
}
.check-inp66:checked ~ .span66::after{border-color: #ffffff;
}

1、利用 appearance 属性,定义 appearance: none;,自定义多选框外观,定义圆形浅灰色背景,定义 transformtransition 属性参数。

2、定义 span 样式,利用伪元素 ::before 以及 ::after,分别写出多选框的矩形边框和多选框中的对勾元素;并且给它们分别增加过渡属性参数。

3、利用 :hover 选择器,当鼠标悬浮到多选框上方时,多选框边框实现颜色过渡;利用 :active 选择器,当鼠标左键点击时,多选框的圆形背景实现缩小放大过渡效果;利用 :checked 选择器,当多选框选中时,切换圆形背景颜色,多选框矩形框背景颜色过渡,对勾也过渡显示。

完整代码如下

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="label66"><input type="checkbox" class="check-inp66"><span class="span66"></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;
}
.label66{position: relative;display: flex;justify-content: center;align-items: center;
}
.check-inp66{width: 40px;height: 40px;border-radius: 50%;position: absolute;background-color: rgba(0, 0, 0, 0.06);z-index: 1;transform: scale(1);transition: transform 0.15s linear;appearance: none; /* none时可以自定义其外观 */
}
.span66{width: 20px;height: 20px;display: block;position: absolute;z-index: 2;cursor: pointer;
}
.span66::before{content: '';width: 20px;height: 20px;border: 2px solid rgba(0,0,0,0.6);border-radius: 3px;box-sizing: border-box;display: block;position: absolute;transition: all 0.3s linear;
}
.span66::after{content: "";width: 10px;height: 5px;display: block;position: absolute;top: 5px;left: 4px;border: solid 2px transparent;border-right: none;border-top: none;transform: rotate(-45deg);transition: border-color 0.3s linear;
}
.label66:hover .span66::before{border-color: #0093E9;
}
.label66:active .check-inp66,.label66:active .check-inp66:checked{transform: scale(0);transition: transform 0.15s linear;
}
.check-inp66:checked{background-color: rgba(0,147,233,0.08);
}
.check-inp66:checked ~ .span66::before{background-color: #0093E9;border-color: #0093E9;
}
.check-inp66:checked ~ .span66::after{border-color: #ffffff;
}

页面渲染效果

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


[1] 原文阅读


网站《有趣的css》上线了,目前已上线 demo 实例 65 例,欢迎大家访问。

网站:Funcss

CSS 是一种很酷很有趣的计算机语言,在这里跟大家分享一些 CSS 实例 Demo,为学习者获取灵感和思路提供一点帮助,希望你们喜欢。


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

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

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

相关文章

js画思维导图代码2

这段代码是一个使用Vue.js和D3.js构建的树形图组件。它是一个Vue组件&#xff0c;用于创建和显示一个交互式的树形结构图。下面是对这段代码的简要分析&#xff1a; 模板部分 (<template>): 定义了组件的HTML结构&#xff0c;包括一个隐藏的提示框(#tooltip)和一个用于显…

VBA批量合并带有图片、表格与文本框的Word

本文介绍基于VBA语言&#xff0c;对大量含有图片、文本框与表格的Word文档加以批量自动合并&#xff0c;并在每一次合并时添加分页符的方法。 在我们之前的文章基于Python中docx与docxcompose批量合并多个Word文档文件并逐一添加分页符&#xff08;https://blog.csdn.net/zhebu…

helloworld 可执行程序得到的过程

// -E 预处理 开发过程中可以确定某个宏 // -c 把预处理 编译 汇编 都做了,但是不链接 // -o 指定输出文件 // -I 指定头文件目录 // -L 指定链接库文件目录 // -l 指定链接哪一个库文件 #include <stdio.h> #include <stdlib.h> #include <string.h>int mai…

【postgresql初级使用】在表的多个频繁使用列上创建一个索引,多条件查询优化,多场景案例揭示索引失效

多列索引 ​专栏内容&#xff1a; postgresql使用入门基础手写数据库toadb并发编程 个人主页&#xff1a;我的主页 管理社区&#xff1a;开源数据库 座右铭&#xff1a;天行健&#xff0c;君子以自强不息&#xff1b;地势坤&#xff0c;君子以厚德载物. 文章目录 多列索引概述 …

【微积分】CH16 integrals and vector fields听课笔记

【托马斯微积分学习日记】13.1-线积分_哔哩哔哩_bilibili 概述 16.1line integrals of scalar functions [中英双语]可视化多元微积分 - 线积分介绍_哔哩哔哩_bilibili 16.2vector fields and line integrals&#xff1a; work circulation and flux 向量场差不多也是描述某种…

gpt-4o继续迭代考场安排程序 一键生成考场清单

接上两篇gpt-4o考场安排-CSDN博客&#xff0c;考场分层次安排&#xff0c;最终exe版-CSDN博客 当然你也可以只看这一篇。 今天又添加了以下功能&#xff0c;程序见后。 1、自动分页&#xff0c;每个考场打印一页 2、添加了打印试场单页眉 3、添加了页脚 第X页&#xff0c;…

Leetcode刷题笔记1:数组基础1

导语 leetcode刷题笔记记录&#xff0c;本篇博客记录数组基础1部分的题目&#xff0c;主要题目包括&#xff1a; Leetcode 704 二分查找Leetcode 27 移除元素 知识点 二分查找 原理 二分查找的适用对象为有序数组且数组中无重复元素&#xff0c;其主要原理是每次都从有序…

2024年5月软考架构题目回忆分享

十年架构两茫茫 &#xff0c;Redis , UML 夜来幽梦忽还乡 &#xff0c; 大数据&#xff0c; Lambda 选择题 1.需求分析和架构设计面临这两个不同对象&#xff0c;一个是问题空间&#xff0c;一个是解空间 这是英文题&#xff0c;总共五个题目&#xff0c;只记得这么多 2. …

AI视频教程下载:全面掌握ChatGPT和LangChain开发AI应用(附源代码)

这是一门深入的课程&#xff0c;涉及ChatGPT、LangChain和Python。打造专注于现实世界AI集成的AI应用&#xff0c;课件附有每一节涉及到的源代码。 **你将学到什么&#xff1a;** - 将ChatGPT集成到LangChain的生产风格应用中 - 使用LangChain组件构建复杂的文本生成管道 - …

order by 优化

1. 排序方式 MySQL支持两种方式的排序&#xff0c;FileSort和Index&#xff1a; Index的效率高&#xff0c;它指MySQL根据索引本身完成排序。FileSort方式效率较低&#xff0c;是指MySQL自己扫描数据之后进行排序&#xff0c;没有使用到index 因此&#xff0c;我们要让order…

推荐五个线上兼职,在家也能轻松日入百元,适合上班族和全职宝妈

在这个瞬息万变的时代&#xff0c;你是否也曾考虑过在繁忙的工作之外&#xff0c;寻找一份兼职副业来补贴家用&#xff0c;同时保持生活的多样性&#xff1f;别急&#xff0c;现在就让我为你揭秘五个可靠的日结线上兼职岗位&#xff0c;助你轻松迈向财务自由之路&#xff01; 一…

云WAF与传统WAF:网络安全的双重防线

在网络安全领域&#xff0c;Web应用防火墙&#xff08;WAF&#xff09;是守护企业网络安全的重要盾牌。随着云计算技术的迅猛发展&#xff0c;云WAF作为一种新型的安全服务模式&#xff0c;正逐渐成为企业网络安全防护的新宠。本文将深入探讨云WAF与传统WAF的区别&#xff0c;分…

[‘column‘]和[:,‘column‘]的区别

之前&#xff0c;关于numpy和pandas的操作一直不熟悉&#xff0c;对于获取数据中的行&#xff0c;列一直混淆。 df[column] df[column]是 Pandas DataFrame 切片的常用语法&#xff0c;用于选择名为 column 的单个列。它返回一个 Pandas Series 对象。 df.loc[:,column] df[:,…

PSQL一些查询命令

只看10条数据 select * from dongchazhedata2 limit 10;以某一字段排序 select * from dongchazhedata2 order by date;查询大于某一日期的数据&#xff1b; select * from dongchazhedata where date > 2024-05-19;启动数据库命令 sudo service postgresql start;查看…

使用 Flask 和 Celery 构建异步任务处理应用

文章目录 什么是 Flask&#xff1f;什么是 Celery&#xff1f;如何在 Flask 中使用 Celery&#xff1f;步骤 1&#xff1a;安装 Flask 和 Celery步骤 2&#xff1a;创建 Flask 应用程序步骤 3&#xff1a;运行 Celery Worker步骤 4&#xff1a;启动 Flask 应用程序 结论 在构建…

高校网站群及融媒体中心建设方案

一、项目背景 随着信息技术的飞速发展&#xff0c;互联网已成为高校展示形象、传播信息、服务师生、沟通社会的重要渠道。然而&#xff0c;目前许多高校在网站建设和媒体传播方面存在以下问题&#xff1a; 网站分散、缺乏统一规划&#xff1a;各高校内部往往存在多个部门或学院…

家政项目day3 区域服务模块开发

目录 1 复习下业务流程2 接口设计2.1 查询区域服务2.1.1 接口梳理2.1.2 接口设计2.1.3 接口定义 1 复习下业务流程 区域服务管理是为运营地区设置要运营的服务项&#xff0c;不同地区所运营的服务项可能不同&#xff0c;比如&#xff1a;本平台在北京运营了老人陪护服务&#…

先进制造aps专题七 基于ai大模型的生产调度aps系统

"如果我们能够深度定制并开发出适合这些行业的大模型应用&#xff0c;将会带来巨大的变革。比如在医疗行业&#xff0c;大模型在医学图像分析、疾病预测和智能诊断方面有着广阔的应用前景。通过利用大模型技术&#xff0c;医生可以获得更准确的诊断辅助工具&#xff0c;从…

查数据库表以及视图sql

目录 oracle 数据表 视图 mysql 数据表 视图 hive 表 视图 pg 表 视图 oracle 数据表 SELECT a.owner AS owner,a.TABLE_NAME AS bywm,a.comments AS bzwm FROM all_tab_comments a where a.OWNER NOT IN (SYS, SYSTEM, CTXSYS, XDB, EXFSYS, MDSYS, OL…