直播记录/styles.css

/* 父容器样式 */
.base_block {
	display: grid; /* 使用 CSS Grid 布局 */
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* 根据子元素宽度动态排列 */
	gap: 10px; /* 子元素之间的间距 */
	border: 2px outset #9147ff;
	background-color: rgba(255, 255, 255, 0.1);
	box-shadow: 0 2px 5px #aaa;
	padding: 15px;
}
@media screen and (max-width: 982px) {
	.base_block {
		padding-left:15px;
		padding-right:15px;
	}
}
@media screen and (min-width: 982px) {
	.base_block {
		padding-left:300px;
		padding-right:300px;
	}
}
/* 子元素样式 */
.item {
	max-width: 360px; /* 限制子元素最大宽度 */
	min-width: 200px; /* 限制子元素最小宽度 */
	height: 124px; /* 固定高度 */
	background-color: #0078d7;
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 5px #aaa;
	transition: all 0.3s ease-in-out;
	text-align: center;
	margin: 0; /* Grid 的间距通过 gap 设置，不需要 margin */
}
/* 父容器补充伪元素 */
.base_block::after {
	content: ''; /* 添加空白内容 */
	display: block;
	min-width: 200px; /* 与子元素宽度一致 */
	max-width: 360px;
	height: 124px; /* 高度与子元素一致 */
	background: rgba(0, 0, 0, 0.1); /* 占位符背景颜色 */
	background-color: rgba(220, 220, 220, 0.8); /* 占位符背景透明 */
	mask-image: linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
}
.item1{
	background-color: rgba(145, 71, 255, 0.8);
}
.item2{
	background-color: rgba(255, 50, 80, 0.8);
}
.item3{
	background-color: rgba(50, 100, 255, 0.8);
}
.item4{
	background-color: rgba(255, 220, 50, 0.8);
}
.item5{
	background-color: rgba(50, 255, 150, 0.8);
}
.item6{
	background-color: rgba(50, 230, 255, 0.8);
}
.item7{
	background-color: rgba(120, 120, 120, 0.8);
}
.item > a{
	position: relative;
	display: flex;
	width: 100%;
	height: 100%;
	justify-content: right;
	align-items: flex-end;
	font-size: 42px;
	color: #ffffff;
	transition: all 0.3s ease-in-out;
	padding-right:0;
	text-decoration: none;
}
.item:hover > a{
	padding-right:26px;
	text-decoration: none;
}
a > .long{
	max-width:90%;
	font-size: 24px;
}
.item:hover{
	background-color: rgba(0, 0, 0, 0.6);
}
.item > .img{
	position: absolute;
	mask-image: linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
	transition: all 1.3s ease-in-out;
}
.item:hover > .img{
	mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}