HTMLCSS：打造酷炫下载安装模拟按钮

效果演示

这段代码通过HTML和CSS创建了一个具有交互效果的下载按钮，当复选框被选中时，会触发一系列动画和样式变化，模拟了一个下载和安装的过程，包括圆形的动画、文本的显示和隐藏等。

HTML

<div class="container"><label class="label"><input type="checkbox" class="input" /><span class="circle"><svg class="icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"d="M12 19V5m0 14-4-4m4 4 4-4"></path></svg><div class="square"></div></span><p class="title1">Download</p><p class="title1">Open</p></label>
</div>
  • container：外层容器，用于包裹整个组件，设置了一些基本的样式属性如字体、布局等。
  • label：一个标签元素，包含了以下内容：
  • checkbox：一个复选框，用于触发后续的交互效果，初始状态下隐藏。
  • circle：一个圆形容器，内部包含一个 SVG 图标和一个白色正方形，用于表示不同的状态。
  • icon：一个 SVG 图标，路径描述了一个特定的图形，初始状态下显示。
  • square：一个白色正方形，初始状态下隐藏。
  • Download：一个文本标签，表示 “Download”。
  • Open：另一个文本标签，表示 “Open”，初始状态下隐藏。

CSS

.container {padding: 0;margin: 0;box-sizing: border-box;font-family: Arial, Helvetica, sans-serif;display: flex;justify-content: center;align-items: center;
}.label {background-color: transparent;border: 2px solid rgb(91, 91, 240);display: flex;align-items: center;border-radius: 50px;width: 160px;cursor: pointer;transition: all 0.4s ease;padding: 5px;position: relative;
}.label::before {content: "";position: absolute;top: 0;bottom: 0;left: 0;right: 0;background-color: #fff;width: 8px;height: 8px;transition: all 0.4s ease;border-radius: 100%;margin: auto;opacity: 0;visibility: hidden;
}.label .input {display: none;
}.label .title1 {font-size: 18px;color: #fff;transition: all 0.4s ease;position: absolute;right: 18px;text-align: center;
}.label .title1:last-child {opacity: 0;visibility: hidden;
}.label .circle {height: 45px;width: 45px;border-radius: 50%;background-color: rgb(91, 91, 240);display: flex;justify-content: center;align-items: center;transition: all 0.4s ease;position: relative;box-shadow: 0 0 0 0 rgb(255, 255, 255);overflow: hidden;
}.label .circle .icon {color: #fff;width: 30px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);transition: all 0.4s ease;
}.label .circle .square {aspect-ratio: 1;width: 15px;border-radius: 2px;background-color: #fff;opacity: 0;visibility: hidden;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);transition: all 0.4s ease;
}.label .circle::before {content: "";position: absolute;left: 0;top: 0;background-color: #3333a8;width: 100%;height: 0;transition: all 0.4s ease;
}.label:has(.input:checked) {width: 57px;animation: installed 0.4s ease 3.5s forwards;
}.label:has(.input:checked)::before {animation: rotate 3s ease-in-out 0.4s forwards;
}.label .input:checked+.circle {animation:pulse 1s forwards,circleDelete 0.2s ease 3.5s forwards;rotate: 180deg;
}.label .input:checked+.circle::before {animation: installing 3s ease-in-out forwards;
}.label .input:checked+.circle .icon {opacity: 0;visibility: hidden;
}.label .input:checked~.circle .square {opacity: 1;visibility: visible;
}.label .input:checked~.title1 {opacity: 0;visibility: hidden;
}.label .input:checked~.title1:last-child {animation: showInstalledMessage 0.4s ease 3.5s forwards;
}@keyframes pulse {0% {scale: 0.95;box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);}70% {scale: 1;box-shadow: 0 0 0 16px rgba(255, 255, 255, 0);}100% {scale: 0.95;box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);}
}@keyframes installing {from {height: 0;}to {height: 100%;}
}@keyframes rotate {0% {transform: rotate(-90deg) translate(27px) rotate(0);opacity: 1;visibility: visible;}99% {transform: rotate(270deg) translate(27px) rotate(270deg);opacity: 1;visibility: visible;}100% {opacity: 0;visibility: hidden;}
}@keyframes installed {100% {width: 150px;border-color: rgb(35, 174, 35);}
}@keyframes circleDelete {100% {opacity: 0;visibility: hidden;}
}@keyframes showInstalledMessage {100% {opacity: 1;visibility: visible;right: 56px;}
}
  • .container类：padding: 0; margin: 0; box-sizing: border-box;去除默认的内边距和外边距，并使用box-sizing属性确保元素的尺寸计算包括边框和内边距。font-family: Arial, Helvetica, sans-serif;设置字体为 Arial 等通用字体。display: flex; justify-content: center; align-items: center;使容器内部的内容水平和垂直居中。
  • .label类：background-color: transparent;设置背景透明。border: 2px solid rgb(91, 91, 240);设置边框为蓝色。display: flex; align-items: center; border-radius: 50px;设置为弹性布局，使内部元素垂直居中，并设置圆角边框。width: 160px; cursor: pointer; transition: all 0.4s ease;设置初始宽度、鼠标指针为手型，并设置所有属性的过渡效果为 0.4 秒缓动。padding: 5px; position: relative;设置内边距和相对定位，为内部的绝对定位元素提供参考。
  • .label::before伪元素：用于创建一个圆形的元素，初始状态下隐藏，用于后续的动画效果。content: “”; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: #fff; width: 8px; height: 8px; transition: all 0.4s ease; border-radius: 100%; margin: auto; opacity: 0; visibility: hidden;设置绝对定位、白色背景、圆形形状、隐藏状态和过渡效果。
  • .label.input选择器：display: none;隐藏复选框。
  • .label.title1选择器：font-size: 18px; color: #fff; transition: all 0.4s ease; position: absolute;设置文本的字体大小、颜色、过渡效果和绝对定位。.label.title1:last-child表示第二个title1元素，初始状态下隐藏。
  • .label.circle选择器：height: 45px; width: 45px; border-radius: 50%; background-color: rgb(91, 91, 240); display: flex; justify-content: center; align-items: center; transition: all 0.4s ease; position: relative; box-shadow: 0 0 0 0 rgb(255, 255, 255); overflow: hidden;设置圆形的大小、背景颜色、弹性布局、过渡效果、相对定位、阴影和溢出隐藏。
  • .label.circle.icon选择器：color: #fff; width: 30px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: all 0.4s ease;设置 SVG 图标的颜色、宽度、绝对定位和过渡效果，使其在圆形中心。
  • .label.circle.square选择器：aspect-ratio: 1; width: 15px; border-radius: 2px; background-color: #fff; opacity: 0; visibility: hidden; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: all 0.4s ease;设置白色正方形的宽高比、大小、背景颜色、绝对定位、隐藏状态和过渡效果，使其在圆形中心。
  • .label.circle::before伪元素：content: “”; position: absolute; left: 0; top: 0; background-color: #3333a8; width: 100%; height: 0; transition: all 0.4s ease;创建一个覆盖在圆形上的深蓝色元素，初始高度为 0，用于动画效果。
  • 各种动画关键帧定义：@keyframes pulse：定义了一个脉冲动画效果，用于圆形的缩放和阴影变化。@keyframes installing：定义了一个动画，使圆形上方的深蓝色元素从高度为0逐渐变为100%。@keyframes rotate：定义了一个旋转动画，用于隐藏圆形前面的白色圆形元素。@keyframes installed：定义了一个动画，当复选框被选中时，改变标签的宽度和边框颜色。@keyframes circleDelete：定义了一个动画，使圆形隐藏。@keyframes showInstalledMessage：定义了一个动画，显示 “Open” 文本并调整其位置。
  • 基于复选框状态的样式变化：.label:has(.input:checked)：当复选框被选中时，改变标签的宽度并应用一个动画。.label:has(.input:checked)::before：当复选框被选中时，应用一个旋转动画给前面的白色圆形元素。.label.input:checked +.circle：当复选框被选中时，对圆形应用多个动画效果，包括脉冲、旋转和最终隐藏。.label.input:checked +.circle::before：当复选框被选中时，应用安装动画给圆形上方的深蓝色元素。.label.input:checked +.circle.icon：当复选框被选中时，隐藏 SVG 图标。.label.input:checked ~.circle.square：当复选框被选中时，显示白色正方形。.label.input:checked ~.title1：当复选框被选中时，隐藏 “Download” 文本。.label.input:checked ~.title1:last-child：当复选框被选中时，显示 “Open” 文本并应用动画调整其位置。

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

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

相关文章

【C++、数据结构】哈希表——散列表(一)（概念/总结）

【C++、数据结构】哈希表——散列表(一)（概念/总结）

「前言」 &#x1f308;个人主页&#xff1a; 代码探秘者 &#x1f308;C语言专栏&#xff1a;C语言 &#x1f308;C专栏&#xff1a; C / STL使用以及模拟实现 &#x1f308;数据结构专栏&#xff1a; 数据结构 / 十大排序算法 &#x1f308;Linux专栏&#xff1a; Linux系统编…
阅读更多...
WindowsDocker安装到D盘，C盘太占用空间了。

WindowsDocker安装到D盘，C盘太占用空间了。

Windows安装 Docker Desktop的时候，默认位置是安装在C盘，使用Docker下载的镜像文件也是保存在C盘，如果对Docker使用评率比较高的小伙伴，可能C盘空间，会被耗尽，有没有一种办法可以将Docker安装到其它磁盘，同时Docker的数据文件也保存在其他磁盘呢？ 答案是有的，我们可以…
阅读更多...
mac｜安装redis及RedisDesk可视化软件

mac｜安装redis及RedisDesk可视化软件

一、安装 通过Homebrew安装 brew install redis 在安装过程可以得到以下信息&#xff1a; 1、启动redis或重新登陆redis brew services start redis 如果只想在前端运行&#xff0c;而不是在后端&#xff0c;则使用以下命令 /opt/homebrew/opt/redis/bin/redis-server /opt…
阅读更多...
程序中怎样用最简单方法实现写excel文档

程序中怎样用最简单方法实现写excel文档

很多开发语言都能找到excel文档读写的库&#xff0c;但是在资源极其受限的环境下开发&#xff0c;引入这些库会带来兼容性问题。因为一个小功能引入一堆库&#xff0c;我始终觉得划不来。看到有项目引用的jar包有一百多个&#xff0c;看着头麻&#xff0c;根本搞不清谁依赖谁。…
阅读更多...
重读《人月神话》（12）-未雨绸缪（Plan to Throw One Away）

重读《人月神话》（12）-未雨绸缪（Plan to Throw One Away）

对程序员而言&#xff0c;一个不容忽视的事实是&#xff1a;任何系统都将经历变更&#xff0c;最初精心设计的软件也可能因不断的修补而变得面目全非。无论设计多么完美&#xff0c;随着时间推移&#xff0c;系统难免陷入混乱&#xff0c;只是程度和速度有所不同。因此&#xf…
阅读更多...
unity 三维数学 ，角度 弧度计算

unity 三维数学 ，角度 弧度计算

弧度 角度*π/180
阅读更多...
（附项目源码）python开发语言，基于python Web的高校毕业论文管理系统 51，计算机毕设程序开发+文案（LW+PPT）

（附项目源码）python开发语言，基于python Web的高校毕业论文管理系统 51，计算机毕设程序开发+文案（LW+PPT）

摘 要 随着信息化技术的迅速发展&#xff0c;人类信息化文明的到来&#xff0c;为人类的日常生活以及日常生产活动提供了非常大的便利&#xff0c;有效地解决了很多曾经无法解决的问题。本次基于python Web的高校毕业论文管理系统的开发是针对我国传统的高校毕业论文管理模式沟…
阅读更多...
计算机网络：网络层 —— 网络地址转换 NAT

计算机网络：网络层 —— 网络地址转换 NAT

文章目录 网络地址转换 NAT 概述最基本的 NAT 方法NAT 转换表的作用 网络地址与端口号转换 NAPTNAT 和 NAPT 的缺陷 网络地址转换 NAT 概述 尽管因特网采用了无分类编址方法来减缓 IPv4 地址空间耗尽的速度&#xff0c;但由于因特网用户数量的急剧增长&#xff0c;特别是大量小…
阅读更多...
C++进阶：unordered_map和unordered_set的使用

C++进阶：unordered_map和unordered_set的使用

目录 一.unordered_set系列 1.1unordered_set类的介绍 1.2unordered_set与set的差异 二.unordered_map的系列 三.unordered_multimap/unordered_multiset 一.unordered_set系列 1.1unordered_set类的介绍 • unordered_set的声明如下&#xff0c;Key就是unordered_set底层…
阅读更多...
【6G 需求与定义】ITU（国际电联）对全球6G标准的愿景

【6G 需求与定义】ITU（国际电联）对全球6G标准的愿景

博主未授权任何人或组织机构转载博主任何原创文章&#xff0c;感谢各位对原创的支持&#xff01; 博主链接 本人就职于国际知名终端厂商&#xff0c;负责modem芯片研发。 在5G早期负责终端数据业务层、核心网相关的开发工作&#xff0c;目前牵头6G技术研究。 博客内容主要围绕…
阅读更多...
java:题目：用Java实现简单的自取取款操作

java:题目：用Java实现简单的自取取款操作

import java.util.Scanner; public class ATM {public static void main(String[] args){//自主取款主类Scanner scnew Scanner(System.in);System.out.println("请输入账户号码&#xff1a;");String BankAccoutsrsc.nextLine();/BankAccout3 newBankAccoutnew Bank…
阅读更多...
Windows 部署非安装版Redis

Windows 部署非安装版Redis

1.下载Redis https://github.com/microsoftarchive/redis/releases 选择下载zip包&#xff0c;如Redis-x64-3.0.504.zip&#xff0c;并解压 2.启动非安装版redis服务 进入到redis目录&#xff0c;打开cmd 执行命令 redis-server.exe redis.windows.conf 3.登录redis客户端…
阅读更多...
【连续多届检索，ACM出版】第四届大数据、人工智能与风险管理国际学术会议 (ICBAR 2024，11月15-17)--冬季主会场

【连续多届检索，ACM出版】第四届大数据、人工智能与风险管理国际学术会议 (ICBAR 2024，11月15-17)--冬季主会场

第四届大数据、人工智能与风险管理国际学术会议 (ICBAR 2024)--冬季主会场 2024 4th International Conference on Big Data, Artificial Intelligence and Risk Management 会议官网&#xff1a;www.icbar.net 2024 4th International Conference on Big Data, Artificial I…
阅读更多...
HTML 基础概念：什么是 HTML ? HTML 的构成 与 HTML 基本文档结构

HTML 基础概念：什么是 HTML ? HTML 的构成 与 HTML 基本文档结构

文章目录 什么是 HTML &#xff1f;HTML 的构成 &#xff1f;什么是 HTML 元素&#xff1f;HTML 元素的组成部分HTML 元素的特点 HTML 基本文档结构如何打开新建的 HTML 文件代码查看 什么是 HTML &#xff1f; HTML&#xff08;超文本标记语言&#xff0c;HyperText Markup L…
阅读更多...
网络编程 TCP编程 Linux环境 C语言实现

网络编程 TCP编程 Linux环境 C语言实现

所有基于数据传输通信的程序&#xff0c;都会被分成两种角色&#xff1a; 1. 服务端&#xff1a;又称为服务器 server 提供一种通信服务的进程 基本工作过程是&#xff1a;1> 接收请求数据 2> 处理请求数据 3> 发送处理结果 2. 客户端&#xff1a;client 使用一种通…
阅读更多...
第二十九章 Vue之插槽

第二十九章 Vue之插槽

目录 一、引言 二、默认插槽 2.1. 默认插槽基本语法 2.2. 完整代码 2.2.1. main.js 2.2.2. App.vue 2.2.3. MyDialog.vue 2.3. 运行效果 三、插槽后备内容&#xff08;默认值&#xff09; 3.1. 插槽后备内容基本语法 3.2. 完整代码 3.2.1. main.js 3.2.2. App.vu…
阅读更多...
宠物领养救助管理软件有哪些功能 佳易王宠物领养救助管理系统使用操作教程

宠物领养救助管理软件有哪些功能 佳易王宠物领养救助管理系统使用操作教程

一、概述 佳易王宠物领养救助管理系统V16.0&#xff0c;集宠物信息登记、查询&#xff0c;宠物领养登记、查询&#xff0c; 宠物领养预约管理、货品进出库库存管理于一体的综合管理系统软件。 概述&#xff1a; 佳易王宠物领养救助管理系统V16.0&#xff0c;集宠物信息登记…
阅读更多...
【ESP32+MicroPython】开发环境部署

【ESP32+MicroPython】开发环境部署

本教程将指导你如何在Visual Studio Code&#xff08;VSCode&#xff09;中设置ESP32的MicroPython开发环境。我们将涵盖从安装Python到烧录MicroPython固件的整个过程&#xff0c;以及如何配置VSCode以便与ESP32进行交互。 准备工作 安装Python 确保你的计算机上安装了Pyth…
阅读更多...
前端Nginx的安装与应用

前端Nginx的安装与应用

目录 一、前端跨域方式 1.1、CORS(跨域资源共享) 1.2、JSONP(已过时) 1.3、WebSocket 1.4、PostMessage 1.5、Nginx 二、安装 三、应用 四、命令 4.1、基本操作命令 4.2、nginx.conf介绍 4.2.1、location模块 4.2.2、反向代理配置 4.2.3、负载均衡模块 4.2.4、通…
阅读更多...
mysql之命令行基础指令

mysql之命令行基础指令

一&#xff1a;安装好mysql后&#xff0c;注册好账号密码。 二&#xff1a;在命令行进行登录的指令如下 mysql -u用户名 -p 例如&#xff1a;mysql -uroot -p; 然后按下回车&#xff0c;进入输入密码。 三&#xff1a;基本指令&#xff1a; 1&#xff1a;查看当前账户的所有…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023