32 选择组件

效果演示

19-选择组件.gif

实现了一个复选框的动画效果，当复选框被选中时，复选框的前面会出现一个勾号，同时复选框的背景颜色会变成灰色，复选框旁边会出现一个火花效果。当复选框被取消选中时，复选框的勾号会消失，复选框的背景颜色会变回原来的颜色，火花效果也会消失。

Code

<div id="checklist"><input checked="" value="1" name="r" type="checkbox" id="01"><label for="01">Bread</label><input value="2" name="r" type="checkbox" id="02"><label for="02">Cheese</label><input value="3" name="r" type="checkbox" id="03"><label for="03">Coffee</label>
</div>

body {height: 100vh;display: flex;justify-content: center;align-items: center;background-color: #212121;
}#checklist {--background: #fff;--text: #414856;--check: #4f29f0;--disabled: #c3c8de;--width: 100px;--height: 180px;--border-radius: 10px;background: var(--background);width: var(--width);height: var(--height);border-radius: var(--border-radius);position: relative;box-shadow: 0 10px 30px rgba(65, 72, 86, 0.05);padding: 30px 85px;display: grid;grid-template-columns: 30px auto;align-items: center;justify-content: center;
}#checklist label {color: var(--text);position: relative;cursor: pointer;display: grid;align-items: center;width: fit-content;transition: color 0.3s ease;margin-right: 20px;
}#checklist label::before,
#checklist label::after {content: "";position: absolute;
}#checklist label::before {height: 2px;width: 8px;left: -27px;background: var(--check);border-radius: 2px;transition: background 0.3s ease;
}#checklist label:after {height: 4px;width: 4px;top: 8px;left: -25px;border-radius: 50%;
}#checklist input[type="checkbox"] {-webkit-appearance: none;-moz-appearance: none;position: relative;height: 15px;width: 15px;outline: none;border: 0;margin: 0 15px 0 0;cursor: pointer;background: var(--background);display: grid;align-items: center;margin-right: 20px;
}#checklist input[type="checkbox"]::before,
#checklist input[type="checkbox"]::after {content: "";position: absolute;height: 2px;top: auto;background: var(--check);border-radius: 2px;
}#checklist input[type="checkbox"]::before {width: 0px;right: 60%;transform-origin: right bottom;
}#checklist input[type="checkbox"]::after {width: 0px;left: 40%;transform-origin: left bottom;
}#checklist input[type="checkbox"]:checked::before {animation: check-01 0.4s ease forwards;
}#checklist input[type="checkbox"]:checked::after {animation: check-02 0.4s ease forwards;
}#checklist input[type="checkbox"]:checked+label {color: var(--disabled);animation: move 0.3s ease 0.1s forwards;
}#checklist input[type="checkbox"]:checked+label::before {background: var(--disabled);animation: slice 0.4s ease forwards;
}#checklist input[type="checkbox"]:checked+label::after {animation: firework 0.5s ease forwards 0.1s;
}@keyframes move {50% {padding-left: 8px;padding-right: 0px;}100% {padding-right: 4px;}
}@keyframes slice {60% {width: 100%;left: 4px;}100% {width: 100%;left: -2px;padding-left: 0;}
}@keyframes check-01 {0% {width: 4px;top: auto;transform: rotate(0);}50% {width: 0px;top: auto;transform: rotate(0);}51% {width: 0px;top: 8px;transform: rotate(45deg);}100% {width: 5px;top: 8px;transform: rotate(45deg);}
}@keyframes check-02 {0% {width: 4px;top: auto;transform: rotate(0);}50% {width: 0px;top: auto;transform: rotate(0);}51% {width: 0px;top: 8px;transform: rotate(-45deg);}100% {width: 10px;top: 8px;transform: rotate(-45deg);}
}@keyframes firework {0% {opacity: 1;box-shadow: 0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0;}30% {opacity: 1;}100% {opacity: 0;box-shadow: 0 -15px 0 0px #4f29f0, 14px -8px 0 0px #4f29f0, 14px 8px 0 0px #4f29f0, 0 15px 0 0px #4f29f0, -14px 8px 0 0px #4f29f0, -14px -8px 0 0px #4f29f0;}
}

实现思路拆分

cbody {height: 100vh;display: flex;justify-content: center;align-items: center;background-color: #212121;
}

这段代码定义了整个页面的样式，包括高度、居中显示、背景颜色等。

#checklist {--background: #fff;--text: #414856;--check: #4f29f0;--disabled: #c3c8de;--width: 100px;--height: 180px;--border-radius: 10px;background: var(--background);width: var(--width);height: var(--height);border-radius: var(--border-radius);position: relative;box-shadow: 0 10px 30px rgba(65, 72, 86, 0.05);padding: 30px 85px;display: grid;grid-template-columns: 30px auto;align-items: center;justify-content: center;
}

这段代码定义了复选框列表的样式，包括变量、背景、宽度、高度、边框半径、位置、阴影、内边距、网格布局、对齐方式等。

#checklist label {color: var(--text);position: relative;cursor: pointer;display: grid;align-items: center;width: fit-content;transition: color 0.3s ease;margin-right: 20px;
}

这段代码定义了复选框列表中的复选框的样式，包括颜色、位置、鼠标指针、网格布局、对齐方式、宽度、过渡效果、右边距等。

#checklist label::before,
#checklist label::after {content: "";position: absolute;
}

这段代码定义了复选框列表中的复选框前面的和后面的样式，包括内容、位置等。

#checklist label::before {height: 2px;width: 8px;left: -27px;background: var(--check);border-radius: 2px;transition: background 0.3s ease;
}

这段代码定义了复选框列表中的复选框前面的样式，包括高度、宽度、左边距、背景、边框半径、过渡效果等。

#checklist label:after {height: 4px;width: 4px;top: 8px;left: -25px;border-radius: 50%;
}

这段代码定义了复选框列表中的复选框后面的样式，包括高度、宽度、上边距、左边距、边框半径等。

#checklist input[type="checkbox"] {-webkit-appearance: none;-moz-appearance: none;position: relative;height: 15px;width: 15px;outline: none;border: 0;margin: 0 15px 0 0;cursor: pointer;background: var(--background);display: grid;align-items: center;margin-right: 20px;
}

这段代码定义了复选框列表中的复选框样式，包括样式属性、位置、高度、宽度、边框、内边距、鼠标指针、背景、网格布局、对齐方式、右边距等。

#checklist input[type="checkbox"]::before,
#checklist input[type="checkbox"]::after {content: "";position: absolute;height: 2px;top: auto;background: var(--check);border-radius: 2px;
}

这段代码定义了复选框列表中的复选框前面的和后面的样式，包括内容、位置、高度、背景、边框半径等。

#checklist input[type="checkbox"]::before {width: 0px;right: 60%;transform-origin: right bottom;
}

这段代码定义了复选框列表中的复选框前面的样式，包括宽度、右边距、变换原点等。

#checklist input[type="checkbox"]::after {width: 0px;left: 40%;transform-origin: left bottom;
}

这段代码定义了复选框列表中的复选框后面的样式，包括宽度、左边距、变换原点等。

#checklist input[type="checkbox"]:checked::before {animation: check-01 0.4s ease forwards;
}

这段代码定义了复选框列表中的复选框被选中时的前面的动画效果，包括动画名称、持续时间、缓动函数、前向播放等。

#checklist input[type="checkbox"]:checked::after {animation: check-02 0.4s ease forwards;
}

这段代码定义了复选框列表中的复选框被选中时的后面的动画效果，包括动画名称、持续时间、缓动函数、前向播放等。

#checklist input[type="checkbox"]:checked+label {color: var(--disabled);animation: move 0.3s ease 0.1s forwards;
}

这段代码定义了复选框列表中的复选框被选中时的标签样式，包括颜色、动画名称、持续时间、缓动函数、前向播放、动画效果等。

#checklist input[type="checkbox"]:checked+label::before {background: var(--disabled);animation: slice 0.4s ease forwards;
}

这段代码定义了复选框列表中的复选框被选中时的前面的样式，包括背景、动画名称、持续时间、缓动函数、前向播放、动画效果等。

#checklist input[type="checkbox"]:checked+label::after {animation: firework 0.5s ease forwards 0.1s;
}

这段代码定义了复选框列表中的复选框被选中时的后面的动画效果，包括动画名称、持续时间、缓动函数、前向播放、动画效果等。

@keyframes move {50% {padding-left: 8px;padding-right: 0px;}100% {padding-right: 4px;}
}

这段代码定义了复选框列表中的复选框标签移动的动画效果，包括动画名称、关键帧、缓动函数等。

@keyframes slice {60% {width: 100%;left: 4px;}100% {width: 100%;left: -2px;padding-left: 0;}
}

这段代码定义了复选框列表中的复选框前面的动画效果，包括动画名称、关键帧、缓动函数等。

@keyframes check-01 {0% {width: 4px;top: auto;transform: rotate(0);}50% {width: 0px;top: auto;transform: rotate(0);}51% {width: 0px;top: 8px;transform: rotate(45deg);}100% {width: 5px;top: 8px;transform: rotate(45deg);}
}

这段代码定义了复选框列表中的复选框前面的动画效果，包括动画名称、关键帧、缓动函数等。

@keyframes check-02 {0% {width: 4px;top: auto;transform: rotate(0);}50% {width: 0px;top: auto;transform: rotate(0);}51% {width: 0px;top: 8px;transform: rotate(-45deg);}100% {width: 10px;top: 8px;transform: rotate(-45deg);}
}

@keyframes firework {0% {opacity: 1;box-shadow: 0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0;}30% {opacity: 1;}100% {opacity: 0;box-shadow: 0 -15px 0 0px #4f29f0, 14px -8px 0 0px #4f29f0, 14px 8px 0 0px #4f29f0, 0 15px 0 0px #4f29f0, -14px 8px 0 0px #4f29f0, -14px -8px 0 0px #4f29f0;}
}

这段代码定义了复选框列表中的复选框动画效果，包括动画名称、关键帧、缓动函数等。

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

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

相关文章

线程同步--生产者消费者模型

线程同步--生产者消费者模型

文章目录 一.条件变量pthread线程库提供的条件变量操作 二.生产者消费者模型生产者消费者模型的高效性基于环形队列实现生产者消费者模型中的数据容器 一.条件变量 条件变量是线程间共享的全局变量,线程间可以通过条件变量进行同步控制条件变量的使用必须依赖于互斥锁以确保线…
阅读更多...
Docker（三）使用 Docker 镜像

Docker（三）使用 Docker 镜像

作者主页&#xff1a; 正函数的个人主页 文章收录专栏&#xff1a; Docker 欢迎大家点赞 &#x1f44d; 收藏 ⭐ 加关注哦&#xff01; 使用 Docker 镜像 在之前的介绍中&#xff0c;我们知道镜像是 Docker 的三大组件之一。 Docker 运行容器前需要本地存在对应的镜像&#x…
阅读更多...
行驶证OCR识别应用领域有哪些？

行驶证OCR识别应用领域有哪些？

随着科技的不断发展&#xff0c;OCR技术已经逐渐成熟&#xff0c;并在各个领域得到了广泛的应用。其中&#xff0c;OCR技术在行驶证识别领域的应用也日益受到关注。本文将重点介绍行驶证OCR识别的应用领域&#xff0c;以便更好地了解这一技术的应用前景。 首先&#xff0c;行驶…
阅读更多...
尚硅谷Nginx高级配置笔记

尚硅谷Nginx高级配置笔记

写在前面&#xff1a;本笔记是学习尚硅谷nginx可成的时候的笔记&#xff0c;不是原创&#xff0c;如有需要&#xff0c;可以去官网看视频&#xff0c;以下是pdf文件 Nginx高级 第一部分&#xff1a;扩容 通过扩容提升整体吞吐量 1.单机垂直扩容&#xff1a;硬件资源增加 云…
阅读更多...
计算机毕业设计----SSH会议室管理系统

计算机毕业设计----SSH会议室管理系统

项目介绍 本系统为基于jspsshmysql的会议室管理系统&#xff0c;包含普通用户和管理员&#xff0c;系统功能如下&#xff1a; 普通用户&#xff1a;会议室管理、会议管理、用户管理、个人资料。 管理员用户&#xff1a;会议室管理、会议管理、用户管理、部门管理、设备管理、个…
阅读更多...
前端 文件下载方法

前端 文件下载方法

开头 欢迎查看此文件下载添加页面下载按钮添加下载方法 欢迎查看此文件下载 我们每个项目中都会有一个文件下载的需求&#xff0c;但有些小伙伴遇到这种问题不知道该如何解决&#xff0c;那我今天就来为大家讲解一下 添加页面下载按钮 <div><button click"dow…
阅读更多...
基于docker创建nginx容器

基于docker创建nginx容器

docker一键安装可以参考我这个博客&#xff1a;一键安装docker 1.创建基础容器 docker run -p280:280 --name nginx -d nginx创建挂载到容器的宿主机文件夹 mkdir -p /home/000nginx-ebrms-ftp/html mkdir -p /home/000nginx-ebrms-ftp/logs mkdir -p /home/000nginx-ebrms-f…
阅读更多...
使用vue2写一个太极图，并且点击旋转

使用vue2写一个太极图，并且点击旋转

下面是我自己写的一个代码&#xff0c;命名有些不规范&#xff0c;大家不要介意。 <template><div class"qq"><div class"app" :style"{ transform: rotateStyle }"><div class"app1"><div class"ap…
阅读更多...
三坐标平台对环境的温度有要求吗——河北北重

三坐标平台对环境的温度有要求吗——河北北重

三坐标铸铁平台对环境的温度有一定的要求。通常情况下&#xff0c;三坐标平台在使用过程中要求环境的温度保持在一定范围内&#xff0c;以确保测量数据的准确性和稳定性。 具体的温度要求可能会因不同的三坐标铸铁平台型号和制造商而有所不同&#xff0c;一般来说&#xff0c;常…
阅读更多...
Unity Mirror VR联机开发 实战篇（二）

Unity Mirror VR联机开发 实战篇（二）

一、迁移示例中的联机物体 1、将MirrorExamplesVR工程中的部分文件夹复制到自己的工程中。 1、打开MirrorExamplesVR中的 SceneVR-Common场景。 2、将场景中没用的东西都删掉&#xff0c;只留下面这些&#xff0c;新建一个空物体XR Mirror&#xff0c;将所有剩下的物体拖成XR …
阅读更多...
汽车连接器接线端子和多芯线束连接界面

汽车连接器接线端子和多芯线束连接界面

冷压接的开式压接和闭式压接以及热压接的超声波焊接对汽车连接器接线端子和多芯线束连接界面 连接器接线端子和多芯线束的连接是电子线束行业&#xff0c;特别是汽车行业常用的导线连接方式。汽车整车线束又由许多分支线束组成&#xff0c;而分支线束必须通过连接器实现连接&am…
阅读更多...
绝地求生【违规处罚工作公示】1月8日-1月14日

绝地求生【违规处罚工作公示】1月8日-1月14日

1月8日至1月14日期间&#xff0c;共计对174,636个违规账号进行了封禁&#xff0c;其中164,757个账号因使用外挂被永久封禁。 若您游戏中遇到违规行为&#xff0c;建议您优先在游戏内进行举报&#xff1b; 另外您也可以在官方微信公众号【PUBG国际版】中点击“ 服务中心 - 举报…
阅读更多...
JavaSE核心基础-循环-笔记

JavaSE核心基础-循环-笔记

1.for循环: for(初始条件&#xff1b;判断条件&#xff1b;步进表达){ 循环体 } for(int i1;i<10;i){ if(i9){ break; // 终止循环 } if(i4){ continue; // 继续下次循环&#xff0…
阅读更多...
开源模型应用落地-业务整合篇（一）

开源模型应用落地-业务整合篇（一）

一、前言 经过对qwen-7b-chat的部署以及与vllm的推理加速的整合&#xff0c;我们成功构建了一套高性能、高可靠、高安全的AI服务能力。现在&#xff0c;我们将着手整合具体的业务场景&#xff0c;以实现完整可落地的功能交付。 作为上游部门&#xff0c;通常会采用最常用的方式…
阅读更多...
python统计分析——样本均值的分布（上）

python统计分析——样本均值的分布（上）

参考资料&#xff1a;用python动手学统计学 1、导入库 import numpy as np import pandas as pd import scipy as sp from scipy import statsfrom matplotlib import pyplot as plt import seaborn as sns 2、设置总体 本次研究总体是均值为4、标准差为0.8的正态总体。 po…
阅读更多...
使用 MinIO 和 PostgreSQL 简化数据事件

使用 MinIO 和 PostgreSQL 简化数据事件

本教程将教您如何使用 Docker 和 Docker Compose 在 MinIO 和 PostgreSQL 之间设置和管理数据事件&#xff0c;也称为存储桶或对象事件。 您可能已经在利用 MinIO 事件与外部服务进行通信&#xff0c;现在您将通过使用 PostgreSQL 自动化和简化数据事件管理来增强数据处理能力…
阅读更多...
栈（Stack）：计算机科学中的基础数据结构

栈（Stack）：计算机科学中的基础数据结构

前言 在计算机科学中&#xff0c;栈&#xff08;Stack&#xff09;是一种重要的数据结构&#xff0c;广泛用于各种程序和系统中。本文旨在向初学者介绍栈的概念、为什么需要它以及它的一些常见使用场景。 什么是栈&#xff1f; 栈是一种遵循后进先出&#xff08;Last In, First…
阅读更多...
Linux--磁盘与文件系统

Linux--磁盘与文件系统

目录 1.什么是文件系统 2.磁盘 2.1什么时磁盘 2.2磁盘的物理存储结构 2.3磁盘的逻辑抽象结构 3.磁盘文件系统&#xff08;EXT2&#xff09; inode Table(i结点表) Data Block inode Bitmap(inode位图) Block Bitmap(块位图) 在Linux如何删除文件 Group Descriptor Ta…
阅读更多...
30分钟带你深入优化安卓Bitmap大图

30分钟带你深入优化安卓Bitmap大图

30分钟带你源码深入了解Bitmap以及优化安卓大图 一、前言二、Bitmap入门1. 如何创建Bitmap?2. Bitmap的堆内存分布在哪里3. 图片文件越大&#xff0c;Bitmap堆内存会越大吗&#xff1f;4. 如何管理Bitmap的内存&#xff1f;5. 实战修改Bitmap的堆内存&#xff0c;改变图片的图…
阅读更多...
24秋招，百度测试开发工程师三面

24秋招，百度测试开发工程师三面

前言 大家好&#xff0c;我是chowley&#xff0c;今天来回顾一下&#xff0c;我当时参加百度秋招补录&#xff0c;测试开发工程师的第三面-leader面 到面试开始的时间&#xff0c;面试官打电话表示让我等十分钟&#xff0c;随后跳过自我介绍&#xff0c;直接开面 时间&#…
阅读更多...
最新文章

Copyright @ 2022~2023