开关灯的html代码模板,CSS3控制灯泡开关的动画特效源码，超级简单

最新推荐文章于 2024-04-16 02:52:27 发布
最新推荐文章于 2024-04-16 02:52:27 发布
阅读量1.1k 收藏
点赞数
文章标签： 开关灯的html代码模板

a4c26d1e5885305701be709a3d33442f.png

效果图

大家好，今天给大家带来的源码是

CSS3控制灯泡开关的动画特效源码。

是不是很炫酷，但是代码实现很简单！

html, body {

font-family: Georgia, serif;

font-style: italic;

font-size: 4.2vmin;

line-height: 4.7vmin;

color: rgba(255,255,255,0.6);

margin: 0;

padding: 0;

height: 100%;

background: rgba(66,39,71,1);

background: -moz-linear-gradient(top, rgba(66,39,71,1) 0%,

rgba(43,25,46,1) 73%, rgba(19,11,20,1) 100%);

background: -webkit-gradient(left top, left bottom, color-stop(0%,

rgba(66,39,71,1)), color-stop(73%, rgba(43,25,46,1)),

color-stop(100%, rgba(19,11,20,1)));

background: -webkit-linear-gradient(top, rgba(66,39,71,1) 0%,

rgba(43,25,46,1) 73%, rgba(19,11,20,1) 100%);

background: -o-linear-gradient(top, rgba(66,39,71,1) 0%,

rgba(43,25,46,1) 73%, rgba(19,11,20,1) 100%);

background: -ms-linear-gradient(top, rgba(66,39,71,1) 0%,

rgba(43,25,46,1) 73%, rgba(19,11,20,1) 100%);

background: linear-gradient(to bottom, rgba(66,39,71,1) 0%,

rgba(43,25,46,1) 73%, rgba(19,11,20,1) 100%);

}

a {

color: rgba(255,255,255,0.6);

}

#lampadario {

position: fixed;

left: 50%;

top: 0;

}

#filo {

position: relative;

background-color: #000000;

width: 2px;

height: 150px;

left: 50%;

margin-left: -1px;

z-index: 1;

-webkit-transform-origin: 0% 0%;

-moz-transform-origin: 0% 0%;

-ms-transform-origin: 0% 0%;

-o-transform-origin: 0% 0%;

transform-origin: 0% 0%;

-webkit-animation: oscillaFilo .9s ease-in-out 0s infinite

alternate;

-moz-animation: oscillaFilo .9s ease-in-out 0s infinite

alternate;

-ms-animation: oscillaFilo .9s ease-in-out 0s infinite

alternate;

-o-animation: oscillaFilo .9s ease-in-out 0s infinite

alternate;

animation: oscillaFilo .9s ease-in-out 0s infinite alternate;

}

#filo:after {

content: " ";

left: -5px;

top: 100%;

position: absolute;

border-bottom: 15px solid #000000;

border-left: 4px solid transparent;

border-right: 4px solid transparent;

height: 0;

width: 4px;

}

#lampadina {

position:relative;

}

input[value="off"]:checked ~

#filo {

-webkit-box-shadow: -80px -10px 7px 0 rgba(0,0,0,0.1);

-moz-box-shadow: -80px -10px 7px 0 rgba(0,0,0,0.1);

-ms-box-shadow: -80px -10px 7px 0 rgba(0,0,0,0.1);

-o-box-shadow: -80px -10px 7px 0 rgba(0,0,0,0.1);

box-shadow: -80px -10px 7px 0 rgba(0,0,0,0.1);

}

input[value="off"]:checked ~

#filo:after {

-webkit-box-shadow: -80px -10px 10px -2px rgba(0,0,0,0.1);

-moz-box-shadow: -80px -10px 10px -2px rgba(0,0,0,0.1);

-ms-box-shadow: -80px -10px 10px -2px rgba(0,0,0,0.1);

-o-box-shadow: -80px -10px 10px -2px rgba(0,0,0,0.1);

box-shadow: -80px -10px 10px -2px rgba(0,0,0,0.1);

}

input {

position: absolute;

width: 90px;

height: 70px;

top: 150px;

margin-left:-45px;

opacity: 0;

z-index: 1;

cursor: pointer;

}

input[value="on"] {

top: 150px;

}

input[value="off"] {

top: -100px;

}

input[value="on"]:checked {

top: -100px;

}

input[value="on"]:checked + input[value="off"] {

top: 150px;

}

label {

width: 51px;

height: 51px;

top: 164px;

position: absolute;

left: 0;

margin-left: -24px;

-webkit-border-radius: 100%;

-moz-border-radius: 100%;

-ms-border-radius: 100%;

-o-border-radius: 100%;

border-radius: 100%;

-webkit-animation: oscillaLampadina .9s ease-in-out 0s infinite

alternate;

-moz-animation: oscillaLampadina .9s ease-in-out 0s infinite

alternate;

-ms-animation: oscillaLampadina .9s ease-in-out 0s infinite

alternate;

-o-animation: oscillaLampadina .9s ease-in-out 0s infinite

alternate;

animation: oscillaLampadina .9s ease-in-out 0s infinite

alternate;

}

input[value="off"]:checked ~

label {

background: rgba(255,255,255,0.03);

-webkit-box-shadow: inset 0px 1px 5px rgba(255,255,255,0.1), inset

0px 2px 20px rgba(255,255,255,0.07), -80px -15px 15px -5px

rgba(0,0,0,0.1);

-moz-box-shadow: inset 0px 1px 5px rgba(255,255,255,0.1), inset 0px

2px 20px rgba(255,255,255,0.07), -80px -15px 15px -5px

rgba(0,0,0,0.1);

-ms-box-shadow: inset 0px 1px 5px rgba(255,255,255,0.1), inset 0px

2px 20px rgba(255,255,255,0.07), -80px -15px 15px -5px

rgba(0,0,0,0.1);

-o-box-shadow: inset 0px 1px 5px rgba(255,255,255,0.1), inset 0px

2px 20px rgba(255,255,255,0.07), -80px -15px 15px -5px

rgba(0,0,0,0.1);

box-shadow: inset 0px 1px 5px rgba(255,255,255,0.1), inset 0px 2px

20px rgba(255,255,255,0.07), -80px -15px 15px -5px

rgba(0,0,0,0.1);

}

input[value="on"]:checked ~

label {

background: rgba(255,255,255,1);

-webkit-box-shadow: 0px 0px 10px rgba(255,255,255,0.8), 0px 0px

30px rgba(255,255,255,0.8), 0px 0px 50px rgba(255,255,255,0.6), 0px

0px 70px rgba(255,255,255,0.6), -80px -15px 120px 0px

rgba(255,255,255,0.4);

-moz-box-shadow: 0px 0px 10px rgba(255,255,255,0.8), 0px 0px 30px

rgba(255,255,255,0.8), 0px 0px 50px rgba(255,255,255,0.6), 0px 0px

70px rgba(255,255,255,0.6), -80px -15px 120px 0px

rgba(255,255,255,0.4);

-ms-box-shadow: 0px 0px 10px rgba(255,255,255,0.8), 0px 0px 30px

rgba(255,255,255,0.8), 0px 0px 50px rgba(255,255,255,0.6), 0px 0px

70px rgba(255,255,255,0.6), -80px -15px 120px 0px

rgba(255,255,255,0.4);

-o-box-shadow: 0px 0px 10px rgba(255,255,255,0.8), 0px 0px 30px

rgba(255,255,255,0.8), 0px 0px 50px rgba(255,255,255,0.6), 0px 0px

70px rgba(255,255,255,0.6), -80px -15px 120px 0px

rgba(255,255,255,0.4);

box-shadow: 0px 0px 10px rgba(255,255,255,0.8), 0px 0px 30px

rgba(255,255,255,0.8), 0px 0px 50px rgba(255,255,255,0.6), 0px 0px

70px rgba(255,255,255,0.6), -80px -15px 120px 0px

rgba(255,255,255,0.4);

}

input[value="off"]:checked ~

label:after {

content: " ";

width: 15px;

height: 15px;

top: 0;

position: absolute;

left: 0;

margin-left: 15px;

-webkit-border-radius: 100%;

-moz-border-radius: 100%;

-ms-border-radius: 100%;

-o-border-radius: 100%;

border-radius: 100%;

border: 2px solid rgba(255,255,255,0.03);

}

#sorpresa {

position: fixed;

top: 0;

left: 0;

width: 100%;

}

input[value="off"]:checked ~

#lampadina #sorpresa {

opacity: 0;

}

input[value="on"]:checked ~

#lampadina #sorpresa {

opacity: 1;

}

#footer {

position: fixed;

width: 94%;

text-align: center;

bottom: 30%;

padding: 0 3%;

z-index:1;

}

#shadow {

position: fixed;

width: 94%;

text-align: center;

bottom: 29%;

padding: 0 3%;

color:rgba(0,0,0,0);

-webkit-text-shadow: 0px 0px 4px rgba(0,0,0,0.3);

-moz-text-shadow: 0px 0px 4px rgba(0,0,0,0.3);

-ms-text-shadow: 0px 0px 4px rgba(0,0,0,0.3);

-o-text-shadow: 0px 0px 4px rgba(0,0,0,0.3);

text-shadow: 0px 0px 4px rgba(0,0,0,0.3);

-webkit-transform-origin: 50% 0px;

-moz-transform-origin: 50% 0px;

-ms-transform-origin: 50% 0px;

-o-transform-origin: 50% 0px;

transform-origin: 50% 0px;

-webkit-animation: ombraTesto .9s ease-in-out 0s infinite

alternate;

-moz-animation: ombraTesto .9s ease-in-out 0s infinite

alternate;

-ms-animation: ombraTesto .9s ease-in-out 0s infinite

alternate;

-o-animation: ombraTesto .9s ease-in-out 0s infinite alternate;

animation: ombraTesto .9s ease-in-out 0s infinite alternate;

}

@-webkit-keyframes oscillaFilo {

from {

-webkit-transform:rotate(5deg);

} to {

-webkit-transform:rotate(-5deg);

}

}

@-moz-keyframes oscillaFilo {

from {

-moz-transform:rotate(5deg);

} to {

-moz-transform:rotate(-5deg);

}

}

@-ms-keyframes oscillaFilo {

from {

-ms-transform:rotate(5deg);

} to {

-ms-transform:rotate(-5deg);

}

}

@-o-keyframes oscillaFilo {

from {

-o-transform:rotate(5deg);

} to {

-o-transform:rotate(-5deg);

}

}

@keyframes oscillaFilo {

from {

transform:rotate(5deg);

} to {

transform:rotate(-5deg);

}

}

@-webkit-keyframes oscillaLampadina {

from {

-webkit-transform: rotate(3deg) translate(-16.4px,-1px);

} to {

-webkit-transform: rotate(-3deg) translate(16.4px,-1px);

}

}

@-moz-keyframes oscillaLampadina {

from {

-moz-transform: rotate(3deg) translate(-16.4px,-1px);

} to {

-moz-transform: rotate(-3deg) translate(16.4px,-1px);

}

}

@-ms-keyframes oscillaLampadina {

from {

-ms-transform: rotate(3deg) translate(-16.4px,-1px);

} to {

-ms-transform: rotate(-3deg) translate(16.4px,-1px);

}

}

@-o-keyframes oscillaLampadina {

from {

-o-transform: rotate(3deg) translate(-16.4px,-1px);

} to {

-o-transform: rotate(-3deg) translate(16.4px,-1px);

}

}

@keyframes oscillaLampadina {

from {

transform: rotate(3deg) translate(-16.4px,-1px);

} to {

transform: rotate(-3deg) translate(16.4px,-1px);

}

}

@-webkit-keyframes ombraTesto {

from {

-webkit-transform: translate(1px,0px) scale(1.01,1.06) skew(0.9deg,

0deg);

} to {

-webkit-transform: translate(-1px,0px) scale(1.01,1.06)

skew(-0.9deg, 0deg);

}

}

@-moz-keyframes ombraTesto {

from {

-moz-transform: translate(1px,0px) scale(1.01,1.06) skew(0.9deg,

0deg);

} to {

-moz-transform: translate(-1px,0px) scale(1.01,1.06) skew(-0.9deg,

0deg);

}

}

@-ms-keyframes ombraTesto {

from {

-ms-transform: translate(1px,0px) scale(1.01,1.06) skew(0.9deg,

0deg);

} to {

-ms-transform: translate(-1px,0px) scale(1.01,1.06) skew(-0.9deg,

0deg);

}

}

@-o-keyframes ombraTesto {

from {

-o-transform: translate(1px,0px) scale(1.01,1.06) skew(0.9deg,

0deg);

} to {

-o-transform: translate(-1px,0px) scale(1.01,1.06) skew(-0.9deg,

0deg);

}

}

@keyframes ombraTesto {

from {

transform: translate(1px,0px) scale(1.01,1.06) skew(0.9deg,

0deg);

} to {

transform: translate(-1px,0px) scale(1.01,1.06) skew(-0.9deg,

0deg);

}

}

Hello there!

Hello there!

美食作家王刚
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML网站源码-创意灯饰家居响应式网页模板-响应式源码.zip
03-26
这套HTML源代码文件是一个完整的网页模板，适用于各种类型的网站。它采用了最新的HTML5和CSS3技术，具有响应式设计，能够适应不同设备的屏幕尺寸。此外，它还包含了丰富的JavaScript插件，可以实现各种复杂的交互效果。这套源代码文件还具有高度的可定制性。您可以根据自己的需求对页面进行布局调整、颜色更改以及内容替换，轻松打造出符合您项目风格的网站。同时，我们的代码结构清晰、注释详细，方便您学习和理解HTML、CSS和JavaScript等前端技术。您可能面临着课程设计、毕业设计等挑战。这套源代码文件将成为您的得力助手，帮助您展示自己的才华和技能。通过使用这套源代码文件，您可以轻松地完成网站搭建任务，为您的课程设计或毕业设计增添亮点。总的来说，这套HTML源代码文件是一个高效、实用、易用的工具，无论你是专业的网页设计师，还是业余的编程爱好者，都值得拥有。
javascript+html灯泡开关 2种方式
amz_java的博客
03-21 1493
灯泡开关
网页开关灯
chenqiuqian的博客
07-19 1498
在给style标签里面写一个.bg类，这个类我给的是一个背景颜色为黑色的效果，如果body标签没有这个类，就是初始状态白色背景，这是就是开灯的效果，如果有这个类body标签背景颜色就为黑色，那么这就是关灯效果。如果返回的是一个ture，用.removeClass（）方法移出body里面的.bg类，如果是false就用.addClass（）方法添加这个.bg类。这个就跟判断差不多，就是判断body标签点击的时候是否用这个类，有这个类就移出类，没有就添加类。写完按钮的点击事件之后可以不用做判断，用....
js鼠标单击点亮灯泡切换特效代码
03-20
js鼠标单击点亮灯泡切换代码是一款灯泡默认是熄灭状态，当鼠标点击后，灯泡点亮，并提示让关灯。
JQuery实现灯泡开关【文末附源码】
程序员小王的博客
10-21 912
JQuery实现灯泡开关【文末附源码】 ???? Java学习路线：搬砖工的Java学习路线 ???? 作者：程序员小王 ???? 程序员小王的博客：https://www.wolai.com/wnaghengjie/ahNwvAUPG2Hb1Sy7Z8waaF ???? 扫描主页左侧二维码，加我微信 一、实现灯泡开关操作对象的知识点： 1、jquery修改class属性值的方法 1. 添加class属性值 addClass("class属性值") 2. 删除class属性值 removeClas
CSS3卡通灯泡点击发光动画特效
07-24
当然，实际的灯泡动画可能需要更复杂的细节处理，例如添加更丰富的渐变效果、控制灯泡内部的光线扩散，或者通过JavaScript来增强交互性。但以上示例足以展示CSS3实现点击发光动画的基本思路。 总结起来，CSS3卡通...
css3灯泡发光动画特效
06-11
【CSS3灯泡发光动画特效】是一种利用现代CSS3技术实现的视觉效果，它通过精细的样式控制和动画属性设置，模拟出一个老式螺丝灯泡发光闪烁的过程。这种特效通常用于网页设计，以增强用户体验，吸引用户注意力，或者...
纯CSS3点亮关闭摇晃的灯泡特效
06-24
【纯CSS3点亮关闭摇晃的灯泡特效】是一种利用CSS3的强大功能来实现的交互式网页元素。在这个特效中，用户可以通过点击开关按钮来控制灯泡的亮起和熄灭，同时伴随着灯泡的轻微摇晃效果，使得用户体验更加生动有趣。这...
纯CSS3实现的开关按钮动画特效源码.zip
11-20
【标题】"纯CSS3实现的开关按钮动画特效源码.zip"揭示了这个压缩包包含的是一个使用纯CSS3技术创建的开关按钮动画效果的源代码。CSS3是层叠样式表（Cascading Style Sheets）的第三版，是Web开发中用于描述网页及...
纯css3灯泡悬停发光特效特效代码
03-20
通过简单的HTML结构和精心编写的CSS3代码，我们可以实现一个逼真的灯泡，当鼠标悬停时，灯泡会发光，就像真实的灯泡被点亮一样。 首先，我们需要创建HTML的基本结构，它通常包括一个灯泡元素，可能是一个`<div>`，...
JS实现灯泡开关特效
12-13
JS实现灯泡开关特效的具体代码，供大家参考，具体内容如下 并且显示时间，文字 首先准备两张图片：开灯ON.jpg：关灯OFF.jpg 效果图： 下面是具体实现代码： HTML： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>开关灯特效</title> <link href="css/bulb.css" rel="stylesheet" type="text/css" /> [removed][removed] </head> <body> <div ali
JQuery实现灯泡开关【文末附源码】(1)
最新发布
2401_84046876的博客
04-16 799
🍅 作者：程序员小王🍅 扫描主页左侧二维码，加我微信。
js灯泡开关的特效
Demo_csdn
10-13 316
运用js代码显示灯泡的开关， 以下是代码的具体实现效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="...
JavaScript实现网页关灯效果
希望我的博客，能帮上你解决学习中工作中所遇到的问题
11-01 88
JavaScript实现网页关灯效果
前端简单的红绿灯实现 JS
weixin_52901482的博客
12-06 306
【代码】前端简单的红绿灯实现 JS。
css3电源开关样式控制网页开关灯
ICode联盟
08-31 192
css3电源开关样式控制网页开关灯特效代码。
代码实现开关灯效果
duanworld的博客
03-23 5189
//第一种方法 public  int  aa; void Update() {     if(Input.GetKeyDown(KeyCode.S))//按下s键     {         aa++;     }     if(aa % 2 != 0)     {         GetComponent().enable = false;//关灯     }  
点击开关按钮，js实现电灯开关效果
qq_53983648的博客
11-22 6002
js实现开关灯效果
开关灯案例
fdsal的博客
10-04 1151
开关灯案例 开始背景颜色为白色，当单机按钮的时候，背景变成黑色，再单击的时候背景又变成白色。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title&g
HTML5与CSS3动画秘籍：转型、变换与实战教程
本指南《HTML5与CSS3场景过渡、变形与动画：实用代码示例》旨在为开发者和设计师提供一个深入理解这些新特性的实用教程。 首先，HTML5的进化不仅限于新的元素（如`<form>`, `<input>`等），还包括元数据处理和...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值