Skip to content

Commit 190bf7c

Browse files
author
linyisonger
committed
增加图片八分屏
1 parent 7308e1f commit 190bf7c

File tree

8 files changed

+143
-0
lines changed

8 files changed

+143
-0
lines changed

‎100.曲面八分屏.html‎

Lines changed: 142 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<link rel="stylesheet" href="./assets/global.css">
9+
10+
<style>
11+
.eighth-box {
12+
display: flex;
13+
width: 100%;
14+
height: 100vh;
15+
position: absolute;
16+
overflow: hidden;
17+
background-color: #000;
18+
}
19+
20+
.eighth-box .eb-segment {
21+
position: absolute;
22+
display: flex;
23+
justify-content: center;
24+
overflow: hidden;
25+
flex-direction: row-reverse;
26+
box-shadow: 2px 0 30px #333;
27+
transform: translateX(-100%);
28+
transition: transform 2s ease-out;
29+
filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.6));
30+
}
31+
32+
.eighth-box img {
33+
height: 100%;
34+
}
35+
36+
.upper-mask,
37+
.bottom-mask {
38+
position: absolute;
39+
width: 100%;
40+
height: 500px;
41+
background-color: #000;
42+
z-index: 100;
43+
clip-path: ellipse(62% 30%);
44+
transform: translateY(-52%);
45+
display: flex;
46+
justify-content: center;
47+
align-items: center;
48+
}
49+
50+
.bottom-mask {
51+
bottom: 0;
52+
transform: translateY(52%)
53+
}
54+
55+
.header {
56+
position: absolute;
57+
color: #fff;
58+
font-weight: bold;
59+
font-size: 20px;
60+
text-align: center;
61+
top: 30px;
62+
z-index: 200;
63+
text-align: center;
64+
left: 50%;
65+
transform: translateX(-50%);
66+
}
67+
68+
.header .subtitle {
69+
margin-top: 8px;
70+
font-size: 16px;
71+
font-weight: normal;
72+
opacity: .6;
73+
}
74+
75+
.header::before {
76+
position: absolute;
77+
height: 100%;
78+
background-color: #000;
79+
content: '';
80+
left: 0;
81+
width: 100%;
82+
transition: left 2s ease-out;
83+
z-index: 10;
84+
}
85+
86+
.header.show::before {
87+
left: 100%;
88+
}
89+
</style>
90+
</head>
91+
92+
<body>
93+
<div class="eighth-box">
94+
<div class="eb-segment">
95+
<img src="./assets/paper-man/1.jpeg">
96+
</div>
97+
<div class="eb-segment">
98+
<img src="./assets/paper-man/2.jpeg">
99+
</div>
100+
<div class="eb-segment">
101+
<img src="./assets/paper-man/3.jpeg">
102+
</div>
103+
<div class="eb-segment">
104+
<img src="./assets/paper-man/4.jpeg">
105+
</div>
106+
<div class="eb-segment">
107+
<img src="./assets/paper-man/5.jpeg">
108+
</div>
109+
<div class="eb-segment">
110+
<img src="./assets/paper-man/6.jpeg">
111+
</div>
112+
113+
<div class="upper-mask"></div>
114+
<div class="bottom-mask"></div>
115+
<div class="header">
116+
<div class="title">奥さんを選んでください</div>
117+
<div class="subtitle">
118+
Please choose your wife
119+
</div>
120+
</div>
121+
</div>
122+
123+
<script type="module">
124+
let ebSegmentDoms = document.querySelectorAll('.eb-segment')
125+
let headerDom = document.querySelector('.header')
126+
127+
let width = document.body.clientWidth;
128+
129+
ebSegmentDoms.forEach((item, index) => {
130+
item.style.width = `${width / ebSegmentDoms.length}px`;
131+
item.style.zIndex = ebSegmentDoms.length - index + 1
132+
item.style.transform = `translateX(${~~(index * item.clientWidth)}px)`
133+
})
134+
135+
headerDom.classList.add('show')
136+
137+
138+
139+
</script>
140+
</body>
141+
142+
</html>

‎assets/paper-man/1.jpeg‎

101 KB
Loading

‎assets/paper-man/2.jpeg‎

117 KB
Loading

‎assets/paper-man/3.jpeg‎

99.2 KB
Loading

‎assets/paper-man/4.jpeg‎

134 KB
Loading

‎assets/paper-man/5.jpeg‎

105 KB
Loading

‎assets/paper-man/6.jpeg‎

109 KB
Loading

‎examples.txt‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -97,5 +97,6 @@
9797
097.听写词语.html
9898
098.全屏滚动.html
9999
099.数据对比.html
100+
100.曲面八分屏.html
100101
blog.html
101102
index.html

0 commit comments

Comments
 (0)