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,一经查实,立即删除!

相关文章

Linux之进程(四)(进程地址空间)

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

圣诞树绘制合集-python绘制

使用Python绘制迷人的圣诞树 引言 随着圣诞节的临近&#xff0c;我们都希望以各种方式庆祝这个欢乐的节日。作为一名编程爱好者&#xff0c;你有没有想过用Python来创造节日的气氛呢&#xff1f;在这篇文章中&#xff0c;我将向你展示如何用Python绘制几种不同风格的圣诞树&a…

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

索尼的ILCE-7M3是一款经典设备&#xff0c;其HEVC编码效果是比较不错的&#xff0c;因此受到很多专业人士的青睐。之前我们说过很多索尼摄像机断电生成RSV文件修复的案例&#xff0c;今天来讲一个特殊的&#xff0c;文件已经正常封装但仅能播放前两分钟多一点的画面。 故障文件…

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

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

C++入门篇

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

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-数据分析可视化实例图 一&#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源码总有一个是你想要的 学习知识费力气&#xff0c;收集整理更不易。 知识付费甚欢喜&#xff0c;为咱码农谋福利。 链接&#xff1a;https://pan.baidu.com/s/1hKlZJB3KrHcOuKWyV1xjKw?pwd6666 提取码&#xff1a;6666 项目名称 ava web个人网站项目 ea…

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

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

程序人生15年人生感悟

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

Node.js安装教程

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

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

-常量与变量- PHP是一种动态网站开发的脚本语言&#xff0c;动态语言特点是交互性&#xff0c;会有数据的传递&#xff0c;而PHP作为“中间人”&#xff0c;需要进行数据的传递&#xff0c;传递的前提就是PHP能自己存储数据&#xff08;临时存储&#xff09; 1.2.1变量基本概…

微服务实战系列之ZooKeeper(下)

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

04 python函数

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

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…

java minio通过getPresignedObjectUrl设置(自定义)预签名URL下载文件的响应文件名之minio源码改造方案

Minio预签名URL自定义响应文件名之Minio源码改造 需求说明Minio源码改造一、环境准备二、下载Minio源代码三、修改源代码1.修改cmd目录下的api-router.go这个代码文件2.将filename参数值设置到响应头4.修改验证签名时是否需要带入filename参数验证 四、大功告成&#xff0c;编译…

残差网络中的BN (Batch Normalization 批标准化层)的作用是什么?

文章目录 什么是BN &#xff08;Batch Normalization 批标准化层&#xff09;一、BN层对输入信号进行以下操作:二、BN 层有什么作用&#xff1f; 什么是BN &#xff08;Batch Normalization 批标准化层&#xff09; BN层的全称是Batch Normalization层,中文可以翻译为批标准化…

如何让.NET应用使用更大的内存

我一直在思考为何Redis这种应用就能独占那么大的内存空间而我开发的应用为何只有4GB大小左右&#xff0c;在此基础上也问了一些大佬&#xff0c;最终还是验证下自己的猜测。 操作系统限制 主要为32位操作系统和64位操作系统。 每个进程自身还分为了用户进程空间和内核进程空…

Mybatis-Spring整合原理:MapperFactoryBean和MapperScannerConfigurer的区别及源码剖析

文章目录 引言MapperFactoryBean的用法和优缺点MapperScannerConfigurer的用法和优缺点MapperFactoryBean源码分析MapperScannerConfigurer源码分析Spring容器初始化流程回顾核心方法&#xff1a;postProcessBeanDefinitionRegistryBeanDefinitionRegistryPostProcessor和BeanF…

Java 并发编程(六)-Fork/Join异步回调

一、并发编程 1、Fork/Join分支合并框架 Fork/Join它可以将一个大的任务拆分成多个子任务进行并行处理&#xff0c;最后将子任务结果合并成最后的计算结果&#xff0c;并进行输出。Fork/Join框架要完成两件事情&#xff1a; Fork&#xff1a;把一个复杂任务进行分拆&#xff0…