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.mzph.cn/pingmian/59215.shtml

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

相关文章

Multi Agents协作机制设计及实践

Multi Agents协作机制设计及实践

01 多智能体协作机制的背景概述 在前述博客中&#xff0c;我们利用LangChain、AutoGen等开发框架构建了一个数据多智能体的平台&#xff0c;并使用了LangChain的Multi-Agents框架。然而&#xff0c;在实施过程中&#xff0c;我们发现现有的框架存在一些局限性&#xff0c;这些…
阅读更多...
ML2001-1 机器学习/深度学习 Introduction of Machine / Deep Learning

ML2001-1 机器学习/深度学习 Introduction of Machine / Deep Learning

图片说明来自李宏毅老师视频的学习笔记&#xff0c;如有侵权&#xff0c;请通知下架 影片参考 【李宏毅】3.第一节 - (上) - 机器学习基本概念简介_哔哩哔哩_bilibili 1. 机器学习的概念与任务类型 概念&#xff1a;机器学习近似于寻找函数&#xff0c;用于处理不同类型的任…
阅读更多...
90%会展主办方都会用的6款数字化工具

90%会展主办方都会用的6款数字化工具

在会展行业&#xff0c;数字化转型已成为提升竞争力的关键。面对日益增长的运营成本和收入增长的瓶颈&#xff0c;主办方需要借助数字化工具来实现效率提升和成本控制。 今天介绍几种常见的数字化工具和应用方式。 一、线上展览平台 构建线上展览平台是会展主办方拓展线上销…
阅读更多...
JMeter快速造数之数据导入导出

JMeter快速造数之数据导入导出

导入数据 输入表格格式如下 创建CSV Data Set Config 在Body Data中调用 { "username": "${email}", "password": "123456", "client_id": "00bb9dbfc67439a5d42e0e19f448c7de310df4c7fcde6feb5bd95c6fac5a5afc"…
阅读更多...
渗透测试-快速获取目标中存在的漏洞(小白版)

渗透测试-快速获取目标中存在的漏洞(小白版)

《Java代码审计》http://mp.weixin.qq.com/s?__bizMzkwNjY1Mzc0Nw&mid2247484219&idx1&sn73564e316a4c9794019f15dd6b3ba9f6&chksmc0e47a67f793f371e9f6a4fbc06e7929cb1480b7320fae34c32563307df3a28aca49d1a4addd&scene21#wechat_redirect 《Web安全》h…
阅读更多...
[免费]基于Python的Django+Vue3在线考试系统【论文+源码+SQL脚本】

[免费]基于Python的Django+Vue3在线考试系统【论文+源码+SQL脚本】

大家好&#xff0c;我是java1234_小锋老师&#xff0c;看到一个不错的基于Python的DjangoVue3在线考试系统&#xff0c;分享下哈。 项目视频演示 【免费】基于Python的DjangoVue3在线考试系统 Python毕业设计_哔哩哔哩_bilibili 项目介绍 本论文提出并实现了一种基于Python…
阅读更多...
Unity3D学习FPS游戏（9）武器音效添加、创建敌人模型和血条

Unity3D学习FPS游戏（9）武器音效添加、创建敌人模型和血条

前言&#xff1a;虽然已经实现了基本玩家操作&#xff0c;但是游戏运行起来并没有音效。既然是FPS游戏有了玩家和武器&#xff0c;肯定还得有敌人。本篇演示如何给武器添加音效和创建敌人。 武器音效添加和创建敌人 武器音效添加Audio Source代码控制 创建敌人目标敌人模型敌人…
阅读更多...
雷池社区版新版本功能防绕过人机验证解析

雷池社区版新版本功能防绕过人机验证解析

前两天&#xff0c;2024.10.31&#xff0c;雷池社区版更新7.1版本&#xff0c;其中有一个功能&#xff0c;新增请求防重放 更新记录&#xff1a;hhttps://docs.waf-ce.chaitin.cn/zh/%E7%89%88%E6%9C%AC%E6%9B%B4%E6%96%B0%E8%AE%B0%E5%BD%95 仔细研究了这个需求&#xff0c;…
阅读更多...
PyCharm中pylint安装与使用

PyCharm中pylint安装与使用

目录 1. 安装插件2. pycharm中使用该功能3. 命令行使用 1. 安装插件 然后重启 2. pycharm中使用该功能 3. 命令行使用 前提是先 pip install pylint pylint demo01.py下面红框内容的意思是&#xff0c;得到10分/ 满分10分&#xff0c;上次运行获得8.33分&#xff0c;经调整…
阅读更多...
IDEA加载通义灵码插件及使用指南

IDEA加载通义灵码插件及使用指南

安装通义灵码插件 登录通义灵码IDE插件 下载登录参考教程 https://help.aliyun.com/zh/lingma/user-guide/download-the-installation-guide 本地工程和企业知识库准备 请下载本地工程和知识库压缩包&#xff0c;并在本地解压缩&#xff0c;其中包含demoProject和知识库文件…
阅读更多...
只因把 https 改成 http，带宽减少了 70%！

只因把 https 改成 http，带宽减少了 70%！

起因 是一个高并发的采集服务上线后&#xff0c;100m的上行很快就被打满了。因为这是一条专线&#xff0c;并且只有这一个服务在使用&#xff0c;所以可以确定就是它导致的。 但是&#xff01;这个请求只是一个 GET 请求&#xff0c;同时并没有很大的请求体&#xff0c;这是为…
阅读更多...
黑马官网最新2024前端就业课V8.5笔记---CSS篇（2）

黑马官网最新2024前端就业课V8.5笔记---CSS篇（2）

盒子模型 画盒子 目标:使用合适的选择器画盒子 属性 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"view…
阅读更多...
认识单双链表

认识单双链表

认识单双链表 前置知识&#xff1a;无&#xff0c;会的可以直接跳过。 基本概念 内存空间是所有程序的公共资源&#xff0c;在一个复杂的系统运行环境下&#xff0c;空闲的内存空间可能散落在内存各处。我们知道&#xff0c;存储数组的内存空间必须是连续的&#xff0c;而当…
阅读更多...
木马病毒相关知识

木马病毒相关知识

1、 木马的定义 相当于一个远控程序&#xff08;一个控制端[hack]、一个被控端[受害端]&#xff09; 在计算机系统中&#xff0c;“特洛伊木马”指系统中被植入的、人为设计的程序&#xff0c;目的包括通过网终远程控制其他用户的计算机系统&#xff0c;窃取信息资料&#xff0…
阅读更多...
Oracle简介、环境搭建和基础DML语句

Oracle简介、环境搭建和基础DML语句

第一章 ORACLE 简介 1.1 什么是 ORACLE ORACLE数据库系统是美国ORACLE 公司&#xff08;甲骨文&#xff09;提供的以分布式数据库为核心的一组软件产品&#xff0c;是目前最流行的客户/服务器体系结构的数据库之一。 英文官网&#xff1a;Database | Oracle 中文官网&#xff…
阅读更多...
【React】初学React

【React】初学React

A. react中如何创建元素呢&#xff1f; 说明一点&#xff1a; 属性都改为驼峰形式&#xff08;无障碍属性aria-*除外&#xff09;&#xff0c; class改成className 创建元素 B. 变量或表达式如何表示呢&#xff1f;大括号{ }包起来 变量值用大括号包裹 C. 元素和组件的区别 元素…
阅读更多...
Memento 备忘录模式

Memento 备忘录模式

备忘录模式 意图结构适用性实例Java Web开发中的简单示例Originator 类Memento 类Caretaker 类 文本编辑器示例1. Originator (发起人) - TextEditor2. Memento (备忘录) - TextMemento3. Caretaker (负责人) - History4. 使用示例输出 备忘录模式&#xff08;Memento Pattern&…
阅读更多...
导入项目时微信开发者工具如何自动识别项目APPID

导入项目时微信开发者工具如何自动识别项目APPID

一、需求 当我们在公司拉取小程序项目的时候&#xff0c;经常会在微信开发者工具中导入项目&#xff0c;需要我们手动输入自己的appid非常麻烦&#xff0c;我们可以用在导入项目的时候自动识别公司的appid 二、步骤 2.1 使用Hbuilder工具编译项目 编译成功后会有一个unpacka…
阅读更多...
小语言模型介绍与LLM的比较

小语言模型介绍与LLM的比较

小模型介绍 小语言模型&#xff08;SLM&#xff09;与大语言模型&#xff08;LLM&#xff09;相比&#xff0c;具有不同的特点和应用场景。大语言模型通常拥有大量的参数&#xff08;如 GPT-3 拥有 1750 亿个参数&#xff09;&#xff0c;能够处理复杂的自然语言任务&#xff…
阅读更多...
17.快递物流仓库管理系统（基于springboot和vue）

17.快递物流仓库管理系统（基于springboot和vue）

目录 1.系统的受众说明 2.系统详细设计 2.1 需求分析 2.2 系统功能设计 2.3 开发环境分析 ​​​​​​​2.4 E-R图设计 2.5 数据库设计 3. 系统实现 3.1 环境搭建 ​​​​​​​3.2 员工信息管理模块 3.3 销售订单信息管理模块 ​​​​​​​3.4 图表分析模块…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023