新增第248个小实例：响应式漫画网格布局
This commit is contained in:
DESKTOP-BM6RJU5\wyanh
parent
c46f23053b
commit
4a5c863562
|
|
@ -255,6 +255,7 @@
|
|||
245. HTML5+CSS3小实例：简约灵动的深色登录界面
|
||||
246. HTML5+CSS3小实例：可爱的卷纸开关
|
||||
247. HTML5+CSS3+JS小实例：图片九宫格
|
||||
248. HTML5+CSS3小实例：响应式漫画网格布局
|
||||
|
||||
#### 赞赏作者
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,189 @@
|
|||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
*::before,
|
||||
*::after{
|
||||
content: "";
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
body{
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
background-color: #222;
|
||||
}
|
||||
.wrapper{
|
||||
display: grid;
|
||||
grid-gap: 1.1vmin;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-auto-rows: 1fr;
|
||||
width: calc(100% - 2vmin);
|
||||
height: calc(100% - 4vmin);
|
||||
margin: 2vmin;
|
||||
}
|
||||
/* 网格 */
|
||||
.item{
|
||||
width: auto;
|
||||
min-height: 0;
|
||||
position: relative;
|
||||
}
|
||||
.item:nth-child(1){
|
||||
grid-column: 1 / span 2;
|
||||
grid-row: 1 / 20;
|
||||
clip-path: polygon(0 0, 80% 0, 73% 82%, 0 95%);
|
||||
background: #ff4a4a;
|
||||
}
|
||||
.item:nth-child(2){
|
||||
grid-column: 2 / span 2;
|
||||
grid-row: 1 / 20;
|
||||
clip-path: polygon(32% 0, 100% 0, 100% 68%, 25% 81%);
|
||||
background: #f7941d;
|
||||
}
|
||||
.item:nth-child(3){
|
||||
grid-column: 1 / span 1;
|
||||
grid-row: 17 / 50;
|
||||
clip-path: polygon(0 8%, 0% 87%, 87% 88%, 98% 3%);
|
||||
background: #ffde14;
|
||||
}
|
||||
.item:nth-child(4){
|
||||
grid-column: 2 / span 1;
|
||||
grid-row: 15 / 47;
|
||||
clip-path: polygon(14% 9.5%, 4% 97.5%, 99% 99%, 99% 4.5%);
|
||||
margin-left: -15%;
|
||||
background: #8ec63f;
|
||||
}
|
||||
.item:nth-child(5){
|
||||
grid-column: 3 / span 1;
|
||||
grid-row: 13 / 48;
|
||||
clip-path: polygon(15% 9.5%, 15% 96.25%, 100% 97.5%, 100% 5%);
|
||||
margin-left: -15%;
|
||||
background: #27aae2;
|
||||
}
|
||||
.item:nth-child(6){
|
||||
grid-column: 1 / span 2;
|
||||
grid-row: 70 / 45;
|
||||
clip-path: polygon(0% 6%, 75% 8.5%, 80% 100%, 0 100%);
|
||||
background: #8047b2;
|
||||
}
|
||||
.item:nth-child(7){
|
||||
grid-column: 2 / span 2;
|
||||
grid-row: 70 / 45;
|
||||
clip-path: polygon(27% 9%, 100% 12%, 100% 100%, 32% 100%);
|
||||
background: #dd65d8;
|
||||
}
|
||||
/* 网格纹理 */
|
||||
.item::before{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
/* 悬停隐藏 */
|
||||
.item:hover::before{
|
||||
opacity: 0;
|
||||
}
|
||||
.item:nth-child(1)::before{
|
||||
background: radial-gradient(
|
||||
circle at 60% 50%,
|
||||
#ff4a4a 0 4vmin,
|
||||
#fff0 50vmin 100%
|
||||
),repeating-conic-gradient(
|
||||
from 0deg at 60% 50%,
|
||||
#ff4a4a 0 6deg,
|
||||
#e6282a 0 12deg
|
||||
);
|
||||
}
|
||||
.item:nth-child(2)::before{
|
||||
background: linear-gradient(
|
||||
180deg, #f7941d 0 10%, #fff0 90% 100%
|
||||
),repeating-linear-gradient(
|
||||
80deg,
|
||||
#f7941d 0 2px,
|
||||
#ffb862 3px 4px,
|
||||
#f7941d 5px
|
||||
);
|
||||
}
|
||||
.item:nth-child(3)::before{
|
||||
--c: #ff9800;
|
||||
background: repeating-linear-gradient(
|
||||
30deg, var(--c), #000, var(--c) 2%
|
||||
),
|
||||
repeating-linear-gradient(
|
||||
-60deg, var(--c), #000, var(--c) 2%
|
||||
),linear-gradient(
|
||||
30deg, #000, var(--c)
|
||||
);
|
||||
/* 设置背景图片与元素背景颜色的混合模式 */
|
||||
background-blend-mode: color-dodge;
|
||||
filter: contrast(5);
|
||||
/* 设置元素的混合模式 */
|
||||
mix-blend-mode: soft-light;
|
||||
}
|
||||
.item:nth-child(4)::before{
|
||||
background: linear-gradient(
|
||||
140deg, #000 0%, #777 75%
|
||||
), repeating-radial-gradient(
|
||||
circle at 100% 50%,
|
||||
#000, #999, #000 5%
|
||||
), radial-gradient(
|
||||
circle at 100% 50%,
|
||||
#777, #000
|
||||
);
|
||||
background-blend-mode: screen;
|
||||
filter: contrast(5) blur(6px);
|
||||
mix-blend-mode: soft-light;
|
||||
}
|
||||
.item:nth-child(5)::before{
|
||||
background: linear-gradient(
|
||||
15deg, #777 0%, #000
|
||||
), linear-gradient(
|
||||
15deg, #777 50%, #000
|
||||
), repeating-linear-gradient(
|
||||
-45deg, #000, #999, #000 2%
|
||||
), repeating-linear-gradient(
|
||||
45deg, #000, #999, #000 2%
|
||||
);
|
||||
background-blend-mode: exclusion;
|
||||
filter: contrast(1);
|
||||
mix-blend-mode: soft-light;
|
||||
}
|
||||
.item:nth-child(6)::before{
|
||||
--c: #8047b2;
|
||||
background: linear-gradient(
|
||||
180deg, #fff -50%, #fff0 100%
|
||||
), repeating-linear-gradient(
|
||||
30deg, var(--c), #ce7fdb, var(--c) 1%
|
||||
), repeating-linear-gradient(
|
||||
-60deg, var(--c), #69007b, var(--c) 1%
|
||||
), linear-gradient(
|
||||
30deg, #4b364f, var(--c)
|
||||
);
|
||||
background-blend-mode: overlay;
|
||||
filter: contrast(20) blur(1px);
|
||||
mix-blend-mode: luminosity;
|
||||
}
|
||||
.item:nth-child(7)::before{
|
||||
background: radial-gradient(
|
||||
circle at 0% 0%,
|
||||
#b150ac 0 20vmin,
|
||||
#fff0 90vmin 100%
|
||||
), radial-gradient(
|
||||
circle at 100% 100%,
|
||||
#dd65d8 0 10vmin,
|
||||
#fff0 50vmin 100%
|
||||
), repeating-conic-gradient(
|
||||
from 0deg at 100% 100%,
|
||||
#dd65d8 0 1deg,
|
||||
#b150ac80 1.1deg 1.9deg,
|
||||
#dd65d8 2deg
|
||||
), repeating-conic-gradient(
|
||||
from 0deg at 100% 100%,
|
||||
#dd65d8 0 6deg,
|
||||
#b150ac 0 12deg
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>响应式漫画网格布局</title>
|
||||
<link rel="stylesheet" href="248.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrapper">
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue