halo-theme-hao 主题首页第一屏两个动态圆角白色条定位与删除
index-img.html文件定位
/themes/theme-hao/templates/modules/header/index-img.html在index-img.html，第一个动态圆角白条位置在38行到48行css代码中；第二个动态圆角白条位置在70行到80行css代码中。
<th:block th:if="${theme.config.top.above.enable_above}">
<div class="pl-container">
<th:block th:if="!${theme.config.top.above.enable_above_video}">
<div class="pl-img pl-blur pl-visible"></div>
<div class="pl-img pl-visible"></div>
<video class="video"></video>
</th:block>
<th:block th:if="${theme.config.top.above.enable_above_video}">
<video class="index-video" id="index-video" autoplay=""
th:src="${theme.config.top.above.index_video}" loop="" muted="" playsinline=""
webkit-playsinline=""
style="display:block;object-fit:cover;width:100%;height:100%;pointer-events:none;">
</video>
</th:block>
</div>
<div id="site-info">
<h1 id="site-title">[[${site.title}]]</h1>
<div id="site-subtitle">
<span id="subtitle"></span>
<span class="typed-cursor" aria-hidden="true"></span>
</div>
</div>
<div id="scroll-down"><i class="haofont hao-icon-angle-down scroll-down-effects"></i></div>
<link rel="stylesheet" th:href="${assets_link + '/css/fullPage.css' + theme_version}">
<style>
#site-title {
width: max-content;
max-width: 100%;
position: relative;
color: rgba(255, 255, 255, 0);
animation: 1.5s linear 1s 1 normal both running show;
margin: 0px auto !important;
}
#site-title::after {
content: "";
position: absolute;
left: 0px;
margin: auto;
border-radius: 12px;
top: 11px;
height: 55px;
width: 110%;
animation: 2s cubic-bezier(0.62, 0.21, 0.25, 1) 1.5s 1 normal both running color_change, 2s cubic-bezier(0.62, 0.21, 0.25, 1) 1.5s 1 normal both running swipe_box;
}
@media screen and (max-width: 768px) {
#site-title::after {
background: rgb(255, 255, 255) !important;
}
}
@media screen and (max-width: 768px) {
#site-subtitle::after {
background: rgb(255, 255, 255) !important;
}
}
#site-subtitle {
width: 100%;
max-width: 100%;
position: relative;
animation: 1.5s linear 1s 1 normal both running show;
margin: 0px auto !important;
}
#site-subtitle::after {
content: "";
position: absolute;
left: 0px;
right: 0px;
margin: auto;
border-radius: 12px;
height: 100%;
width: 0%;
animation: 2s cubic-bezier(0.62, 0.21, 0.25, 1) 1.5s 1 normal both running color_change, 2s cubic-bezier(0.62, 0.21, 0.25, 1) 1.5s 1 normal both running swipe_box2;
}
@keyframes color_change {
0% {
background: rgb(255, 255, 255);
}
100% {
background: var(--xlfd-main);
}
}
@-webkit-keyframes color_change {
0% {
background: rgb(255, 255, 255);
}
100% {
background: var(--xlfd-main);
}
}
@-webkit-keyframes swipe_box {
0% {
left: 0px;
width: 0%;
}
50% {
left: 0px;
width: 100%;
}
100% {
left: 100%;
width: 0%;
}
}
@keyframes swipe_box {
0% {
left: 0px;
width: 0%;
}
50% {
left: 0px;
width: 100%;
}
100% {
left: 100%;
width: 0%;
}
}
@-webkit-keyframes swipe_box2 {
0% {
left: 0px;
width: 0%;
}
50% {
left: 0px;
width: 80%;
}
100% {
left: 0px;
width: 0%;
}
}
@keyframes swipe_box2 {
0% {
left: 0px;
width: 0%;
}
50% {
left: 0px;
width: 80%;
}
100% {
left: 0px;
width: 0%;
}
}
@-webkit-keyframes show {
0% {
color: rgba(255, 255, 255, 0);
text-shadow: transparent 2px 3px 10px;
}
81% {
color: rgba(255, 255, 255, 0);
}
100% {
color: rgb(255, 255, 255);
}
}
@keyframes show {
0% {
color: rgba(255, 255, 255, 0);
text-shadow: transparent 2px 3px 10px;
}
81% {
color: rgba(255, 255, 255, 0);
}
100% {
color: rgb(255, 255, 255);
}
}
.pl-img {
background-image: url([[${theme.config.top.above.index_img}]]);
}
@media screen and (max-width: 768px) {
.pl-img {
background-image: url([[${theme.config.top.above.phone_index_img}]]);
}
}
.typed-cursor {
opacity: 1;
}
.typed-cursor.typed-cursor--blink {
animation: typedjsBlink 0.7s infinite;
-webkit-animation: typedjsBlink 0.7s infinite;
animation: typedjsBlink 0.7s infinite;
}
@keyframes typedjsBlink {
50% {
opacity: 0.0;
}
}
@-webkit-keyframes typedjsBlink {
0% {
opacity: 1;
}
50% {
opacity: 0.0;
}
100% {
opacity: 1;
}
}
</style>
<script th:inline="javascript">
function subtitleType() {
if([[${theme.config.top.above.enable_typed_random}]]){
fetch("https://v1.hitokoto.cn").then((t => t.json())).then((t => {
{
const e = "出自 " + t.from;
const n = [[${theme.config.top.above.typed}]].map((item) => {
return item.realNode.text;
});
n.push(t.hitokoto, e), window.typed = new Typed("#subtitle", {
strings: n,
startDelay: 300,
typeSpeed: 100,
loop: !0,
backSpeed: 50
})
}
}))
}else{
const n = [[${theme.config.top.above.typed}]].map((item) => {
return item.realNode.text;
});
window.typed = new Typed("#subtitle", {
strings: n,
startDelay: 300,
typeSpeed: 100,
loop: !0,
backSpeed: 50
})
}
}
// 防止加载文字太短时第一个自定义文字显示不出来
setTimeout(()=>{
"function" == typeof Typed ? subtitleType() : getScript("https://npm.elemecdn.com/typed.js@2.0.12/lib/typed.min.js").then(subtitleType)
},1800)
</script>
</th:block>这是二个动态圆角白条代码样式
#site-title::after {
content: "";
position: absolute;
left: 0px;
margin: auto;
border-radius: 12px;
top: 11px;
height: 55px;
width: 110%;
animation: 2s cubic-bezier(0.62, 0.21, 0.25, 1) 1.5s 1 normal both running color_change, 2s cubic-bezier(0.62, 0.21, 0.25, 1) 1.5s 1 normal both running swipe_box;
} #site-subtitle::after {
content: "";
position: absolute;
left: 0px;
right: 0px;
margin: auto;
border-radius: 12px;
height: 100%;
width: 0%;
animation: 2s cubic-bezier(0.62, 0.21, 0.25, 1) 1.5s 1 normal both running color_change, 2s cubic-bezier(0.62, 0.21, 0.25, 1) 1.5s 1 normal both running swipe_box2;
}