div+css实现响应式漫画网格布局效果代码-html代码-BFW代码库

div+css实现响应式漫画网格布局效果代码

代码语言：html

所属分类：响应式

代码描述：div+css实现响应式漫画网格布局效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">

  
  
  
<style>
body {
	margin: 0;
	padding: 0;
	width: 100vw;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: #222;
}

body * {
	box-sizing: border-box;
}

*:before,
*:after {
	content: "";
	position: absolute;
	box-sizing: border-box;
}

.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;
}

/*** items ***/
.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;
}

/*** drawings ***/
.item:before {
	width: 100%;
	height: 100%;
	transition: all 0.5s ease 0s;
}

.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, #f.........完整代码请登录后点击上方下载按钮下载查看