HTML5+CSS3小实例：3D发光切换按钮效果

目录

 一、运行效果

图片效果

二、项目概述

三、开发环境

四、实现步骤及代码

1.创建空文件夹

2.完成页面内容

3.完成css样式

五、项目总结   

六、源码获取

 一、运行效果

图片效果

二、项目概述

        这个项目是一个演示3D发光切换按钮效果的网页。按钮由一个开关和一个指示灯组成，通过点击按钮可以切换按钮的状态。按钮的状态改变时，指示灯会有动画效果，呈现出3D发光效果。该项目使用HTML和CSS来实现按钮的样式和动画效果。


三、开发环境

开发环境：VsCode
编程语言：HTML5+CSS3
操作系统：Windows


四、实现步骤及代码

1.创建空文件夹

<!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>公众号《编程乐学》- 3D发光切换按钮效果</title></head><body></body></html>


2.完成页面内容

 <div class="switch"><input type="checkbox" name="toggle"><label for="toggle"><i></i></label><span></span></div>

3.完成css样式

        这段代码是一个萤火虫动画效果的HTML和CSS代码片段。它使用CSS来实现动画效果和响应式设计。代码中包含了萤火虫的身体、眼睛、触角和翅膀等部分的样式定义。通过使用伪类和动画效果，实现了萤火虫身体的闪烁、翅膀的旋转等动画效果。整个动画效果非常生动有趣。

        在代码中，使用了flex布局来使元素垂直居中，并设置了背景渐变和字体样式。使用了伪类和绝对定位来定义了萤火虫的各个部分的样式，例如头部、眼睛、触角、胸部和腹部等。使用了过渡效果和动画效果来实现了萤火虫的闪烁和翅膀的动画效果。

  <style>body {height: 100vh;display: flex;justify-content: center;align-items: center;background: #202838;}.switch input {top: 0;right: 0;bottom: 0;left: 0;}.switch {width: 180px;height: 55px;position: relative;margin: 100px auto;}.switch label {display: block;width: 80%;height: 100%;position: relative;background: #1F2736;/*#121823*/background: linear-gradient(#121823, #161d2b);border-radius: 30px 30px 30px 30px;box-shadow:inset 0 3px 8px 1px rgba(0, 0, 0, 0.5),inset 0 1px 0 rgba(0, 0, 0, 0.5),0 1px 0 rgba(255, 255, 255, 0.2);-webkit-transition: all .5s ease;transition: all .5s ease;}.switch input~label i {display: block;height: 51px;width: 51px;position: absolute;left: 2px;top: 2px;z-index: 2;border-radius: inherit;background: #283446;/* Fallback */background: linear-gradient(#36455b, #283446);box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 0 8px rgba(0, 0, 0, 0.3),0 12px 12px rgba(0, 0, 0, 0.4);-webkit-transition: all .5s ease;transition: all .5s ease;}.switch label+span {content: "";display: inline-block;position: absolute;right: 0px;top: 17px;width: 18px;height: 18px;border-radius: 10px;background: #283446;background: gradient-gradient(#36455b, #283446);}/* Toggle */.switch input:checked~label+span {content: "";display: inline-block;position: absolute;width: 18px;height: 18px;border-radius: 10px;-webkit-transition: all .5s ease;transition: all .5s ease;z-index: 2;background: #b9f3fe;background: gradient-gradient(#ffffff, #77a1b9);}.switch input:checked~label i {left: auto;left: 63%;}</style>

五、项目总结   

       这个项目通过使用HTML和CSS实现了一个漂亮的3D发光切换按钮效果。通过点击按钮，可以切换按钮的状态，并伴随着指示灯的动画效果。整体的设计风格简洁大方，颜色搭配和过渡效果非常出色，给用户带来良好的视觉体验。

        在实现过程中，主要使用了CSS的渐变背景、阴影和过渡效果等特性来实现按钮的样式和动画效果。通过合理的布局和定位，使得按钮的各个元素能够正确地显示和响应用户的点击事件。

        这个项目展示了HTML和CSS的一些高级特性和技巧，对于想要学习和掌握前端开发的人来说，是一个很好的实践项目。通过参考和理解这个项目的代码，可以学习到如何运用CSS来实现动态效果和交互功能，以及如何优化用户体验。

六、源码获取

        ✨还可以关注宫纵号《编程乐学》，菜单栏有很多优质的开源项目以及更多的编程资料等你来学习。

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

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

相关文章

登录校验，JWT令牌技术，过滤器（Filter）拦截器（interceptor）

登录校验，JWT令牌技术，过滤器（Filter）拦截器（interceptor）

登录功能&#xff1a; 前端传递json格式的数据。username&#xff08;用户名&#xff09;password&#xff08;密码&#xff09;。controller层对数据进行接收&#xff0c;由于是接收json格式的数据&#xff0c;所以我们把它封装到一个对象里面&#xff0c;由于登录是员工进行登…
阅读更多...
Linux之进程（四）（进程地址空间）

Linux之进程（四）（进程地址空间）

目录 一、程序地址空间 二、进程地址空间 1、概念 2、写时拷贝 3、为什么要有进程地址空间 四、总结 一、程序地址空间 我们先来看看下面这张图。这张图是我们在学习语言时就见到过的内存区域划分图。 下面我们在Linux下看一看内存区域是不是也是这么划分的。 可见在Li…
阅读更多...
圣诞树绘制合集-python绘制

圣诞树绘制合集-python绘制

使用Python绘制迷人的圣诞树 引言 随着圣诞节的临近&#xff0c;我们都希望以各种方式庆祝这个欢乐的节日。作为一名编程爱好者&#xff0c;你有没有想过用Python来创造节日的气氛呢&#xff1f;在这篇文章中&#xff0c;我将向你展示如何用Python绘制几种不同风格的圣诞树&a…
阅读更多...
索尼(ILCE-7M3)MP4文件只能播放前两分钟修复案例

索尼(ILCE-7M3)MP4文件只能播放前两分钟修复案例

索尼的ILCE-7M3是一款经典设备&#xff0c;其HEVC编码效果是比较不错的&#xff0c;因此受到很多专业人士的青睐。之前我们说过很多索尼摄像机断电生成RSV文件修复的案例&#xff0c;今天来讲一个特殊的&#xff0c;文件已经正常封装但仅能播放前两分钟多一点的画面。 故障文件…
阅读更多...
详细教程 - 从零开发 鸿蒙harmonyOS应用 第四节 （鸿蒙Stage模型 登录页面 ArkTS版 推荐使用）

详细教程 - 从零开发 鸿蒙harmonyOS应用 第四节 （鸿蒙Stage模型 登录页面 ArkTS版 推荐使用）

在鸿蒙OS中&#xff0c;Ability是应用程序提供的抽象功能&#xff0c;可以理解为一种功能。在应用程序中&#xff0c;一个页面即一种能力&#xff0c;如登录页面&#xff0c;即具有登录功能的能力。以下是对鸿蒙新建项目的登录代码功能的详细解读和工作流程的描述&#xff1a; …
阅读更多...
C++入门篇

C++入门篇

呀哈喽&#xff0c;我是结衣。 了解完C的发展历程&#xff0c;我们当然也要会用C啊。今天这篇博客就是来帮助我们来入门C的&#xff0c;当然要入门C当然也要先学会C语言啦。在我学习C的过程中我会一直把C博客更新下去的。 C关键字 我们都知道C语言是有32个关键字的&#xff0…
阅读更多...
json JSON.parse()与JSON.stringify()

json JSON.parse()与JSON.stringify()

JSON.parse() 属于解析 JSON.parse()方法解析一个JSON字符串为ECMAScript值&#xff0c;返回解析后的值&#xff0c; JSON.parse({}); // -> {}JSON.parse([]); // -> []JSON.parse(1); // -> {}注意&#xff1a;JSON.parse()解析的JSON字符串不允许以逗…
阅读更多...
Python-数据分析可视化实例图

Python-数据分析可视化实例图

Python-数据分析可视化实例图 一&#xff1a;3D纹理图 运行效果图&#xff1a; Python代码&#xff1a; import math from typing import Unionimport pyecharts.options as opts from pyecharts.charts import Surface3Ddef float_range(start: int, end: int, step: Union[…
阅读更多...
分享66个Java源码总有一个是你想要的

分享66个Java源码总有一个是你想要的

分享66个Java源码总有一个是你想要的 学习知识费力气&#xff0c;收集整理更不易。 知识付费甚欢喜&#xff0c;为咱码农谋福利。 链接&#xff1a;https://pan.baidu.com/s/1hKlZJB3KrHcOuKWyV1xjKw?pwd6666 提取码&#xff1a;6666 项目名称 ava web个人网站项目 ea…
阅读更多...
不是生活有意思，是你热爱生活它才有意思

不是生活有意思，是你热爱生活它才有意思

明制汉服的设计 同样是一款很重工的外套 细节上也是做到了极致 顺毛毛呢面料 领口袖口拼接仿貂毛环保毛条 前胸欧根纱刺绣圆形布 袖子贴民族风珠片刺绣织带 门襟搭配金属子母扣&#xff0c;真盘扣设计 时尚经典&#xff0c;搭配马面裙孩子穿上 真的很有气质奢华富贵 …
阅读更多...
加密数据安全性的两大安全护盾-前向安全性与后向安全性详解

加密数据安全性的两大安全护盾-前向安全性与后向安全性详解

在数字安全的世界里&#xff0c;加密技术是用来保护数据不被未经授权访问的重要机制。然而&#xff0c;即使使用了最强的加密算法&#xff0c;也不能保证永远是安全的。攻击者可能会在未来某个时间点获得了解密密钥&#xff0c;从而能够解密拦截的密文。为了解决这个问题&#…
阅读更多...
编程八股文——C/C++中静态static关键字的意义和用法

编程八股文——C/C++中静态static关键字的意义和用法

static 修饰变量&#xff1a; 使变量存储在静态区&#xff0c;变量只初始化一次&#xff0c;生命周期是整个程序 静态全局变量&#xff1a;作用域只在该文件&#xff0c;普通全局变量整个程序有效静态局部变量&#xff1a;作用域只在函数中&#xff0c;存储静态区&#xff0c;函…
阅读更多...
程序人生15年人生感悟

程序人生15年人生感悟

计算机程序员并不是一件什么高大上的职业。而仅仅是一份普通的工作。就像医生能治病救人&#xff0c;我们能治蓝屏救程序&#xff0c;我们都在为这个世界默默的做出自己的贡献。刻意或无意宣扬某个职业高大上&#xff0c;其实质是对其它行业从业者的不公平。但是有些人却常常这…
阅读更多...
Node.js安装教程

Node.js安装教程

虽然网上Node.js的安装教程有很多&#xff0c;但是基本上都是千篇一律。虽然跟着网上内容安装&#xff0c;却总会遇到乱七八糟的问题。为此&#xff0c;我写下这篇文章&#xff0c;除了描述node的安装教程&#xff0c;还会解释这样安装的过程起到一个什么作用。 文章大致上分为…
阅读更多...
Flink系列之：Joins

Flink系列之：Joins

Flink系列之&#xff1a;Joins 一、Joins二、Regular Joins三、INNER Equi-JOIN四、OUTER Equi-JOIN五、Interval Joins六、Temporal Joins七、事件时间 Temporal Join八、处理时间 Temporal Join九、时态表函数连接十、Lookup Join十一、数组展开十二、表功能 一、Joins 适用…
阅读更多...
【PHP入门】1.2-常量与变量

【PHP入门】1.2-常量与变量

-常量与变量- PHP是一种动态网站开发的脚本语言&#xff0c;动态语言特点是交互性&#xff0c;会有数据的传递&#xff0c;而PHP作为“中间人”&#xff0c;需要进行数据的传递&#xff0c;传递的前提就是PHP能自己存储数据&#xff08;临时存储&#xff09; 1.2.1变量基本概…
阅读更多...
微服务实战系列之ZooKeeper（下）

微服务实战系列之ZooKeeper（下）

前言 通过前序两篇关于ZooKeeper的介绍和总结&#xff0c;我们可以大致理解了它是什么&#xff0c;它有哪些重要组成部分。 今天&#xff0c;博主特别介绍一下ZooKeeper的一个核心应用场景&#xff1a;分布式锁。 应用ZooKeeper Q&#xff1a;什么是分布式锁 首先了解一下&…
阅读更多...
04 python函数

04 python函数

4.1 函数的快速开发体验 """ 演示&#xff0c;快速体验函数的开发和使用 """#需求&#xff0c;统计字符串的长度&#xff0c;不使用内置函数len()str1 itheima str2 itcast str3 python#定义一个计数的变量 count 0 for i in str1:count 1…
阅读更多...
FPGA使用乘法的方式

FPGA使用乘法的方式

FPGA使用乘法的方式 方法一：直接使用乘法符“＊” 源代码 module multiply(input [7:0] a,input [7:0] b,output wire [15:0] result);(*use_dsp48 = "yes"*) wire [15:0] result;assign result = a*b; endmodule仿真代码 module multiply_tb();reg [7:0] a; re…
阅读更多...
Python实验 —— 图形化编程入门案例

Python实验 —— 图形化编程入门案例

Python实验 —— 图形化编程 实验目的实验内容实验结果蟒蛇绘制程序计算Pi值树的绘制词频统计绘制艺术图 实验目的 &#xff08;1&#xff09;熟悉 PYTHON 的语法格式 &#xff08;2&#xff09;熟练使用集成开发环境 SPYDER 或者 PyCharm &#xff08;3&#xff09;熟练 PYTH…
阅读更多...
最新文章

Copyright @ 2022~2023