js做一个简单的开关灯效果

其他 2020-04-07 22:53:18 阅读次数: 0

利用js做一个类似开关灯的效果！

效果图在这里插入图片描述
这是主页代码

<html>
	<head>
		<meta charset="UTF-8">
		<title>鼠标移入文本高亮显示</title>
		<link rel="stylesheet" href="css/index.css" />
	</head>
	<body>
		<div>
			<label class="button">
				<input type="checkbox" onclick="on()">
				<span></span>
				<span></span>
			</label>
			<img src="img/1.jpg" id="i" />
		</div>

		<div>
			<ul id="u"></ul>
		</div>
	</body>
	<script>
		var i = 2;
		var b = document.getElementsByTagName("body")[0];
		var img = document.getElementById("i");
		var ull = document.getElementById("u");

		function on() {
			if (i % 2 == 0) {
				b.style.backgroundColor = " #000000";
				img.src = "img/2.png";
				ull.style.color = "aliceblue";
				addNode(i);
				i++;
			} else {
				b.style.backgroundColor = " #ffffff";
				img.src = "img/1.jpg";
				ull.style.color = "black";
				addNode(i);
				i = 2;
			}
		}

		function addNode(a) {
			var date = new Date().toLocaleTimeString();
			var lii = document.createElement("li");
			var text;
			if (a % 2 == 0) {
				text = document.createTextNode(date + "：灯亮了");
			} else {
				text = document.createTextNode(date + "：灯灭了");
			}
			lii.appendChild(text);
			ull.appendChild(lii);
		}
	</script>
</html>

这是css样式

			* {
				transition: background-color 1s linear;
			}

			li {
				list-style: none;
				font-size: 20px;
			}

			div {
				float: left;
			}
*,
*:before,
*:after {
  -moz-box-sizing: border-box;
       box-sizing: border-box;
}
.button {
  display: block;
  width: 400px;
  height: 120px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  background-color: #000000;
  box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.2) inset;
  border-radius: 20px;
  overflow: hidden;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.button span {
  display: block;
  position: absolute;
  top: 6px;
  width: 194px;
  height: 108px;
  background-color: #1c1d1f;
  -webkit-transition: -webkit-transform 300ms ease, box-shadow 300ms ease;
          transition: transform 300ms ease, box-shadow 300ms ease;
}
.button span:before {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  font-family: "Open Sans";
  font-weight: 800;
  font-size: 48px;
  -webkit-transition: text-shadow 800ms ease 100ms, color 800ms ease 100ms;
          transition: text-shadow 800ms ease 100ms, color 800ms ease 100ms;
}
.button span:after {
  content: "";
  width: 4px;
  height: 108px;
  position: absolute;
  top: 0;
  background: -webkit-radial-gradient(center, ellipse, rgba(255, 255, 255, 0.5) 0%, transparent 50%);
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.5) 0%, transparent 50%);
  -webkit-transition: opacity 300ms ease;
          transition: opacity 300ms ease;
}
.button span:first-of-type {
  left: 6px;
  border-top-left-radius: 18px;
  border-bottom-left-radius: 18px;
  -webkit-transform-style: preserve3d;
          transform-style: preserve3d;
  -webkit-transform-origin: right center;
      -ms-transform-origin: right center;
          transform-origin: right center;
  -webkit-transform: perspective(2000px) rotateY(40deg);
          transform: perspective(2000px) rotateY(40deg);
  box-shadow: -1px 0 1px rgba(255, 255, 255, 0.1) inset, 4px 0 8px rgba(255, 255, 255, 0.1) inset, 1px 0 0 rgba(255, 255, 255, 0.1) inset, -10px 0 8px rgba(40, 42, 44, 0.9), -20px 0 8px rgba(28, 29, 31, 0.7), -30px 0 8px rgba(28, 29, 31, 0.4);
}
.button span:first-of-type:before {
  content: "ON";
  color: rgba(0, 0, 0, 0.5);
  text-shadow: 1px 4px 6px #1c1d1f, 0 0 0 #000000, 1px 4px 6px #1c1d1f;
}
.button span:first-of-type:after {
  left: -1px;
}
.button span:last-of-type {
  right: 6px;
  border-top-right-radius: 18px;
  border-bottom-right-radius: 18px;
  -webkit-transform-origin: left center;
      -ms-transform-origin: left center;
          transform-origin: left center;
  box-shadow: -1px 1px 1px rgba(255, 255, 255, 0.1) inset, 2px 0 2px rgba(255, 255, 255, 0.05) inset;
}
.button span:last-of-type:before {
  content: "OFF";
  color: #ff4847;
  text-shadow: 0 0 24px rgba(255, 72, 71, 0.6);
}
.button span:last-of-type:after {
  right: -1px;
  opacity: 0;
}
.button input[type="checkbox"] {
  display: none;
}
.button input[type="checkbox"]:checked ~ span:first-of-type {
  -webkit-transform: none;
      -ms-transform: none;
          transform: none;
  box-shadow: 1px 1px 1px rgba(255, 255, 255, 0.1) inset, -2px 0 2px rgba(255, 255, 255, 0.05) inset;
}
.button input[type="checkbox"]:checked ~ span:first-of-type:before {
  color: #93c913;
  text-shadow: 0 0 24px rgba(147, 201, 19, 0.6);
}
.button input[type="checkbox"]:checked ~ span:first-of-type:after {
  opacity: 0;
}
.button input[type="checkbox"]:checked ~ span:last-of-type {
  -webkit-transform: perspective(2000px) rotateY(-40deg);
          transform: perspective(2000px) rotateY(-40deg);
  box-shadow: 1px 0 1px rgba(255, 255, 255, 0.1) inset, -4px 0 8px rgba(255, 255, 255, 0.1) inset, -1px 0 0 rgba(255, 255, 255, 0.1) inset, 10px 0 8px rgba(40, 42, 44, 0.9), 20px 0 8px rgba(28, 29, 31, 0.7), 30px 0 8px rgba(28, 29, 31, 0.4);
}
.button input[type="checkbox"]:checked ~ span:last-of-type:before {
  color: rgba(0, 0, 0, 0.5);
  text-shadow: 1px 4px 6px #1c1d1f, 0 0 0 #000000, 1px 4px 6px #1c1d1f;
}
.button input[type="checkbox"]:checked ~ span:last-of-type:after {
  opacity: 1;
			.button {
  display: block;
  width: 400px;
  height: 120px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  background-color: #000000;
  box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.2) inset;
  border-radius: 20px;
  overflow: hidden;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.button span {
  display: block;
  position: absolute;
  top: 6px;
  width: 194px;
  height: 108px;
  background-color: #1c1d1f;
  -webkit-transition: -webkit-transform 300ms ease, box-shadow 300ms ease;
          transition: transform 300ms ease, box-shadow 300ms ease;
}
.button span:before {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  font-family: "Open Sans";
  font-weight: 800;
  font-size: 48px;
  -webkit-transition: text-shadow 800ms ease 100ms, color 800ms ease 100ms;
          transition: text-shadow 800ms ease 100ms, color 800ms ease 100ms;
}
.button span:after {
  content: "";
  width: 4px;
  height: 108px;
  position: absolute;
  top: 0;
  background: -webkit-radial-gradient(center, ellipse, rgba(255, 255, 255, 0.5) 0%, transparent 50%);
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.5) 0%, transparent 50%);
  -webkit-transition: opacity 300ms ease;
          transition: opacity 300ms ease;
}

需要的两张图片
在这里插入图片描述在这里插入图片描述
因为那个开关按钮比较花，所以css样式就多了一点…

次奥QNMLGB
发布了30 篇原创文章 · 获赞 39 · 访问量 2075
私信 关注

猜你喜欢

转载自blog.csdn.net/weixin_44564242/article/details/102575923
今日推荐
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
开源日报 | 中学生开源前端动画引擎；全球首个Llama3 8B中文版开源模型；联想电脑恐出局；Linus讽刺AI炒作
“百模大战”必有一战 | 2024中国“百模大战”竞争格局分析
最强开源大模型 Llama 3 上架 Gitee AI
周排行
自媒体文章如何提高原创度以及如何检测原创度
开启qq邮箱的smtp服务
Qt程序单次启动（QSingleApplication类）
国外的外包网站
更新IDEA主题——放飞代码风格
cocos2dx 实现搓牌效果（翻牌效果），包括铺平动画
dict和json之间的互相转换
angular的一些思考
. Fibonacci数列是这样定义的： F[0] = 0 F[1] = 1 for each i ≥ 2: F[i] = F[i-1] + F[i-2] 因此，Fibonacci数列就形如：0, 1
洛谷P1064 金明的预算方案
每日归档
更多
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)
2024-04-17(5)
2024-04-16(70)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022