登录/ 注册
 找回密码
 立即注册
关闭

CSDN热搜

豆瓜网 精品问答 技术交流 资源下载
返回列表 发新帖
首页 › 业界区 › 安全 ›Element-Plus官网黑夜模式切换动画效果的实现 ...

Element-Plus官网黑夜模式切换动画效果的实现

屠焘 2025-6-25 18:13:11
前言

在使用Element-Plus时，发现有两个很有趣的效果，一个是header的背景模糊效果，另一个是黑夜模式切换动画，在此我们先来研究一下黑夜模式切换动画效果是如何实现的。
代码

html部分
  1.   <input type="checkbox" id="checkBox">
  2.   <label for="checkBox"></label>
  4. <iframe src="https://www.baidu.com"></iframe>
复制代码
css部分

[code]  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>html,  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>body {  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>background-color: #fff;  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>height: 100vh;  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>display: flex;  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>flex-direction: column;  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>}  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>* {  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>margin: 0;  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>padding: 0;  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>box-sizing: border-box;  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>}  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>iframe {  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>flex: 1;  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>}  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>html.dark {  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>filter: invert(1) hue-rotate(180deg);  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>img,  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>video,  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>.avatar,  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>.image,  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>.thumb,  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>#box {  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>filter: invert(1) hue-rotate(180deg);  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>}  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>}  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>::view-transition-old(root),  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>::view-transition-new(root) {  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>animation: none;  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>mix-blend-mode: normal;  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>}  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>::view-transition-old(root) {  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>z-index: 1;  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>}  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>::view-transition-new(root) {  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>z-index: 2147483646;  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>}  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>html.dark::view-transition-old(root) {  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>z-index: 2147483646;  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>}  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>html.dark::view-transition-new(root) {  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>z-index: 1;  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>}  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>#checkBox {  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>opacity: 0;  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>width: 0;  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>}  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>#box>label {  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>display: block;  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>width: 70px;  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>height: 30px;  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>border-radius: 30px;  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>border: 1px solid #dcdfe6;  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>background-color: #f2f2f2;  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>position: relative;  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>transition: all 0.3s;  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>display: flex;  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>align-items: center;  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>}  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>#checkBox:checked+label {  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>background-color: #2c2c2c;  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>border: 1px solid #4c4d4f;  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>}  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>#box>label::before {  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>  <input type="checkbox" id="checkBox">
  <label for="checkBox"></label>

<iframe src="https://www.baidu.com"></iframe>content: '
来源：豆瓜网用户自行投稿发布，如果侵权，请联系站长删除
ElementPlus官网黑夜模式

使用道具 举报

相关推荐
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册
发帖
屠焘
2025-6-25 18:13:11

0

粉丝关注

21

主题发布

板块介绍填写区域，请于后台编辑
微信扫一扫