/*你好喵，这里有234行💩⛰️ 代码*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
user-select: none;
}
.body {
width: 100%;
background-image: linear-gradient(135deg, #fae3d9 0%, #ffb6b9 100%);
flex-direction: column;
border-radius: 40px;
clip-path: content-box;
}
.main {
width: 100%;
padding: 5px 5px;
flex-direction: column;
background: linear-gradient(
to right bottom,
rgba(255,255,255,.6),
rgba(255,255,255,.3),
rgba(255,255,255,.2)
);
background-color: rgba(255, 255, 255, 0.266);
border-radius: 40px;
box-shadow: 0 10px 50px #ffceee;
}
.hander {
z-index: 1;
border-radius: 40px 40px 20px 20px;
width: 100%;
height: 50vh;
background-image: linear-gradient(135deg, #fae3d9 0%, #ffb6b9 100%);
display: flex;
clip-path: content-box;
position: relative;
justify-content: center;
align-items: center;
}
.footer {
border-radius: 20px 20px 40px 40px;
width: 100%;
height: 200px;
background-image: linear-gradient(135deg, #fdfdfd 0%, #ffcef3 100%);
}
.hd{
z-index: 3;
display: flex;
flex-direction: column;
}
.feiq {
z-index: 2;
position: absolute;
top:60%;
width:100%;
height:100%;
opacity: .4;
}
.title {
font: normal bold 5vh "";
padding: 5px;
opacity: .7;
text-shadow: 1px 1px 2px pink;
}
.h-p1, .title {text-align: center;}
/*容器1样式*/
.table {
position: relative;
width: 100%;
display: grid;
border-radius: 10px;
transition: 0.5s ease-in-out;
grid-template-columns: 24% 38% 38%;
grid-template-rows: repeat(3, 15vh);
grid-template-areas:
"fis mingpian mingpian"
"fis bf1 bf1"
"fis bf2 bf2";
}
/*容器1内部卡片*/
.carda {
background-color: white;
padding: 5px;
color: #8785a2;
border-radius: 20px;
margin: 1vh;
}
/*容器2样式*/
.cont {
position: relative;
width: 100%;
display: grid;
border-radius: 10px;
grid-template-columns: repeat(3, 33%);
grid-template-rows: repeat(3, 15vh);
grid-template-areas:
"shijie shijie caibao"
"baoku taffy caibao"
"baoku tga tga";
}
/*容器2的盖子*/
.cover {
position: absolute;
width: 100%;
height: 100%;
background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
border-radius: 15px;
box-shadow: inset 0 0 150px #fff,
inset 0 0 30px #fff,
inset 0 0 200px #fff;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
font-weight: bold;
line-height: 1.7rem;
letter-spacing: 0.3rem;
transition: 0.5s ease-in-out;
opacity: 1;
}
.cont:hover .cover {
opacity: 0;
z-index: -1;
}
/*容器2内部卡片*/
.card {
display: flex;
flex-direction: column;
position: relative;
justify-content: center;
align-items: center;
/*box-shadow: 0 4px 30px #fcbad3;*/
border-radius: 10px;
transition:
opacity .5s ease-in-out,
background .8s ease-in-out;
opacity: 0;
clip-path: content-box;
}
/*动效及分区*/
.cont:hover .card {opacity: 1;}
.cont.card:hover {transition: background 0.5s ease-in-out;}
.card> a {
z-index: 3;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
height: 100%;
width: 100%;
opacity: 0;
font-size: 20px;
font-weight: bold;
transition: all .5s ease-in-out;
}
.card> a:hover {
color: white;
text-decoration: none;
transition: opacity .5s ease-in-out;
opacity: 1;
}
.card> a:visited{
color: white;
text-decoration: none;
}
.card img {
z-index: 2;
display: inline-block;
vertical-align: middle;
position: absolute;
opacity: .6;
transition: opacity .5s ease-in-out;
}
.tga-p, .shijie-p {
top: -10px;
width: 100%;
}
.caibao-p, .baoku-p, .taffy-p {
top: 0px;
height: 100%;
display: table
}
.mw-references-wrap, .reference> a{
display: none;
}
.tga .tga-p,
.shijie .shijie-p,
.caibao .caibao-p,
.baoku .baoku-p {
transition: all .5s ease-in-out;
}
.tga:hover .tga-p,
.shijie:hover .shijie-p,
.caibao:hover .caibao-p,
.baoku:hover .baoku-p {
transition:
z-index .5s ease-in-out,
opacity .5s ease-in-out,
filter .5s ease-in-out,
transform .5s ease-in-out;
z-index: -1;
opacity: .4;
filter: blur(1px) grayscale(30%);
transform: scale(1.05);
}
.taffy .taffy-p{transition: all .5s ease-in-out;}
.taffy:hover .taffy-p{
transition: transform .5s ease-in-out;
transform: scale(1.05);
}
.carda.fis {grid-area: fis;}
.carda.mingpian {grid-area: mingpian;}
.carda.bf1 {grid-area: bf1;}
.carda.bf2 {grid-area: bf2;}
.card.shijie {grid-area: shijie;}
.card.caibao {grid-area: caibao;}
.card.baoku {grid-area: baoku;}
.card.tga {grid-area: tga;}
.card.taffy {grid-area: taffy;}
.card.shijie:hover {background: #ffde7d;}
.card.caibao:hover {background: #95e1d3;}
.card.baoku:hover {background: #a8d8ea;}
.card.tga:hover {background: #8785a2;}
.card.taffy:hover {background: #fcbad3;}