fixed css bugs

This commit is contained in:
2024-09-21 01:07:15 +02:00
parent a7ec470da1
commit 6ca2e79e61
2 changed files with 59 additions and 5 deletions

View File

@@ -61,4 +61,11 @@ if (screen.width >= 768) {
}
});
}
</script>
</script>
####################################################################all in one####################################################################
<!--宠物播放器-->
<meting-js server="netease" type="playlist" id="2142063878" theme="#339981" fixed="true" preload="none" autoplay="false" loop="all" volume="0.3" order="random" mutex="true"></meting-js>;
<script src="/wp-content/uploads/live2d_test43/live2d/dist/auto.js"></script>

View File

@@ -35,7 +35,7 @@
margin-left: -30px;
}
#waifu {
/* #waifu {
bottom: -1000px;
left: 0;
line-height: 0;
@@ -44,6 +44,19 @@
transition: transform .3s ease-in-out, bottom 3s ease-in-out;
width: 25%;
height: 25%;
} */
/* waifu */
#waifu {
bottom: 10px; /* 设置一个固定的 bottom */
left: 0;
line-height: 0;
position: fixed;
transform: translateY(0); /* 保证其保持在原来的位置 */
transition: transform .3s ease-in-out, bottom 3s ease-in-out;
width: 25%;
height: 25%;
z-index: 50; /* 保持在对话框之下 */
}
#waifu:hover {
@@ -65,14 +78,14 @@
}
/*对话框*/
#waifu-tips {
/* #waifu-tips {
animation: shake 50s ease-in-out 5s infinite;
background-color: rgb(255, 255, 255, .62);
border-radius: 12px;
box-shadow: 0 0px 15px 0px #ffffff;
font-size: 15px;
font-size: 15px; */
/* font-weight: bold; */
line-height: 24px;
/* line-height: 24px;
color: #4a174d;
margin: auto;
width: max-content;
@@ -85,8 +98,42 @@
text-overflow: ellipsis;
transition: opacity 1s;
word-break: break-all;
z-index: -1;
} */
/* 对话框 */
#waifu-tips {
position: absolute; /* 相对waifu进行定位 */
bottom: 100%; /* 对话框出现在waifu上方 */
left: 0;
animation: shake 50s ease-in-out 5s infinite;
background-color: rgba(255, 255, 255, .62);
border-radius: 12px;
box-shadow: 0 0px 15px 0px #ffffff;
font-size: 15px;
line-height: 24px;
color: #4a174d;
margin: auto;
width: max-content;
min-height: max-content;
max-width: 250px;
opacity: 0;
overflow: hidden;
padding: 5px 10px;
text-overflow: ellipsis;
transition: opacity 1s;
word-break: break-all;
z-index: 100; /* 保持在waifu上方 */
}
@media screen and (max-width: 768px) {
#waifu-tips {
max-width: 180px; /* 在小屏幕上适当缩小 */
font-size: 13px;
}
}
#waifu-tips.waifu-tips-active {
opacity: 1;
transition: opacity .2s;