CSS实现checkbox选中动画

news2024/11/15 15:38:06

前言

👏CSS实现checkbox选中动画，速速来Get吧~
🥇文末分享源代码。记得点赞+关注+收藏！

1.实现效果

在这里插入图片描述

2.实现步骤

  • 定义css变量，–checked，表示激活选中色值
:root {
  --checked: orange;
}
  • 创建父容器，添加box-shadow阴影

在这里插入图片描述

<div class="container"></div>

.container {
   min-width: 280px;
   padding: 30px;
   border-radius: 10px;
   box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
   position: relative;
 }
  • 父容器内添加清单列表，使checkbox和label相互绑定

checkbox：复选框
label:表示用户界面中某个元素的说明

将一个 label 和一个 input元素匹配在一起，你需要给 input 一个 id 属性。而 label需要一个 for 属性，其值和 input 的 id 一样。

eg：

<div class="preference">
    <label for="cheese">Do you like cheese?</label>
    <input type="checkbox" name="cheese" id="cheese">
</div>

或者，你也可以将 input 直接放在 label 里，此时则不需要 for 和 id属性，因为关联已隐含存在。

eg：

<label>Do you like peas?
  <input type="checkbox" name="peas">
</label>
  • 这里我们为label设置for属性，为input设置id

在这里插入图片描述

<div class="item">
  <input type="checkbox" id="option1" />
  <label for="option1">学习</label>
</div>
...//剩余清单列表这里不做多余展示
<div class="item">
 <input type="checkbox" id="option4" />
 <label for="option4">吃火锅</label>
</div>

.item {
  margin-bottom: 20px;
  font-size: 15px;
  letter-spacing: 5px;
}
/* 最后一个元素底边距为0 */
.item:last-child {
   margin-bottom: 0;
 }
  • 重写checkbox样式，这里提供两种方案
方案一：设置checkbox为appearance：none，不应用任何特殊样式

appearance：定义元素（特别是表单控件）默认情况下的显示方式。通过将该值设置为none默认外观，可以使用其他 CSS 属性完全重新定义。

在这里插入图片描述

input[type="checkbox"] {
/* 去除系统默认appearance的样式 */
 -webkit-appearance: none;
 /*设置新样式 */
 width: 25px;
 height: 25px;
 position: relative;
 margin-right: 10px;
 border: 2px solid #fff;
 border-radius: 50%;
}
  • 添加checkbox选中样式，设置transform偏移，添加过渡效果，可以发现，父容器的高度随着checkbox的变化上下起伏，这并不是我想要的效果

在这里插入图片描述

input[type="checkbox"]:checked {
 height: 15px;
 width: 25px;
 border-top: none;
 border-right: none;
 border-radius: 0;
 transform: rotate(-45deg);
 transition: all 0.5s ease-in-out;
}
  • 给checkbox添加一个伪元素，绝对定位，用来展示样式,当选中时候，去改其伪元素的样式，绝对定位不会影响到当前高度。

在这里插入图片描述

input[type="checkbox"] {
 - border: 2px solid #fff;
 - border-radius: 50%;
}
/* input的checkbox样式添加伪元素 */
input[type="checkbox"]::after {
 content: "";
 width: 100%;
 height: 100%;
 border: 2px solid #fff;
 position: absolute;
 left: 0;
 top: 0;
 border-radius: 50%;
}
/* 设置checkbox点击之后的样式 */
input[type="checkbox"]:checked::after {
  height: 15px;
  width: 25px;
  border-top: none;
  border-right: none;
  border-radius: 0;
  transform: rotate(-45deg);
  transition: all 0.5s ease-in-out;
}
方案二：考虑到appearance的兼容性，可以使用更加稳妥的方式来实现，隐藏checkbox框，添加新的标签用来展示样式
  • 为checkbox添加兄弟元素
<div class="item">
 <input type="checkbox" id="option1" />
+ <span></span>
 <label for="option1">学习</label>
</div>
  • checkbox的隐藏，说到元素隐藏，有三种方式，在这浅浅的说下：

display: none 不占用页面空间，其占用的空间会被其他元素所占有，从而会引起浏览器的重排和重汇，不能点击。
visibility: hidden 会占用页面空间，因此只会导致浏览器的重汇而不会引起重排，不能点击
opacity: 0 占据页面空间，可以点击。

  • 那这里需要的是隐藏，且能点击，使用opacity，绝对定位，且z-index要置于最上方
input[type="checkbox"] {
 visibility: hidden;
 position: absolute;
 width: 25px;
 height: 25px;
 /* 位于最上方 */
 z-index: 1;
}
.item span {
 width: 25px;
 height: 25px;
 position: relative;
 margin-right: 10px;
 display: inline-block;
 vertical-align: middle;
}
.item span::after {
 content: "";
 width: 100%;
 height: 100%;
 border: 2px solid #fff;
 position: absolute;
 left: 0;
 top: 0;
 border-radius: 50%;
}

"+"号选择器：相邻兄弟选择器，用于选取在同一父元素下的，紧跟指定元素之后的另一个元素

input[type="checkbox"]:checked + span::after {
  height: 15px;
  width: 25px;
  border-top: none;
  border-right: none;
  border-radius: 0;
  transform: rotate(-45deg);
  transition: all 0.5s ease-in-out;
}
  • 设置label样式，text-decoration-line设置为横线，默认为透明颜色，偏移距离为1px,添加过渡效果

在这里插入图片描述

text-decoration-line：用于设置元素中的文本的修饰类型。当要设置多个线修饰属性时，用 text-decoration 简写属性会比分别写多个属性更方便。
text-decoration-color： 用于设置文本修饰线的颜色，文本修饰线是通过 text-decoration-line 属性指定的。
text-underline-offset：设置文本装饰下划线（使用 text-decoration 应用）与其原始位置的偏移距离。

label {
 cursor: pointer;
 text-decoration-line: underline;
 /* 设置底部线条颜色为透明色 */
 text-decoration-color: transparent;
 text-underline-offset: 1px;
 /* 添加过渡效果 */
 transition: all 0.5s;
}
  • 设置lable处于hover状态的样式，当hover时候，设置文本修饰线颜色为–checked，文本颜色为–checked，偏移距离设置为10px

在这里插入图片描述

 /* label添加hover事件 */
label:hover {
   text-decoration-color: var(--checked);
   text-underline-offset: 10px;
   color: var(--checked);
 }

设置label处于被选中状态的样式，设置文本修饰线颜色为–checked，文本颜色为–checked，偏移距离设置为-5px，居于文本中间，就完成了啦

在这里插入图片描述

“~”　运算符：p~ul选择器表示 p之后出现的所有ul。两种元素必须拥有相同的父元素，但是 ul不必直接紧随 p。

/* 设置checkbox被选中之后label的样式 */
input[type="checkbox"]:checked ~ label {
  color: var(--checked);
  text-underline-offset: -5px;
  text-decoration-color: var(--checked);
}

3.实现代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS实现checkbox选中动画</title>
  </head>
  <link rel="stylesheet" href="../common.css" />
  <style>
    :root {
      --checked: orange;
    }
    .container {
      min-width: 280px;
      padding: 30px;
      border-radius: 10px;
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
      position: relative;
    }
    .item {
      margin-bottom: 20px;
      font-size: 15px;
      letter-spacing: 5px;
    }
    /* 最后一个元素底边距为0 */
    .item:last-child {
      margin-bottom: 0;
    }
    /* 重写input的checkbox样式 */
    input[type="checkbox"] {
      /* 去除系统默认appearance的样式 */
      -webkit-appearance: none;
      appearance: none;
      /*设置新样式 */
      width: 25px;
      height: 25px;
      position: relative;
      margin-right: 10px;
    }
    /* input的checkbox样式添加伪元素 */
    input[type="checkbox"]::after {
      content: "";
      width: 100%;
      height: 100%;
      border: 2px solid #fff;
      position: absolute;
      left: 0;
      top: 0;
      border-radius: 50%;
    }
    /* 设置checkbox点击之后的样式 */
    input[type="checkbox"]:checked::after {
      height: 15px;
      width: 25px;
      border-top: none;
      border-right: none;
      border-radius: 0;
      transform: rotate(-45deg);
      transition: all 0.5s ease-in-out;
    }
    /* 设置label的样式 */
    label {
      cursor: pointer;
      text-decoration-line: underline;
      /* 设置底部线条颜色为透明色 */
      text-decoration-color: transparent;
      text-underline-offset: 1px;
      /* 添加过渡效果 */
      transition: all 0.5s;
    }
    /* label添加hover事件 */
    label:hover {
      text-decoration-color: var(--checked);
      text-underline-offset: 10px;
      color: var(--checked);
    }
    /* 设置checkbox被选中之后label的样式 */
    input[type="checkbox"]:checked ~ label {
      color: var(--checked);
      text-underline-offset: -5px;
      text-decoration-color: var(--checked);
    }
  </style>
  <body>
    <div class="container">
      <div class="item">
        <input type="checkbox" id="option1" />
        <label for="option1">学习</label>
      </div>
      <div class="item">
        <input type="checkbox" id="option2" />
        <label for="option2">更新视频</label>
      </div>
      <div class="item">
        <input type="checkbox" id="option3" />
        <label for="option3">看狂飙</label>
      </div>
      <div class="item">
        <input type="checkbox" id="option4" />
        <label for="option4">吃火锅</label>
      </div>
    </div>
  </body>
</html>

4.写在最后🍒

好啦！今天的小白文就到此结束了~( 大家鼓掌 )
看完本文如果觉得对你有一丢丢帮助，记得点赞+关注+收藏鸭 🍕
更多相关内容，关注🍥苏苏的bug，🍡苏苏的github，🍪苏苏的码云~

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

python+pytest接口自动化(6)-请求参数格式的确定

python+pytest接口自动化(6)-请求参数格式的确定

我们在做接口测试之前&#xff0c;先需要根据接口文档或抓包接口数据&#xff0c;搞清楚被测接口的详细内容&#xff0c;其中就包含请求参数的编码格式&#xff0c;从而使用对应的参数格式发送请求。例如某个接口规定的请求主体的编码方式为 application/json&#xff0c;那么在…
阅读更多...
Go 实现 AOI 区域视野管理

Go 实现 AOI 区域视野管理

在游戏中,场景里存在大量的物体.如果我们把所有物体的变化都广播给玩家.那客户端很难承受这么大的压力.因此我们肯定会做优化.把不必要的信息过滤掉.如只关心玩家视野所看到的.减轻客户端的压力,给玩家更流畅的体验. 优化的思路一般是: 第一个是尽量降低向客户端同步对象的数量…
阅读更多...
【Java】P1 基础知识与碎碎念

【Java】P1 基础知识与碎碎念

Java 基础知识 碎碎念安装 Intellij IDEAJDK 与 JREJava 运行过程Java 系统配置Java 运行过程Java的三大分类前言 本节内容主要围绕Java基础内容&#xff0c;从Java的安装到helloworld&#xff0c;什么是JDK与什么是JRE&#xff0c;系统环境配置&#xff0c;不深入Java代码知识…
阅读更多...
传导EMI抑制-Π型滤波器设计

传导EMI抑制-Π型滤波器设计

1 传导电磁干扰简介 在开关电源中&#xff0c;开关管周期性的通断会产生周期性的电流突变&#xff08;di/dt&#xff09;和电压突变(dv/dt)&#xff0c;周期性的电流变化和电压变化则会导致电磁干扰的产生。 图1所示为Buck电路的电流变化&#xff0c;在Buck电路中上管电流和下…
阅读更多...
ubuntu 22.04 mangodb

ubuntu 22.04 mangodb

文章写在2023年3月1日 目前最新的mangodb稳定版本是6.04 1.安装server server安装包为mangodb的程序主体。 服务器deb安装包下载地址 https://www.mongodb.com/try/download/community ubuntu22.04的server deb 文件url https://repo.mongodb.org/apt/ubuntu/dists/jammy/mo…
阅读更多...
计算机组成原理 浮点数运算清晰明了

计算机组成原理 浮点数运算清晰明了

注释&#xff1a;阶码和尾数都需要符号位区分正负 例题1&#xff1a;x 2^-11*0.100101&#xff0c; y 2^-10*(-0.011110)&#xff0c;求xy 第零步 补码表示 对于x来说-11 补码表示为 11011&#xff1b; 0.100101补码表示为00.100101对于y来说-10补码表示为 10110&#xff…
阅读更多...
【el】表单

【el】表单

elementUI中的表单相关问题一、用法1、动态表单调用接口返回表单&#xff0c;后端的接口返回值如下&#xff1a;这些是渲染后的效果页面使用&#xff08;父组件&#xff09;<el-button size"small" class"Cancelbtn" click"sub(true)">发起…
阅读更多...
python程序员狂飙上头——京海市大嫂单推人做个日历不过分吧？

python程序员狂飙上头——京海市大嫂单推人做个日历不过分吧？

嗨害大家好鸭&#xff01;我是小熊猫~ 这个反黑剧其实火了很久了&#xff0c; 但是我现在才有空开始看 该说不说&#xff0c;真的很上头&#xff01;&#xff01;&#xff01; 大嫂简直就像是干枯沙漠里的玫瑰 让人眼前一亮哇~~ 我小熊猫此时此刻就成为大嫂的单推人&…
阅读更多...
Auto-encoder 系列

Auto-encoder 系列

Auto-Encoder (AE)Auto-encoder概念自编码器要做的事&#xff1a;将高维的信息通过encoder压缩到一个低维的code内&#xff0c;然后再使用decoder对其进行重建。“自”不是自动&#xff0c;而是自己训练[1]。PCA要做的事其实与AE一样&#xff0c;只是没有神经网络。对于一个输入…
阅读更多...
Django学习——基础篇（上）

Django学习——基础篇（上）

一、Django的安装 pip install djangopython目录下出现两个文件 djando-admin.exe django django-admin.exe django 二、创建项目 1.命令行&#xff08;终端&#xff09; 1.打开终端 winR 输入cmd 2.进入项目目录 3.执行命令创建项目 2.Pycharm 两种方法对比 1.命令行创…
阅读更多...
FL Studio21中文版本下载更新内容详细介绍

FL Studio21中文版本下载更新内容详细介绍

FL Studio推出全新21版&#xff0c;为原创音乐人提供更好用的DAW&#xff08;数字音乐工作站&#xff09;工具。FL Studio国人也叫它水果编曲软件&#xff0c;是一款有着22多年历史的经典音乐创作软件。已有上千万的用户每天在使用水果编曲创作自己的音乐。它被公认为最适合新手…
阅读更多...
Stochastic Approximation 随机近似方法的详解之（一）

Stochastic Approximation 随机近似方法的详解之（一）

随机近似的定义&#xff1a;它指的是一大类随机迭代算法&#xff0c;用于求根或者优化问题。 Stochastic approximation refers to a broad class of stochastic iterative algorithms solving root finding or optimization problems. temporal-difference algorithms是随机近…
阅读更多...
原子级操作快速自制modbus协议

原子级操作快速自制modbus协议

原子级操作手把手搞懂modbus协议文章目录[toc]1 modbus协议基础概念1.1 使用场所1.2 主从协议站1.3 modbus帧描述1.4 数据模式1.5 modbus状态机2 modbus协议2.1 功能码2.2 公共功能码2.3 数据域格式3 modbus从站程序设计3.1 接口初始化3.2 数据处理部分查表法设置超时时间3.2 主…
阅读更多...
堆的概念结构及实现

堆的概念结构及实现

文章目录1.堆的概念及结构2.堆的实现2.1父子节点之间的关系2.2堆的向上排序算法2.3 堆的删除2.4堆的向下排序算法2.5入堆2.6堆的创建2.6.1通过入堆实现&#xff08;通过向上堆排序&#xff09;2.6.2通过向下排序实现2.6.3两种方法比较2.7代码实现2.7.1函数声明2.7.2函数实现2.7…
阅读更多...
前端开发与vscode开发工具介绍

前端开发与vscode开发工具介绍

文章目录1、前端开发2、vscode安装和使用2.1、下载地址2.2、插件安装2.3、设置字体大小2.4、开启完整的Emmet语法支持2.5、创建项目2.6、保存工作区2.7、新建文件夹和网页1、前端开发 前端工程师“Front-End-Developer”源自于美国。大约从2005年开始正式的前端工程师角色被行…
阅读更多...
【Python入门第二十一天】Python 数组

【Python入门第二十一天】Python 数组

请注意&#xff0c;Python 没有内置对数组的支持&#xff0c;但可以使用 Python 列表代替。 数组 数组用于在单个变量中存储多个值&#xff1a; 实例 创建一个包含汽车品牌的数组&#xff1a; cars ["Porsche", "Volvo", "BMW"]运行实例 …
阅读更多...
【我的车载技术】 Android AutoMotive 之 init与zygote内核原理

【我的车载技术】 Android AutoMotive 之 init与zygote内核原理

init概述 init是一个进程&#xff0c;确切地说&#xff0c;它是Linux系统中用户空间的第一个进程。由于Android是基于Linux内核的&#xff0c;所以init也是Android系统中用户空间的第一个进程&#xff0c;它的进程号是1。作为天字第一号的进程&#xff0c;init被赋予了很多极其…
阅读更多...
FFmpeg最常用命令参数详解及应用实例

FFmpeg最常用命令参数详解及应用实例

FFMPEG堪称自由软件中最完备的一套多媒体支持库&#xff0c;它几乎实现了所有当下常见的数据封装格式、多媒体传输协议以及音视频编解码器&#xff0c;提供了录制、转换以及流化音视频的完整解决方案。 ffmpeg命令行参数解释 ffmpeg -i [输入文件名] [参数选项] -f [格式] [输出…
阅读更多...
lambada表达式

lambada表达式

负壹、 函数式编程 Java为什么要支持函数式编程&#xff1f; 代码简洁 函数式编程写出的代码简洁且意图明确&#xff0c;使用stream接口让你从此告别for循环。 多核友好 Java函数式编程使得编写并行程序从未如此简单&#xff0c;你需要的全部就是调用一下parallel()方法。 Jav…
阅读更多...
C++ -- STL简介、string的使用

C++ -- STL简介、string的使用

什么是STL STL(standard template libaray-标准模板库)&#xff1a;是C标准库的重要组成部分&#xff0c;不仅是一个可复用的组件库&#xff0c;而且是一个包罗数据结构与算法的软件框架。 STL的版本 原始版本&#xff1a;Alexander Stepanov、Meng Lee 在惠普实验室完成的原…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023