BHL header动画 组件
2022年12月12日
修订 11
评分
25
↑ 25
↓ 0
支持率
100%
总票数 25
Wilson 95% 下界
86.7%
在相同票数下更稳健的支持率估计
争议指数
0.000
评分趋势
按周聚合 加载图表中...
最近修订
1 / 4
最近投票
1 / 3
2024-09-03
2023-01-19
2022-12-18
2022-12-17
2022-12-16
2022-12-14
2022-12-14
2022-12-13
2022-12-13
2022-12-12
相关页面
暂无推荐
页面源码
[[iftags +组件]]
[[mOdUlE cSs]]
@import url("https://bhl.scpwikicn.com/css/min/normalize.min.css");
@import url("https://bhl.scpwikicn.com/css/min/black-highlighter.min.css");
.step_container {
margin: 0.5rem 0;
border: 1px solid #999;
padding: 1em;
}
.help {
display: flex;
align-content: stretch;
padding-bottom: 1em;
border-bottom: 1px dashed #999;
}
.help blockquote {
margin: 0;
font-size: 85%;
}
.help blockquote > p {
display: flex;
flex-wrap: wrap;
align-items: center;
align-content: center;
margin-right: 0;
min-height: 2rem;
margin: 0;
}
.help blockquote > p * {
margin: 0 0.1rem;
height: 100%;
}
.help blockquote:nth-of-type(1) {
width: 40%;
background: transparent;
border: unset;
box-shadow: unset;
text-align: right;
margin-right: 0;
padding: 0;
}
.help blockquote:nth-of-type(1) > p {
justify-content: flex-end;
}
.help blockquote:nth-of-type(2) {
margin-left: 1em;
width: 60%;
}
.collapsible-block-unfolded-link, .collapsible-block-folded {
text-align: center;
}
.collapsible-block-content {
text-align: left;
}
[[/module]]
[[>]]
[[module rate]]
[[/>]]
[[div_ class="step_container"]]
这是[[*user AI_Mayca]]制作的用于给**[[[https://scp-wiki-cn.wikidot.com/theme:black-highlighter-theme|黑色标记笔]]]**添加header动画的组件。
[[size 30%]]
⚠声明：该组件需搭配黑色标记笔一同生效，但**不一定**兼容所有BHL版式，还请在沙盒测试后再判断使用与否。
[[/size]]
+ **使用方法**
将如下语句置于页面任意位置：
> {{[[@@include@@ :scp-wiki-cn:theme:black-highlighter-theme]]}}
> {{[[@@include@@ :scp-wiki-cn:component:bhl-animation]]}}
+ **范例预览**
[[hTmL]]
<head>
<style type="text/css">
@import url("https://scp-wiki-cn.wikidot.com/component:theme/code/1");
@import url("https://bhl.scpwikicn.com/css/min/normalize.min.css");
@import url("https://bhl.scpwikicn.com/css/min/black-highlighter.min.css");
@import url("https://scp-wiki-cn.wdfiles.com/local--code/theme%3Aswirling-ashes/1");
:root {
--header-title: "鼠巢";
--header-subtitle: "让我们从结局开始";
}
#account-options {
background-color: rgba(255, 255, 255, 0.2) !important;
}
#header {
background-image: none;
}
#header::before {
content: '';
width: var(--final-header-height-on-desktop);
height: var(--final-header-height-on-desktop);
background-image: var(--logo-image);
background-position: left 0.75rem top 1.1875rem;
background-size: auto calc(var(--header-height-on-desktop) - 2rem);
background-repeat: no-repeat;
animation: rotateImgAnim 5s ease-in-out infinite;
transform-origin: calc(var(--header-height-on-desktop)/2 - 0.25rem) calc(var(--header-height-on-desktop)/2 + 0.1875rem);
position: absolute;
z-index: 11;
}
@keyframes rotateImgAnim {
0% {transform: rotate(90deg); opacity: 0}
30% {transform: rotate(90deg); opacity: 0}
45% {transform: rotate(0deg); opacity: 1}
100% {transform: rotate(0deg); opacity: 1}
}
@media only screen and (max-width:56.25rem) {
#header::before {
--bg-posx-mb: calc(var(--header-height-on-mobile) - 0.75rem - var(--size));
--bg-posy-mb: calc(((var(--size)*-1) + var(--header-height-on-mobile) + var(--y-offset))/2);
width: var(--header-height-on-mobile);
height: var(--header-height-on-mobile);
background-position: calc(var(--header-height-on-mobile) - .75rem - var(--size)) calc(((var(--size)*-1) + var(--header-height-on-mobile) + var(--y-offset))/2);
background-size: var(--size), 100% var(--header-height-on-mobile);
background-repeat: no-repeat;
transform-origin: calc(var(--size)/2 + var(--bg-posx-mb)) calc(var(--size)/2 + var(--bg-posy-mb));
}
@keyframes rotateImgAnim {
0% {background-size: calc(var(--size) * 2/3); background-position: calc(var(--size)/3 + var(--bg-posx-mb)) calc(var(--size)/6 + var(--bg-posy-mb)); transform: rotate(90deg); transform-origin: calc(var(--size) * 2/3 + var(--bg-posx-mb)) calc(var(--size)/2 + var(--bg-posy-mb)); opacity: 0}
30% {transform: rotate(90deg); opacity: 0}
45% {transform: rotate(0deg); opacity: 1}
51% {background-position: calc(var(--size)/3 + var(--bg-posx-mb)) calc(var(--size)/6 + var(--bg-posy-mb)); transform-origin: calc(var(--size) * 2/3 + var(--bg-posx-mb)) calc(var(--size)/2 + var(--bg-posy-mb))}
66% {background-size: calc(var(--size) * 2/3); background-position: calc(var(--size)/6 + var(--bg-posx-mb)) calc(var(--size)/6 + var(--bg-posy-mb)); transform-origin: calc(var(--size)/2 + var(--bg-posx-mb)) calc(var(--size)/2 + var(--bg-posy-mb));}
80% {background-size: var(--size); background-position: var(--bg-posx-mb) var(--bg-posy-mb)}
100% {background-size: var(--size); background-position: var(--bg-posx-mb) var(--bg-posy-mb); transform: rotate(0deg); opacity: 1}
}
}
#header h1 {
animation:anim_h1 5s ease-in-out infinite;
}
#header h2 {
animation:anim_h2 5s ease-in-out infinite;
}
@keyframes anim_h1 {
0% {opacity: 0}
58% {margin-left: -50px; opacity: 0}
73% {margin-left: 0; opacity: 1}
100% {opacity: 1}
}
@keyframes anim_h2 {
0% {opacity: 0}
63% {margin-left: -50px; opacity: 0}
78% {margin-left: 0; opacity: 1}
100% {opacity: 1}
}
</style>
</head>
<div id="container-wrap-wrap">
<div id="container-wrap">
<div id="container">
<div id="header">
<h1>
<a href="#">
<span>SCP基金会</span>
</a>
</h1>
<h2>
<span>控制，收容，保护</span>
</h2>
<!-- google_ad_section_start(weight=ignore) -->
<div id="search-top-box" class="form-search">
<form id="search-top-box-form" action="dummy" class="input-append">
<input id="search-top-box-input" class="text empty search-query" type="text" size="15" name="query" value="搜索网站" onfocus="if(YAHOO.util.Dom.hasClass(this, 'empty')){YAHOO.util.Dom.removeClass(this,'empty'); this.value='';}"></input>
<input class="button btn" type="submit" name="search" value="搜索"></input>
</form>
</div>
<div id="top-bar">
<div class="top-bar">
<ul>
<li>
<a href="#">主页</a>
</li>
<li>
<a href="#">SCP基金会中文主页</a>
</li>
</ul>
</div>
<div class="mobile-top-bar">
<div class="open-menu">
<p>
<a href="#side-bar">≡</a>
</p>
</div>
<ul>
<li>
<a href="/">主页</a>
</li>
<li>
<a href="#">SCP基金会中文主页</a>
</li>
</ul>
</div>
</div>
<div id="login-status">
<span class="printuser">
<a href="#" onclick="WIKIDOT.page.listeners.userInfo(4485997); return false;">
<img class="small" src="http://www.wikidot.com/avatar.php?userid=4485997&size=small&timestamp=1674092516" alt="AI_Mayca" style="background-image:url(http://www.wikidot.com/userkarma.php?u=4485997)"></img>
</a>
AI_Mayca
</span>
|
<a id="my-account" href="#">我的帐户</a>
<a id="account-topbutton" href="javascript:;">▼</a>
<div id="account-options">
<ul>
<li>
<a href="#">活动</a>
</li>
<li>
<a href="#">消息</a>
</li>
<li>
<a href="#">网站</a>
</li>
<li>
<a href="#">设置</a>
</li>
<li>
<a href="#">升级</a>
</li>
<li>
<a href="javascript:;" onclick="WIKIDOT.page.listeners.logoutClick(event)">登出</a>
</li>
</ul>
</div>
<script type="text/javascript">
WIKIREQUEST.userId = 4485997;
</script>
</div>
<div id="header-extra-div-1">
<span></span>
</div>
<div id="header-extra-div-2">
<span></span>
</div>
<div id="header-extra-div-3">
<span></span>
</div>
</div>
</div>
</div>
</div>
[[/hTmL]]
@@@@
[[collapsible show="+ 展开源代码" hide="- 折叠源代码"]]
[[code type="css"]]
/* BHL Header Animation
[2022 Wikidot Component]
By AI_Mayca
Created for the SCP Foundation */
#header {
background-image: none;
}
#header::before {
content: '';
width: var(--final-header-height-on-desktop);
height: var(--final-header-height-on-desktop);
background-image: var(--logo-image);
background-position: left 0.75rem top 1.1875rem;
background-size: auto calc(var(--header-height-on-desktop) - 2rem);
background-repeat: no-repeat;
animation: rotateImgAnim 5s ease-in-out;
transform-origin: calc(var(--header-height-on-desktop)/2 - 0.25rem) calc(var(--header-height-on-desktop)/2 + 0.1875rem);
position: absolute;
z-index: 11;
}
@keyframes rotateImgAnim {
0% {transform: rotate(90deg); opacity: 0}
30% {transform: rotate(90deg); opacity: 0}
45% {transform: rotate(0deg); opacity: 1}
100% {transform: rotate(0deg); opacity: 1}
}
@media only screen and (max-width:56.25rem) {
#header::before {
--bg-posx-mb: calc(var(--header-height-on-mobile) - 0.75rem - var(--size));
--bg-posy-mb: calc(((var(--size)*-1) + var(--header-height-on-mobile) + var(--y-offset))/2);
width: var(--header-height-on-mobile);
height: var(--header-height-on-mobile);
background-position: calc(var(--header-height-on-mobile) - .75rem - var(--size)) calc(((var(--size)*-1) + var(--header-height-on-mobile) + var(--y-offset))/2);
background-size: var(--size), 100% var(--header-height-on-mobile);
background-repeat: no-repeat;
transform-origin: calc(var(--size)/2 + var(--bg-posx-mb)) calc(var(--size)/2 + var(--bg-posy-mb));
}
@keyframes rotateImgAnim {
0% {background-size: calc(var(--size) * 2/3); background-position: calc(var(--size)/3 + var(--bg-posx-mb)) calc(var(--size)/6 + var(--bg-posy-mb)); transform: rotate(90deg); transform-origin: calc(var(--size) * 2/3 + var(--bg-posx-mb)) calc(var(--size)/2 + var(--bg-posy-mb)); opacity: 0}
30% {transform: rotate(90deg); opacity: 0}
45% {transform: rotate(0deg); opacity: 1}
51% {background-position: calc(var(--size)/3 + var(--bg-posx-mb)) calc(var(--size)/6 + var(--bg-posy-mb)); transform-origin: calc(var(--size) * 2/3 + var(--bg-posx-mb)) calc(var(--size)/2 + var(--bg-posy-mb))}
66% {background-size: calc(var(--size) * 2/3); background-position: calc(var(--size)/6 + var(--bg-posx-mb)) calc(var(--size)/6 + var(--bg-posy-mb)); transform-origin: calc(var(--size)/2 + var(--bg-posx-mb)) calc(var(--size)/2 + var(--bg-posy-mb));}
80% {background-size: var(--size); background-position: var(--bg-posx-mb) var(--bg-posy-mb)}
100% {background-size: var(--size); background-position: var(--bg-posx-mb) var(--bg-posy-mb); transform: rotate(0deg); opacity: 1}
}
}
#header h1 {
animation:anim_h1 5s ease-in-out;
}
#header h2 {
animation:anim_h2 5s ease-in-out;
}
@keyframes anim_h1 {
0% {opacity: 0}
58% {margin-left: -50px; opacity: 0}
73% {margin-left: 0; opacity: 1}
100% {opacity: 1}
}
@keyframes anim_h2 {
0% {opacity: 0}
63% {margin-left: -50px; opacity: 0}
78% {margin-left: 0; opacity: 1}
100% {opacity: 1}
}
[[/code]]
[[/collapsible]]
[[/div]]
[[/iftags]]
[[mOdUlE cSs]]
@import url("https://scp-wiki-cn.wikidot.com/component:bhl-animation/code/1");
[[/module]]