Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
草原上有什么
极简开关灯画风
提交
c7c407d6
极
极简开关灯画风
项目概览
草原上有什么
/
极简开关灯画风
与 Fork 源项目一致
Fork自
inscode / HTML-CSS-JS
通知
1
Star
1
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
极
极简开关灯画风
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
c7c407d6
编写于
11月 03, 2023
作者:
W
weixin_40885370
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
Auto Commit
上级
ef53fd87
变更
4
显示空白变更内容
内联
并排
Showing
4 changed file
with
317 addition
and
2 deletion
+317
-2
.inscode
.inscode
+5
-1
index.html
index.html
+39
-1
script.js
script.js
+30
-0
style.css
style.css
+243
-0
未找到文件。
.inscode
浏览文件 @
c7c407d6
run = "index.html"
run = "index.html"
language = "node"
[env]
[env]
PATH = "/root/${PROJECT_DIR}/.config/npm/node_global/bin:/root/${PROJECT_DIR}/node_modules/.bin:${PATH}"
PATH = "/root/${PROJECT_DIR}/.config/npm/node_global/bin:/root/${PROJECT_DIR}/node_modules/.bin:${PATH}"
XDG_CONFIG_HOME = "/root/.config"
XDG_CONFIG_HOME = "/root/.config"
npm_config_prefix = "/root/${PROJECT_DIR}/.config/npm/node_global"
npm_config_prefix = "/root/${PROJECT_DIR}/.config/npm/node_global"
[debugger]
program = "main.js"
index.html
浏览文件 @
c7c407d6
...
@@ -8,10 +8,48 @@
...
@@ -8,10 +8,48 @@
<title>
InsCode
</title>
<title>
InsCode
</title>
</head>
</head>
<body>
<body>
<div
class=
"container"
>
<
!-- <
div class="container">
<img src="src/assets/logo.svg" alt="InsCode">
<img src="src/assets/logo.svg" alt="InsCode">
<div>欢迎来到 InsCode</div>
<div>欢迎来到 InsCode</div>
</div> -->
<!-- BUTTON -->
<button>
<div
class=
"light-bulb"
>
<div
class=
"upper"
>
<div
class=
"circle"
>
<div
class=
"line-1"
>
<div
class=
"line-c"
></div>
</div>
</div>
<div
class=
"line-2"
>
<div
class=
"line-c"
></div>
</div>
<div
class=
"circle-bottom"
></div>
</div>
</div>
<div
class=
"lower"
>
<div
class=
"lower-1"
>
<div
class=
"lower-line"
></div>
<div
class=
"lower-line"
style=
"width: 30%"
></div>
<div
class=
"lower-line"
></div>
</div>
<div
class=
"lower-2"
>
<div
class=
"lower-2-inner"
>
<div
class=
"lower-2-lines"
></div>
<div
class=
"lower-2-circle"
></div>
</div>
</div>
</div>
</div>
</button>
<script
src=
"script.js"
></script>
<script
src=
"script.js"
></script>
</body>
</body>
</html>
</html>
\ No newline at end of file
script.js
浏览文件 @
c7c407d6
// MAIN
/* ======================================================= */
let
body
=
document
.
querySelector
(
"
body
"
);
let
stateToggle
=
document
.
querySelector
(
"
button
"
);
stateToggle
.
addEventListener
(
"
click
"
,
()
=>
{
body
.
classList
.
toggle
(
"
on
"
);
});
let
l2
=
document
.
querySelector
(
"
.lower-2
"
);
stateToggle
.
addEventListener
(
"
mousedown
"
,
()
=>
{
l2
.
style
.
transform
=
"
translateX(13px) translateY(0)
"
;
});
stateToggle
.
addEventListener
(
"
mouseup
"
,
()
=>
{
l2
.
style
.
transform
=
"
translateX(13px) translateY(-4px)
"
;
});
stateToggle
.
addEventListener
(
"
mouseleave
"
,
()
=>
{
l2
.
style
.
transform
=
"
translateX(13px) translateY(-4px)
"
;
});
stateToggle
.
addEventListener
(
"
touchstart
"
,
()
=>
{
l2
.
style
.
transform
=
"
translateX(13px) translateY(0)
"
;
});
stateToggle
.
addEventListener
(
"
touchend
"
,
()
=>
{
l2
.
style
.
transform
=
"
translateX(13px) translateY(-4px)
"
;
});
\ No newline at end of file
style.css
浏览文件 @
c7c407d6
...
@@ -7,3 +7,246 @@ html{
...
@@ -7,3 +7,246 @@ html{
text-align
:
center
;
text-align
:
center
;
padding
:
64px
;
padding
:
64px
;
}
}
/* Press the light bulb button using either a mouse or a keyboard, touch works too! to change the theme :) */
/* DEFAULTS */
/* ======================================================= */
body
{
--global-bg
:
hsl
(
222
4%
96%
);
--global-s
:
hsl
(
222
99%
46%
);
--global-l
:
hsl
(
222
22%
92%
);
--global-bs
:
transparent
;
}
body
.on
{
--global-bg
:
hsl
(
228
100%
4%
);
--global-s
:
hsl
(
254
100%
83%
);
--global-l
:
hsl
(
254
2%
18%
);
--global-bs
:
hsl
(
146
100%
84%
/
.06
);
}
body
{
display
:
grid
;
place-content
:
center
;
min-height
:
100vh
;
padding
:
20px
;
box-sizing
:
border-box
;
margin
:
0
;
background
:
var
(
--global-bg
);
transition
:
.3s
linear
;
}
/* BUTTON */
/* ======================================================= */
button
{
width
:
200px
;
height
:
200px
;
border-radius
:
1000px
;
padding
:
2rem
;
box-sizing
:
content-box
;
display
:
flex
;
justify-content
:
center
;
align-items
:
center
;
border
:
2px
solid
var
(
--global-l
);
background
:
transparent
;
cursor
:
pointer
;
transition
:
.3s
;
margin
:
0
auto
;
}
button
:focus
{
outline
:
0
;
border-color
:
var
(
--global-s
);
}
button
:active
{
transform
:
scale
(
.92
);
}
/* LIGHT BULB */
/* ======================================================= */
.light-bulb
{
--t-duration
:
.3s
;
--t-type
:
linear
;
pointer-events
:
none
;
transform
:
translateY
(
9px
);
}
.upper
{
transform
:
translateY
(
-11px
);
}
.circle
{
width
:
56px
;
height
:
54px
;
background
:
inherit
;
border
:
2px
solid
var
(
--global-s
);
border-radius
:
100px
;
position
:
relative
;
transition
:
var
(
--t-duration
)
var
(
--t-type
);
box-shadow
:
inset
0
8px
12px
2px
var
(
--global-bs
),
2px
-4px
12px
var
(
--global-bs
);
}
.line-1
{
width
:
10px
;
height
:
30px
;
border-bottom
:
0
;
position
:
absolute
;
bottom
:
0
;
left
:
0
;
z-index
:
2
;
background
:
var
(
--global-bg
);
transform
:
rotate
(
-30deg
)
translateX
(
-3px
)
translateY
(
50%
);
display
:
flex
;
justify-content
:
center
;
transition
:
var
(
--t-duration
)
var
(
--t-type
);
}
.line-2
{
width
:
10px
;
height
:
30px
;
border-bottom
:
0
;
position
:
absolute
;
bottom
:
0
;
right
:
0
;
z-index
:
2
;
background
:
var
(
--global-bg
);
transform
:
rotate
(
30deg
)
translateX
(
3px
)
translateY
(
50%
);
display
:
flex
;
justify-content
:
center
;
transition
:
var
(
--t-duration
)
var
(
--t-type
);
}
.line-c
{
width
:
0
;
height
:
inherit
;
border
:
1px
solid
var
(
--global-s
);
transition
:
var
(
--t-duration
)
var
(
--t-type
);
}
.circle-bottom
{
width
:
40px
;
height
:
40px
;
background
:
var
(
--global-l
);
border-radius
:
100%
;
position
:
absolute
;
bottom
:
-8px
;
left
:
50%
;
transform
:
translateX
(
-50%
);
transition
:
var
(
--t-duration
)
var
(
--t-type
);
}
.lower
{
display
:
flex
;
justify-content
:
center
;
flex-direction
:
column
;
position
:
relative
;
}
.lower-1
{
align-self
:
center
;
width
:
20px
;
height
:
24px
;
border
:
2px
solid
var
(
--global-s
);
border-radius
:
0
0
0
4px
;
position
:
relative
;
display
:
flex
;
justify-content
:
space-evenly
;
flex-direction
:
column
;
transition
:
var
(
--t-duration
)
var
(
--t-type
);
box-shadow
:
2px
0
4px
var
(
--global-bs
);
}
.lower-1
::before
{
content
:
''
;
position
:
absolute
;
left
:
2px
;
top
:
-2px
;
z-index
:
2
;
width
:
8px
;
height
:
8px
;
border-radius
:
50px
50px
0
0
;
background
:
var
(
--global-bg
);
transform
:
translate
(
-100%
,
-100%
);
transition
:
var
(
--t-duration
)
var
(
--t-type
);
}
.lower-1
::after
{
content
:
''
;
position
:
absolute
;
left
:
calc
(
100%
-
6px
);
top
:
-4px
;
z-index
:
2
;
width
:
6px
;
height
:
8px
;
background
:
var
(
--global-bg
);
transition
:
var
(
--t-duration
)
var
(
--t-type
);
}
.lower-line
{
width
:
50%
;
height
:
2px
;
background
:
var
(
--global-s
);
transition
:
var
(
--t-duration
)
var
(
--t-type
)
}
.lower-2
{
align-self
:
center
;
transform
:
translateX
(
13px
)
translateY
(
-4px
);
transition
:
.3s
linear
;
}
.lower-2-lines
{
width
:
2px
;
height
:
40px
;
background
:
linear-gradient
(
to
bottom
,
transparent
,
transparent
20%
,
var
(
--global-s
)
20%
,
var
(
--global-s
)
80%
,
transparent
80%
);
background-repeat
:
repeat-y
;
background-size
:
2px
10px
;
transition
:
var
(
--t-duration
)
var
(
--t-type
);
}
.lower-2-circle
{
width
:
3px
;
height
:
3px
;
border
:
2px
solid
var
(
--global-s
);
border-radius
:
10px
;
transform
:
translateX
(
-2px
)
translateY
(
2px
);
transition
:
var
(
--t-duration
)
var
(
--t-type
)
}
.lower-2-inner
{
transform-origin
:
center
top
;
animation
:
swing
4s
infinite
alternate
linear
;
}
@keyframes
swing
{
50
%
{
transform
:
rotate
(
-20deg
)
}
100
%
{
transform
:
rotate
(
20deg
)
}
}
/* ABS-PROFILES */
/* ======================================================= */
.abs-profiles
{
position
:
fixed
;
right
:
calc
(
20px
+
.6vw
);
bottom
:
calc
(
23px
+
.6vw
);
filter
:
saturate
(
0
)
brightness
(
1
);
opacity
:
.7
;
}
.abs-profiles
a
{
display
:
inline-block
;
margin-left
:
10px
;
}
\ No newline at end of file
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录