updated 添加一次修饰性样式

This commit is contained in:
路人甲 2024-08-01 23:56:55 +08:00
parent 14eec3a7b2
commit f358b1e4cd
3 changed files with 150 additions and 5 deletions

View File

@ -280,6 +280,50 @@
</div>
</div>
</div>
<div class="mod-banner">
<div class="inner">
<div class="bd">
<span>外甥</span>
<span>姑姑</span>
<span>岳父</span>
<span>女儿</span>
<span>舅舅</span>
<span>姨妈</span>
<span>媳妇儿</span>
<span>爸爸</span>
<span>表姐</span>
<span>曾祖母</span>
<span>哥哥</span>
<span>妯娌</span>
<span>姑奶奶</span>
<span>老公</span>
<span>弟妹</span>
<span>堂姐</span>
<span>婶婶</span>
<span>女婿</span>
<span>叔叔</span>
<span>婆婆</span>
<span>小舅子</span>
<span>伯父</span>
<span>姻兄弟</span>
<span>丈母娘</span>
<span>外公</span>
<span>侄子</span>
<span>舅爷</span>
<span>表妹</span>
<span>嫂子</span>
<span>姥爷</span>
<span>连襟</span>
<span>爷爷</span>
<span>姐夫</span>
<span>姑子</span>
<span>弟弟</span>
<span>亲家</span>
<span>孙子</span>
<span>姑丈公</span>
</div>
</div>
</div>
<div class="mod-intro">
<div class="inner">
<div class="hd"><span>功能支持</span></div>

View File

@ -446,8 +446,58 @@ a:hover{
margin-right: 4px;
}
.mod-banner .bd{
height: 120px;
padding: 20px 20px 20px 38%;
background: linear-gradient(to right,rgba(0,0,0,0) 0%, rgba(246,248,250,0.5) 100%);
border-radius: 12px;
line-height: 27px;
vertical-align: middle;
text-align: right;
font-size: 30px;
font-weight: bold;
color: #8b949e;
}
.mod-banner .bd span{
display: inline-block;
white-space: nowrap;
transform: scale(1);
}
.mod-banner .bd span:hover{
transform: scale(1.2);
transition: all 0.25s ease-in;
}
.mod-banner .bd span:nth-child(7n){
opacity: 0.15;
zoom: 0.6;
}
.mod-banner .bd span:nth-child(7n+1){
opacity: 0.35;
zoom: 0.7;
}
.mod-banner .bd span:nth-child(7n+2){
opacity: 0.25;
zoom: 0.6;
}
.mod-banner .bd span:nth-child(7n+3){
opacity: 0.30;
zoom: 0.9;
}
.mod-banner .bd span:nth-child(7n+4){
opacity: 0.45;
zoom: 0.8;
}
.mod-banner .bd span:nth-child(7n+5){
opacity: 0.40;
zoom: 0.7;
}
.mod-banner .bd span:nth-child(7n+6){
opacity: 0.65;
zoom: 1;
}
.mod-intro{
margin-bottom: 75px;
margin-bottom: 80px;
}
.mod-intro .hd{
margin: 0 5px 5px;
@ -495,7 +545,7 @@ a:hover{
}
.mod-article{
margin-bottom: 75px;
margin-bottom: 80px;
}
.mod-article .bd{
position: relative;
@ -525,7 +575,7 @@ a:hover{
}
.mod-app{
margin-bottom: 75px;
margin-bottom: 80px;
}
.mod-app .hd{
margin-bottom: 5px;
@ -576,13 +626,13 @@ a:hover{
.mod-copy::after {
position: absolute;
right: 0;
bottom: -75px;
bottom: -80px;
display: block;
content: '';
width: 0px;
border-color: #fff;
border-style: solid;
border-width: 75px 22vw 0 61.8vw;
border-width: 80px 22vw 0 61.8vw;
border-top-color: rgb(233 236 240);
}
.mod-copy .hd{
@ -858,6 +908,13 @@ a:hover{
padding: 15px 10px;
}
.mod-banner .bd{
height: auto;
padding: 15px;
line-height: 20px;
font-size: 20px;
}
.mod-intro .hd{
margin: 0 0 5px;
}

View File

@ -280,6 +280,50 @@
</div>
</div>
</div>
<div class="mod-banner">
<div class="inner">
<div class="bd">
<span>外甥</span>
<span>姑姑</span>
<span>嶽父</span>
<span>女兒</span>
<span>舅舅</span>
<span>姨媽</span>
<span>媳婦兒</span>
<span>爸爸</span>
<span>錶姐</span>
<span>曾祖母</span>
<span>哥哥</span>
<span>妯娌</span>
<span>姑奶奶</span>
<span>老公</span>
<span>弟妹</span>
<span>堂姐</span>
<span>嬸嬸</span>
<span>女婿</span>
<span>叔叔</span>
<span>婆婆</span>
<span>小舅子</span>
<span>伯父</span>
<span>姻兄弟</span>
<span>丈母娘</span>
<span>外公</span>
<span>侄子</span>
<span>舅爺</span>
<span>錶妹</span>
<span>嫂子</span>
<span>姥爺</span>
<span>連襟</span>
<span>爺爺</span>
<span>姐夫</span>
<span>姑子</span>
<span>弟弟</span>
<span>親家</span>
<span>孫子</span>
<span>姑丈公</span>
</div>
</div>
</div>
<div class="mod-intro">
<div class="inner">
<div class="hd"><span>功能支持</span></div>