Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit0f2f0a0

Browse files
committed
12-30 16
1 parenteb048a5 commit0f2f0a0

File tree

4 files changed

+282
-183
lines changed

4 files changed

+282
-183
lines changed

‎15.3D按钮/index.html‎

Lines changed: 105 additions & 104 deletions
Original file line numberDiff line numberDiff line change
@@ -1,106 +1,107 @@
11
<!DOCTYPE html>
22
<htmllang="en">
3-
<head>
4-
<metacharset="UTF-8"/>
5-
<metahttp-equiv="X-UA-Compatible"content="IE=edge"/>
6-
<metaname="viewport"content="width=device-width, initial-scale=1.0"/>
7-
<title>Document</title>
8-
</head>
9-
<style>
10-
:root {
11-
--spring-easing:linear(
12-
0,
13-
0.1783.4%,
14-
1.02512.7%,
15-
1.179,
16-
1.24918.6%,
17-
1.25420.5%,
18-
1.23322.6%,
19-
1.00132.9%,
20-
0.93839%,
21-
0.94143.2%,
22-
0.99953.2%,
23-
1.01559.1%,
24-
0.99679%,
25-
1.001
26-
);
27-
}
28-
body {
29-
height:100vh;
30-
margin:0;
31-
padding:0;
32-
display: flex;
33-
align-items: center;
34-
justify-content: center;
35-
}
36-
.container {
37-
width:500px;
38-
height:500px;
39-
display: flex;
40-
align-items: center;
41-
justify-content: center;
42-
}
43-
.outer {
44-
width:200px;
45-
height:200px;
46-
border-radius:50%;
47-
display: flex;
48-
align-items: center;
49-
justify-content: center;
50-
color: white;
51-
background:radial-gradient(
52-
111.94%111.94% at14.84%14.84%,
53-
rgba(246,240,255,0.6)0%,
54-
rgba(76,5,189,0.6)50%,
55-
rgba(246,240,255,0.6)100%
56-
),
57-
#6200ff;
58-
background-position:20%20%;
59-
background-size:200%200%;
60-
filter:drop-shadow(0px0px0pxrgba(0,0,0,0.26))drop-shadow(0px1px2pxrgba(0,0,0,0.26))
61-
drop-shadow(0px4px4pxrgba(0,0,0,0.22))drop-shadow(1px8px5pxrgba(0,0,0,0.13))
62-
drop-shadow(2px14px6pxrgba(0,0,0,0.04))drop-shadow(3px22px6pxrgba(0,0,0,0));
63-
transition: all0.4svar(--spring-easing);
64-
}
65-
.inner {
66-
width:160px;
67-
height:160px;
68-
border-radius:50%;
69-
font-size:2rem;
70-
display: flex;
71-
align-items: center;
72-
justify-content: center;
73-
background:radial-gradient(
74-
170.26%170.26% at111.61%118.75%,
75-
rgba(255,255,255,0.4)0%,
76-
rgba(98,0,255,0.4)50%,
77-
rgba(255,255,255,0.4)100%
78-
),
79-
#6200ff;
80-
background-size:200%200%;
81-
background-position:80%80%;
82-
transition: inherit;
83-
}
84-
.isOpen .inner {
85-
background-position:60%60%;
86-
transform:scale(1.1)translateY(-0.6rem);
87-
}
88-
.isOpen .outer {
89-
background-position:40%40%;
90-
}
91-
</style>
92-
<body>
93-
<divclass="container">
94-
<divclass="outer">
95-
<divclass="inner">Hello!</div>
96-
</div>
97-
</div>
98-
<script>
99-
constdom=document.querySelector('.outer')
100-
dom.addEventListener('click',()=>{
101-
dom.classList.toggle('isOpen')
102-
console.log('click')
103-
})
104-
</script>
105-
</body>
106-
</html>
3+
4+
<head>
5+
<metacharset="UTF-8"/>
6+
<metahttp-equiv="X-UA-Compatible"content="IE=edge"/>
7+
<metaname="viewport"content="width=device-width, initial-scale=1.0"/>
8+
<title>Document</title>
9+
</head>
10+
<style>
11+
:root {
12+
--spring-easing:linear(0,
13+
0.1783.4%,
14+
1.02512.7%,
15+
1.179,
16+
1.24918.6%,
17+
1.25420.5%,
18+
1.23322.6%,
19+
1.00132.9%,
20+
0.93839%,
21+
0.94143.2%,
22+
0.99953.2%,
23+
1.01559.1%,
24+
0.99679%,
25+
1.001);
26+
}
27+
28+
body {
29+
height:100vh;
30+
margin:0;
31+
padding:0;
32+
display: flex;
33+
align-items: center;
34+
justify-content: center;
35+
}
36+
37+
.container {
38+
width:500px;
39+
height:500px;
40+
display: flex;
41+
align-items: center;
42+
justify-content: center;
43+
}
44+
45+
.outer {
46+
width:200px;
47+
height:200px;
48+
border-radius:50%;
49+
display: flex;
50+
align-items: center;
51+
justify-content: center;
52+
color: white;
53+
background:radial-gradient(111.94%111.94% at14.84%14.84%,
54+
rgba(246,240,255,0.6)0%,
55+
rgba(76,5,189,0.6)50%,
56+
rgba(246,240,255,0.6)100%),
57+
#6200ff;
58+
background-position:20%20%;
59+
background-size:200%200%;
60+
filter:drop-shadow(0px0px0pxrgba(0,0,0,0.26))drop-shadow(0px1px2pxrgba(0,0,0,0.26))drop-shadow(0px4px4pxrgba(0,0,0,0.22))drop-shadow(1px8px5pxrgba(0,0,0,0.13))drop-shadow(2px14px6pxrgba(0,0,0,0.04))drop-shadow(3px22px6pxrgba(0,0,0,0));
61+
transition: all0.4svar(--spring-easing);
62+
}
63+
64+
.inner {
65+
width:160px;
66+
height:160px;
67+
border-radius:50%;
68+
font-size:2rem;
69+
display: flex;
70+
align-items: center;
71+
justify-content: center;
72+
background:radial-gradient(170.26%170.26% at111.61%118.75%,
73+
rgba(255,255,255,0.4)0%,
74+
rgba(98,0,255,0.4)50%,
75+
rgba(255,255,255,0.4)100%),
76+
#6200ff;
77+
background-size:200%200%;
78+
background-position:80%80%;
79+
transition: inherit;
80+
}
81+
82+
.isOpen .inner {
83+
background-position:60%60%;
84+
transform:scale(1.1)translateY(-0.6rem);
85+
}
86+
87+
.isOpen .outer {
88+
background-position:40%40%;
89+
}
90+
</style>
91+
92+
<body>
93+
<divclass="container">
94+
<divclass="outer">
95+
<divclass="inner">Hello!</div>
96+
</div>
97+
</div>
98+
<script>
99+
constdom=document.querySelector('.outer')
100+
dom.addEventListener('click',()=>{
101+
dom.classList.toggle('isOpen')
102+
console.log('click')
103+
})
104+
</script>
105+
</body>
106+
107+
</html>

‎16.loading滚动/index.html‎

Lines changed: 79 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -1,95 +1,95 @@
11
<!doctype html>
22
<htmllang='en'>
3+
34
<head>
4-
<metacharset='UTF-8'>
5-
<metacontent='width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0'
6-
name='viewport'>
7-
<metacontent='ie=edge'http-equiv='X-UA-Compatible'>
8-
<linkhref='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'rel='stylesheet'>
9-
<title>Document</title>
5+
<metacharset='UTF-8'>
6+
<metacontent='width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0'
7+
name='viewport'>
8+
<metacontent='ie=edge'http-equiv='X-UA-Compatible'>
9+
<linkhref='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'rel='stylesheet'>
10+
<title>Document</title>
1011
</head>
1112
<style>
12-
* {
13-
box-sizing: border-box;
14-
}
13+
* {
14+
box-sizing: border-box;
15+
}
1516

16-
:root {
17-
--hue:210;
18-
--size:100px;
19-
--border:10px;
20-
--speed:1s;
21-
--blur:var(--border);
22-
}
17+
:root {
18+
--hue:210;
19+
--size:100px;
20+
--border:10px;
21+
--speed:1s;
22+
--blur:var(--border);
23+
}
2324

24-
body {
25-
min-height:100vh;
26-
display: grid;
27-
place-items: center;
28-
/* 色调 饱和度 亮度 简称为 hsl*/
29-
background:hsl(var(--hue)50%8%);
30-
}
25+
body {
26+
min-height:100vh;
27+
display: grid;
28+
place-items: center;
29+
/* 色调 饱和度 亮度 简称为 hsl*/
30+
background:hsl(var(--hue)50%8%);
31+
}
3132

32-
.loader {
33-
width:var(--border);
34-
/* 用于设置元素的宽高比 */
35-
aspect-ratio:1;
36-
background: white;
37-
border-radius:50%;
38-
position: absolute;
39-
/*注意这个长度的计算*/
40-
--y:calc((var(--size)*-0.5)+ (var(--border)*0.5));
41-
transform:rotate(0deg)translateY(var(--y));
42-
/*逆时针旋转*/
43-
-webkit-animation: spinvar(--speed) infinite linear;
44-
animation: spinvar(--speed) infinite linear;
45-
}
33+
.loader {
34+
width:var(--border);
35+
/* 用于设置元素的宽高比 */
36+
aspect-ratio:1;
37+
background: white;
38+
border-radius:50%;
39+
position: absolute;
40+
/*注意这个长度的计算*/
41+
--y:calc((var(--size)*-0.5)+ (var(--border)*0.5));
42+
transform:rotate(0deg)translateY(var(--y));
43+
/*逆时针旋转*/
44+
-webkit-animation: spinvar(--speed) infinite linear;
45+
animation: spinvar(--speed) infinite linear;
46+
}
4647

47-
.loader::before {
48-
content:"";
49-
position: absolute;
50-
border-radius:50%;
51-
/*这里实际上是为了设置这个元素的大小，让他变大一点*/
52-
inset:calc(var(--border)*-0.5);
53-
background: white;
54-
filter:blur(var(--blur));
55-
z-index:-1;
56-
}
48+
.loader::before {
49+
content:"";
50+
position: absolute;
51+
border-radius:50%;
52+
/*这里实际上是为了设置这个元素的大小，让他变大一点*/
53+
inset:calc(var(--border)*-0.5);
54+
background: white;
55+
filter:blur(var(--blur));
56+
z-index:-1;
57+
}
5758

58-
.loader::after {
59-
content:"";
60-
position: absolute;
61-
width:var(--size);
62-
aspect-ratio:1;
63-
top:0%;
64-
left:50%;
65-
border-radius:50%;
66-
translate:-50%0;
67-
/*圆锥渐变*/
68-
background:conic-gradient(white,hsl(var(--hue),100%,70%),hsl(var(--hue),100%,10%), transparent65%);
69-
/*使用 css 函数创建一个图像作为遮罩层*/
70-
/*注意在 chrome 下只有 -webkit-mask 生效*/
71-
-webkit-mask:radial-gradient(
72-
transparentcalc(((var(--size)*0.5)-var(--border))-1px),
73-
whitecalc((var(--size)*0.5)-var(--border)));
74-
mask:radial-gradient(
75-
transparentcalc((var(--size)*0.5-var(--border))-1px),
76-
whitecalc(var(--size)*0.5-var(--border))
77-
);
78-
}
59+
.loader::after {
60+
content:"";
61+
position: absolute;
62+
width:var(--size);
63+
aspect-ratio:1;
64+
top:0%;
65+
left:50%;
66+
border-radius:50%;
67+
translate:-50%0;
68+
/*圆锥渐变*/
69+
background:conic-gradient(white,hsl(var(--hue),100%,70%),hsl(var(--hue),100%,10%), transparent65%);
70+
/*使用 css 函数创建一个图像作为遮罩层*/
71+
/*注意在 chrome 下只有 -webkit-mask 生效*/
72+
-webkit-mask:radial-gradient(transparentcalc(((var(--size)*0.5)-var(--border))-1px),
73+
whitecalc((var(--size)*0.5)-var(--border)));
74+
mask:radial-gradient(transparentcalc((var(--size)*0.5-var(--border))-1px),
75+
whitecalc(var(--size)*0.5-var(--border)));
76+
}
7977

80-
@keyframes spin {
81-
to {
82-
transform:rotate(-360deg)translateY(var(--y));
83-
}
84-
}
78+
@keyframes spin {
79+
to {
80+
transform:rotate(-360deg)translateY(var(--y));
81+
}
82+
}
8583

86-
@-webkit-keyframes spin {
87-
to {
88-
transform:rotate(-360deg)translateY(var(--y));
89-
}
90-
}
84+
@-webkit-keyframes spin {
85+
to {
86+
transform:rotate(-360deg)translateY(var(--y));
87+
}
88+
}
9189
</style>
90+
9291
<body>
93-
<divaria-live='assertive'class='loader'role='alert'></div>
92+
<divaria-live='assertive'class='loader'role='alert'></div>
9493
</body>
94+
9595
</html>

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp