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 镜像

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

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

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

尚硅谷Nginx高级配置笔记

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

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

项目介绍 本系统为基于jspsshmysql的会议室管理系统&#xff0c;包含普通用户和管理员&#xff0c;系统功能如下&#xff1a; 普通用户&#xff1a;会议室管理、会议管理、用户管理、个人资料。 管理员用户&#xff1a;会议室管理、会议管理、用户管理、部门管理、设备管理、个…

基于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…

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

三坐标铸铁平台对环境的温度有一定的要求。通常情况下&#xff0c;三坐标平台在使用过程中要求环境的温度保持在一定范围内&#xff0c;以确保测量数据的准确性和稳定性。 具体的温度要求可能会因不同的三坐标铸铁平台型号和制造商而有所不同&#xff0c;一般来说&#xff0c;常…

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日期间&#xff0c;共计对174,636个违规账号进行了封禁&#xff0c;其中164,757个账号因使用外挂被永久封禁。 若您游戏中遇到违规行为&#xff0c;建议您优先在游戏内进行举报&#xff1b; 另外您也可以在官方微信公众号【PUBG国际版】中点击“ 服务中心 - 举报…

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 简化数据事件

本教程将教您如何使用 Docker 和 Docker Compose 在 MinIO 和 PostgreSQL 之间设置和管理数据事件&#xff0c;也称为存储桶或对象事件。 您可能已经在利用 MinIO 事件与外部服务进行通信&#xff0c;现在您将通过使用 PostgreSQL 自动化和简化数据事件管理来增强数据处理能力…

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以及优化安卓大图 一、前言二、Bitmap入门1. 如何创建Bitmap?2. Bitmap的堆内存分布在哪里3. 图片文件越大&#xff0c;Bitmap堆内存会越大吗&#xff1f;4. 如何管理Bitmap的内存&#xff1f;5. 实战修改Bitmap的堆内存&#xff0c;改变图片的图…

MySQL中锁的概述

按照锁的粒度来分可分为&#xff1a;全局锁&#xff08;锁住当前数据库的所有数据表&#xff09;&#xff0c;表级锁&#xff08;锁住对应的数据表&#xff09;&#xff0c;行级锁&#xff08;每次锁住对应的行数据&#xff09; 加全局锁&#xff1a;flush tables with read lo…

【PyTorch】PyTorch之Tensors操作篇

文章目录 前言一、Tensor创建1、TENSOR2、SPARSE_COO_TENSOR3、SPARSE_CSR_TENSOR4、ASARRAY5、AS_TENSOR6、FROM_NUMPY7、FROMBUFFER8、ZEROS和ZEROS_LIKE9、ONES和ONES_LIKE10、ARANGE11、LINSPACE12、LOGSPACE13、EYE14、EMPTY和EMPTY_LIKE15、FULL和FULL_LIKE 前言 介绍Te…

Docker 安装 PHP

Docker 安装 PHP 安装 PHP 镜像 方法一、docker pull php 查找 Docker Hub 上的 php 镜像: 可以通过 Sort by 查看其他版本的 php&#xff0c;默认是最新版本 php:latest。 此外&#xff0c;我们还可以用 docker search php 命令来查看可用版本&#xff1a; runoobrunoob:…

使用C#操作文件:一个实际案例——替换文件中的IP地址

标题&#xff1a; 使用C#操作文件&#xff1a;一个实际案例——替换文件中的IP地址 介绍&#xff1a; 欢迎阅读我的最新博客&#xff01;今天&#xff0c;我们将探讨如何使用C#来处理一个实际的编程挑战&#xff1a;读取一个配置文件并替换其中的IP地址。这是一个非常常见的…

windows安装mysql5.7

看了如何学习mysql后&#xff0c;就开始本地安装mysql&#xff0c;开始学习了。 1.官网下载 官网地址&#xff1a; https://dev.mysql.com/downloads/mysql/ 选择5.7版本 点击 “No thanks, just start my download”开始下载 下载64位的压缩包版 解压下载好的.zip文件&#xf…

Adobe全新AI驱动的Premiere Pro功能消除了枯燥的音频编辑任务

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…