此分类下的主题美化教程，大部分都以B2主题为基础美化，包括JS功能等。代码基本都是通用的，个别地方可能需要你自己修改，不会的可以在文章下方留言。
感觉比较简约，有需要的可以玩玩,不想放首页也可以直接放到圈子里。
功能特点：
注意事项：
颜色跟我的不一样是因为我使用了B2自带的css变量和自定义的css变量，请在样式代码最上面查看。也可以在样式文件中搜索关键词：var 查看哪些样式用了css变量，自己改一下即可。
例如：
var(–b2radius); 、var(–b2color); 这种使用的就是B2主题的css变量，你主题颜色和圆角是什么，他就会获取什么
[content_hide]
[/content_hide]
这是一个我自己整出来的底部，主要当初觉得动态效果比较好看，然后改出来的，如果你喜欢可以用一下，代码不是那么完美，可能有些小地方不太兼容，改一下样式即可。
会的人可以直接下载文件将代码放到对应的文件中
[content_hide]
[/content_hide]
B2原标签筛选是一个多级筛选项，可匹配一篇含有多个标签的文章，这个功能主要用于影视站或其他需要多个标签筛选一篇文章的内容站。
例如：一篇文章是美国电影，种类是科幻，年份是2025，那么给这篇文章设置了：美国,科幻,2025三个标签后，用户通过标签去选择这三个标签项，就会筛选出来这个文章。
但是，我用不到啊！！
我只想显示单一标签下的所有文章，我不可能一篇文章又是功能添加的，又是图标图片的，一篇文章牵扯多个标签。
所以怎么办？
改！！！
怎么改？！！！
看教程！！！！
require_once get_stylesheet_directory() . '/Modules/Templates/Archive.php';
通过以上路径，找到254行，也可搜索关键词：标签筛选
找到上方图片中的内容后，从public方法名开始，整段替换
替换完成后，清理浏览器缓存
如果你跟我一样是多行标签，只希望用户点哪个标签就看哪个标签下的内容，不允许多个标签同时被选择，类似于菜单一样
那么你替换代码后，已经完成了修改，可以试一下。
[content_hide]
public static function filter_tag($tags, $term, $request, $_url) {
if (empty($tags)) return;
$is_tax = $term->taxonomy === 'post_tag';
// 分行
$tags = explode(PHP_EOL, $tags);
$tags = array_filter($tags);
$html = '';
$i = 0;
foreach ($tags as $k_l => $v_l) {
$list = explode('|', $v_l);
if ($list) {
$i++;
$name = $list[0];
$list = explode(',', $list[1]);
$list = array_filter($list);
if (!empty($list)) {
$a = '';
foreach ($list as $k => $v) {
$_term = get_term_by('name', $v, 'post_tag');
if (isset($_term->term_id)) {
// 清除之前的标签筛选，重新构建URL
if ($is_tax) {
$url = get_term_link($_term->term_id) . $request;
} else {
// 构建新的URL，清除之前的筛选条件
$url = add_query_arg('tags', $_term->slug, $_url . $request);
}
// 标记当前标签为选中
$a .= '<a href="' . $url . '" class="' . ($term->slug === $_term->slug || (isset($_GET['tags']) && $_GET['tags'] == urldecode($_term->slug)) ? 'current' : '') . '" title="' . $v . '">' . $v . '</a>';
}
}
if ($a) {
if (!$is_tax) {
// 对于非分类页面，添加"全部"选项
$a = '<a href="' . (remove_query_arg('tags', $_url . $request)) . '" class="' . (!isset($_GET['tags']) ? 'current' : '') . '">' . __('全部', 'b2') . '</a>' . $a;
}
$html .= '<li><div class="filter-name">' . $name . '：</div><div class="filter-items">' . $a . '</div></li>';
}
}
}
}
if ($html) {
return $html;
}
return;
}
[/content_hide]
常用B2主题圈子功能的都知道，一旦圈子字数过多就会直接隐藏，并生成一个阅读更多的按钮，让你点击跳转到内页查看。
这对我来说是非常鸡肋的，本来一眼能看完的内容，非要再打开跳转一次，很难受
所以我就对这个字数的显示做了修改。
首先我们来看控制字数以及截断字数的原代码，同时看这段代码的含义
[content_hide]
代码位置：b2/Assets/fontend/circle.js 1630行左右
// 检查 newContent 是否为假（即不存在或为 false）
if (!newContent) {
// 如果 this.data[ti].full_content 为假，且 this.single.is 也为假，则进入这个逻辑块
if (!this.data[ti].full_content && !this.single.is) {
// 将 content 的长度转换为整数并赋值给 length
let length = parseInt(content.length);
// 如果内容长度大于 200，则进入这个逻辑块
if (length > 200) {
// 如果长度的三分之一大于 200，则设置长度为 100
if (length / 3 > 200) {
length = 100;
} else {
// 否则，设置长度为原长度的三分之一
length = length / 3;
}
// 截取内容的前 length 个字符，并在其后添加省略号和“阅读更多”按钮
content = content.substring(0, length) + '... <button class="text" onclick="b2CircleList.showFullContent(' + ti + ')">' + b2_global.js_text.global.read_more + '<i class="b2font b2-jt-down"></i></button>';
// 返回一个包含链接和截断内容的 HTML 片段
return '<a href="' + item.link + '" target="_blank" class="link-block"></a><p>' + content + '</p>';
}
}
}
if (length > 2000) { //哔哔一二注释：如果长度大于2000，才可以执行以下逻辑。
if (length / 2 > 200) { // 使用一半的长度作为截断点
length = 200;
} else {
length = length / 2; // 截取原长度的一半
}
将原来的判断条件200字符，改为2000字符。如果你想展示更多，那就将字符长度调整的更高。
[/content_hide]
注意：此文件不可以在子主题中引用，只能再父主题中修改，修改路径在上方，自己看。为什么不能？我懒得研究
你可以研究一下并告诉我。
为什么你修改后没生效？有没有可能是你改完以后没清空浏览器缓存？毕竟你改的是js文件，需要让它重新加载，用修改后的方法判断。
这是一个用于B2主题的私信弹窗功能，由于默认私信消息提醒感知太弱，看到别人给自己发的私信时，基本都过了一俩月了！！！
之前折腾了几次简单的，这次干脆弄的像样点。
通过给私信标签添加固定样式，从而进行监控指定内容。
如果成立，就弹窗，不成立就隐藏。
// 修改私信提醒443行 require_once get_stylesheet_directory() . '/Modules/Templates/Footer.php';
给代码中的有新私信和私信列表，前方的span样式中，添加额外样式名diy-sixin
详情看下方代码，也可以直接复制替换。
<?php if($aside_dmsg && !$audit) { ?>
<div :class="['bar-item',{'active':showType.dmsg}]" @click="show('dmsg','<?php echo $dmsg_url;?>')">
<b v-show="dmsg.count" class="bar-mark"></b>
<?php echo b2_get_icon('b2-mail-send-line'); ?>
<span class="bar-item-desc diy-sixin" v-if="dmsg.count"><?php echo __('有新私信','b2'); ?></span>
<span class="bar-item-desc diy-sixin" v-else><?php echo __('私信列表','b2'); ?></span>
</div>
<?php } ?>
[content_hide]
<!--私信消息提醒-->
<div id="container-sixin">
<div id="success-box-sixin">
<div class="dot-sixin"></div><div class="dot-sixin two-sixin"></div>
<div class="face-sixin">
<div class="eye-sixin"></div>
<div class="eye-sixin right-sixin"></div>
<div class="mouth-sixin happy-sixin"></div>
</div>
<div class="shadow scale-sixin"></div>
<div class="message-sixin">
<h1 class="alert-sixin">您有一条新私信</h1>
<p>请前往查看</p>
</div>
<button class="button-box-sixin">
<a href="/directmessage" target="_blank" id="view-message-link-sixin">查看私信</a>
</button>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const container = document.getElementById('container-sixin');
const messageIndicator = document.querySelector('.diy-sixin');
const viewMessageLink = document.getElementById('view-message-link-sixin');
function showNotification() {
if (container) { // 确保元素存在
container.style.bottom = '0';
}
}
function hideNotification() {
if (container) { // 确保元素存在
container.style.bottom = '-300px';
}
}
function checkMessageIndicator() {
if (messageIndicator && container) { // 确保两个元素都存在
if (messageIndicator.textContent.trim() === '有新私信') {
showNotification();
} else if (messageIndicator.textContent.trim() === '私信列表') {
hideNotification();
} else {
hideNotification(); // 默认隐藏
}
}
}
// 初始加载时检查
checkMessageIndicator();
// 监听 .diy-sixin 内容的变化
const observer = new MutationObserver(checkMessageIndicator);
if (messageIndicator) {
observer.observe(messageIndicator, { childList: true, characterData: true, subtree: true });
}
// 点击查看私信按钮后隐藏通知
if (viewMessageLink && container) {
viewMessageLink.addEventListener('click', hideNotification);
}
});
</script>
<!--私信消息提醒结束-->
/**************************************** 私信消息弹窗开始 ********************************************/
/*修改右侧侧边栏位置避免遮挡*/
.bar-middle {
bottom: 30%!important;
}
/* 桌面端样式 */
@media (min-width: 769px) {
#container-sixin {
position: fixed;
right: 20px;
bottom: -300px;
margin: 0;
overflow: hidden;
z-index: 999;
width: 200px;
height: 250px;
transition: bottom 0.5s ease-in-out;
border-radius: 10px 10px 0 0;
box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.2);
}
.green-sixin {
color: #4ec07d;
}
.alert-sixin {
font-weight: 700;
letter-spacing: 5px;
font-size: 1em;
padding-top: 5px;
color: #fcfcfc;
padding-bottom: 5px;
text-transform: uppercase;
margin: 0;
text-align: center;
}
.message-sixin p {
margin-top: 10px;
font-size: 0.8em;
font-weight: 400;
color: #5e5e5e;
letter-spacing: 1px;
margin-bottom: 15px;
text-align: center;
}
button-sixin,
.dot-sixin {
cursor: pointer;
}
#success-box-sixin {
width: 200px;
height: 250px;
background: linear-gradient(to bottom, #b0db7d, #99dbb4);
border-radius: 10px 10px 0 0;
box-shadow: none;
perspective: none;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.dot-sixin {
width: 10px;
height: 10px;
background: #fcfcfc;
border-radius: 50%;
position: absolute;
top: 15px;
right: 20px;
}
.dot-sixin:hover {
background: #c9c9c9;
}
.two-sixin {
right: 45px;
opacity: 0.5;
}
.face-sixin {
width: 50px;
height: 50px;
background: #fcfcfc;
border-radius: 50%;
border: 2px solid #777777;
z-index: 2;
animation: bounce-sixin 1s ease-in infinite;
margin-bottom: 15px;
}
.eye-sixin {
position: absolute;
width: 8px;
height: 8px;
background: #777777;
border-radius: 50%;
top: 35%;
left: 25%;
}
.right-sixin {
left: 65%;
}
.mouth-sixin {
position: absolute;
top: 55%;
left: 40%;
width: 12px;
height: 12px;
border-radius: 50%;
}
.happy-sixin {
border: 2px solid;
border-color: transparent #777777 #777777 transparent;
transform: rotate(45deg);
width: 15px;
height: 15px;
top: 50%;
left: 38%;
}
.shadow {
position: absolute;
width: 26%;
height: 3%;
opacity: 0.5;
background: #777777;
left: 37%;
top: 34%;
border-radius: 50%;
z-index: 1;
animation: scale-sixin 1s ease-in infinite; /* 缩放动画 */
}
#view-message-link-sixin{
width: 100%;
height: 100%;
position: absolute;
text-align: center;
line-height: 40px;
}
.shadow-sixin {
display: none;
}
.message-sixin {
text-align: center;
}
.button-box-sixin {
background: #fcfcfc;
width: 60%;
height: 40px;
border-radius: 20px;
outline: 0;
border: none;
box-shadow: 2px 2px 10px rgba(119, 119, 119, 0.5);
transition: all 0.3s ease-in-out;
font-size: 1em;
font-weight: bold;
color: #4ec07d;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
text-decoration: none;
}
.button-box-sixin:hover {
background: #efefef;
transform: scale(1.02);
}
@keyframes bounce-sixin {
50% {
transform: translateY(-5px);
}
}
@keyframes scale-sixin {
50% {
transform: scale(0.95);
}
}
/* 移动端和平板样式 - 隐藏提示和容器 */
@media (max-width: 768px) {
.diy-sixin,
#container-sixin {
display: none !important;
}
}
.diy-sixin {
display: none; /* 初始时隐藏该元素 */
}
/**************************************** 私信消息弹窗结束 ********************************************/
[/content_hide]
网站比较单调，给本站右下角放了个动态像素鸡。
在style.css中放入以下代码。
[content_hide]
/* 全站右下角像素鸡 */
.sceneji {
font-size: 3px;
position: fixed;
width: 100%;
max-width: 75em;
height: 60em;
right: 7px;
bottom: -51px;
z-index: 99;
}
.grassji {
position: absolute;
}
/* .grass--1 {
top: 30em;
left: 10em;
}
.grass--2 {
left: 52em;
top: 44em;
} */
.flowerji {
position: absolute;
left: 50em;
top: 35em;
}
.linkji {
position: absolute;
left: 30em;
top: 5em;
}
.grassji {
transform: translate(0, 0);
/* avoids lines in Firefox */
background: transparent;
height: 1em;
width: 1em;
box-shadow: 4em 0 0 #317131, 5em 0 0 #317131, 10em 0 0 #317131, 11em 0 0 #317131, 5em 1em 0 #317131, 6em 1em 0 #317131, 9em 1em 0 #317131, 10em 1em 0 #317131, 1em 2em 0 #317131, 2em 2em 0 #317131, 3em 2em 0 #317131, 5em 2em 0 #317131, 6em 2em 0 #317131, 9em 2em 0 #317131, 10em 2em 0 #317131, 12em 2em 0 #317131, 13em 2em 0 #317131, 14em 2em 0 #317131, 2em 3em 0 #317131, 3em 3em 0 #317131, 4em 3em 0 #317131, 6em 3em 0 #317131, 9em 3em 0 #317131, 11em 3em 0 #317131, 12em 3em 0 #317131, 13em 3em 0 #317131, 3em 4em 0 #317131, 4em 4em 0 #317131, 11em 4em 0 #317131, 12em 4em 0 #317131;
}
.flowerji {
transform: translate(0, 0);
/* avoids lines in Firefox */
background: transparent;
height: 1em;
width: 1em;
animation: flower 0.5s steps(1) infinite;
}
@keyframes flower {
0%,
100% {
box-shadow: 3em 1em 0 #b5ebbd, 4em 1em 0 #b5ebbd, 5em 1em 0 #b5ebbd, 3em 2em 0 #b5ebbd, 4em 2em 0 #b5ebbd, 5em 2em 0 #b5ebbd, 1em 3em 0 #b5ebbd, 2em 3em 0 #b5ebbd, 3em 3em 0 #528273, 4em 3em 0 #528273, 5em 3em 0 #528273, 6em 3em 0 #b5ebbd, 7em 3em 0 #b5ebbd, 1em 4em 0 #b5ebbd, 2em 4em 0 #b5ebbd, 3em 4em 0 #528273, 4em 4em 0 #528273, 5em 4em 0 #528273, 6em 4em 0 #b5ebbd, 7em 4em 0 #b5ebbd, 1em 5em 0 #295929, 2em 5em 0 #295929, 3em 5em 0 #b5ebbd, 4em 5em 0 #b5ebbd, 5em 5em 0 #b5ebbd, 6em 5em 0 #295929, 7em 5em 0 #295929, 3em 6em 0 #b5ebbd, 4em 6em 0 #b5ebbd, 5em 6em 0 #b5ebbd, 3em 7em 0 #295929, 4em 7em 0 #295929, 5em 7em 0 #295929;
}
33% {
box-shadow: 3em 0 0 #b5ebbd, 4em 0 0 #b5ebbd, 5em 0 0 #b5ebbd, 3em 1em 0 #b5ebbd, 4em 1em 0 #b5ebbd, 5em 1em 0 #b5ebbd, 1em 2em 0 #b5ebbd, 2em 2em 0 #b5ebbd, 3em 2em 0 #528273, 4em 2em 0 #528273, 5em 2em 0 #528273, 6em 2em 0 #b5ebbd, 7em 2em 0 #b5ebbd, 1em 3em 0 #b5ebbd, 2em 3em 0 #b5ebbd, 3em 3em 0 #528273, 4em 3em 0 #528273, 5em 3em 0 #528273, 6em 3em 0 #b5ebbd, 7em 3em 0 #b5ebbd, 1em 4em 0 #295929, 2em 4em 0 #295929, 3em 4em 0 #b5ebbd, 4em 4em 0 #b5ebbd, 5em 4em 0 #b5ebbd, 6em 4em 0 #295929, 7em 4em 0 #295929, 1em 5em 0 #295929, 2em 5em 0 #295929, 3em 5em 0 #b5ebbd, 4em 5em 0 #b5ebbd, 5em 5em 0 #b5ebbd, 6em 5em 0 #295929, 7em 5em 0 #295929, 3em 6em 0 #295929, 4em 6em 0 #295929, 5em 6em 0 #295929, 3em 7em 0 #295929, 4em 7em 0 #295929, 5em 7em 0 #295929;
}
66% {
box-shadow: 3em 1em 0 #b5ebbd, 4em 1em 0 #b5ebbd, 5em 1em 0 #b5ebbd, 1em 2em 0 #b5ebbd, 3em 2em 0 #b5ebbd, 4em 2em 0 #b5ebbd, 5em 2em 0 #b5ebbd, 7em 2em 0 #b5ebbd, 1em 3em 0 #b5ebbd, 2em 3em 0 #b5ebbd, 3em 3em 0 #528273, 4em 3em 0 #528273, 5em 3em 0 #528273, 6em 3em 0 #b5ebbd, 7em 3em 0 #b5ebbd, 1em 4em 0 #295929, 2em 4em 0 #b5ebbd, 3em 4em 0 #528273, 4em 4em 0 #528273, 5em 4em 0 #528273, 6em 4em 0 #b5ebbd, 7em 4em 0 #295929, 1em 5em 0 #295929, 2em 5em 0 #295929, 3em 5em 0 #b5ebbd, 4em 5em 0 #b5ebbd, 5em 5em 0 #b5ebbd, 6em 5em 0 #295929, 7em 5em 0 #295929, 3em 6em 0 #295929, 4em 6em 0 #295929, 5em 6em 0 #295929, 3em 7em 0 #295929, 4em 7em 0 #295929, 5em 7em 0 #295929;
}
}
.linkji {
transform: translate(0, 0);
/* avoids lines in Firefox */
position: relative;
height: 1em;
width: 1em;
box-shadow: 4em 18em 0 #282828, 5em 18em 0 #282828, 6em 18em 0 #282828, 7em 18em 0 #282828, 8em 18em 0 #282828, 9em 18em 0 #282828, 10em 18em 0 #78b820, 11em 18em 0 #509010, 12em 18em 0 #282828, 1em 19em 0 #282828, 3em 19em 0 #282828, 4em 19em 0 #282828, 5em 19em 0 #f87800, 6em 19em 0 #509010, 7em 19em 0 #509010, 8em 19em 0 #78b820, 9em 19em 0 #509010, 10em 19em 0 #f87800, 11em 19em 0 #282828, 12em 19em 0 #509010, 13em 19em 0 #282828, 14em 19em 0 #282828, 0em 20em 0 #282828, 1em 20em 0 #f0a068, 2em 20em 0 #282828, 3em 20em 0 #e860b0, 4em 20em 0 #282828, 5em 20em 0 #282828, 6em 20em 0 #f87800, 7em 20em 0 #f87800, 8em 20em 0 #f87800, 9em 20em 0 #f87800, 10em 20em 0 #282828, 11em 20em 0 #282828, 12em 20em 0 #509010, 13em 20em 0 #282828, 14em 20em 0 #f0a068, 15em 20em 0 #282828, 0em 21em 0 #282828, 1em 21em 0 #f0a068, 2em 21em 0 #282828, 3em 21em 0 #e860b0, 4em 21em 0 #e860b0, 5em 21em 0 #e860b0, 6em 21em 0 #282828, 7em 21em 0 #282828, 8em 21em 0 #282828, 9em 21em 0 #282828, 10em 21em 0 #e860b0, 11em 21em 0 #e860b0, 12em 21em 0 #282828, 13em 21em 0 #282828, 14em 21em 0 #f0a068, 15em 21em 0 #282828, 0em 22em 0 #282828, 1em 22em 0 #282828, 2em 22em 0 #f0a068, 3em 22em 0 #282828, 4em 22em 0 #e860b0, 5em 22em 0 #e860b0, 6em 22em 0 #e860b0, 7em 22em 0 #e860b0, 8em 22em 0 #e860b0, 9em 22em 0 #e860b0, 10em 22em 0 #e860b0, 11em 22em 0 #e860b0, 12em 22em 0 #282828, 13em 22em 0 #f0a068, 14em 22em 0 #282828, 15em 22em 0 #282828, 0em 23em 0 #282828, 1em 23em 0 #e09050, 2em 23em 0 #282828, 3em 23em 0 #e860b0, 4em 23em 0 #282828, 5em 23em 0 #282828, 6em 23em 0 #282828, 7em 23em 0 #282828, 8em 23em 0 #282828, 9em 23em 0 #282828, 10em 23em 0 #282828, 11em 23em 0 #282828, 12em 23em 0 #e860b0, 13em 23em 0 #282828, 14em 23em 0 #e09050, 15em 23em 0 #282828, 0em 24em 0 #282828, 1em 24em 0 #e09050, 2em 24em 0 #e09050, 3em 24em 0 #282828, 4em 24em 0 #b86820, 5em 24em 0 #f8f8f8, 6em 24em 0 #f8f8f8, 7em 24em 0 #b86820, 8em 24em 0 #b86820, 9em 24em 0 #f8f8f8, 10em 24em 0 #f8f8f8, 11em 24em 0 #b86820, 12em 24em 0 #282828, 13em 24em 0 #e09050, 14em 24em 0 #e09050, 15em 24em 0 #282828, 0em 25em 0 #282828, 1em 25em 0 #282828, 2em 25em 0 #282828, 3em 25em 0 #b86820, 4em 25em 0 #b86820, 5em 25em 0 #f8f8f8, 6em 25em 0 #282828, 7em 25em 0 #f0a068, 8em 25em 0 #f0a068, 9em 25em 0 #282828, 10em 25em 0 #f8f8f8, 11em 25em 0 #b86820, 12em 25em 0 #b86820, 13em 25em 0 #282828, 14em 25em 0 #282828, 15em 25em 0 #282828, 0em 26em 0 #282828, 1em 26em 0 #885828, 2em 26em 0 #885828, 3em 26em 0 #282828, 4em 26em 0 #b86820, 5em 26em 0 #f0a068, 6em 26em 0 #282828, 7em 26em 0 #f0a068, 8em 26em 0 #f0a068, 9em 26em 0 #282828, 10em 26em 0 #f0a068, 11em 26em 0 #b86820, 12em 26em 0 #282828, 13em 26em 0 #885828, 14em 26em 0 #885828, 15em 26em 0 #282828, 0em 27em 0 #282828, 1em 27em 0 #885828, 2em 27em 0 #885828, 3em 27em 0 #885828, 4em 27em 0 #282828, 5em 27em 0 #b86820, 6em 27em 0 #f0a068, 7em 27em 0 #f0a068, 8em 27em 0 #f0a068, 9em 27em 0 #f0a068, 10em 27em 0 #b86820, 11em 27em 0 #282828, 12em 27em 0 #885828, 13em 27em 0 #885828, 14em 27em 0 #885828, 15em 27em 0 #282828, 1em 28em 0 #282828, 2em 28em 0 #885828, 3em 28em 0 #885828, 4em 28em 0 #282828, 5em 28em 0 #282828, 6em 28em 0 #282828, 7em 28em 0 #b86820, 8em 28em 0 #b86820, 9em 28em 0 #282828, 10em 28em 0 #282828, 11em 28em 0 #282828, 12em 28em 0 #885828, 13em 28em 0 #885828, 14em 28em 0 #282828, 2em 29em 0 #282828, 3em 29em 0 #282828, 4em 29em 0 #389068, 5em 29em 0 #40d870, 6em 29em 0 #389068, 7em 29em 0 #282828, 8em 29em 0 #282828, 9em 29em 0 #389068, 10em 29em 0 #40d870, 11em 29em 0 #389068, 12em 29em 0 #282828, 13em 29em 0 #282828, 2em 30em 0 #282828, 3em 30em 0 #389068, 4em 30em 0 #389068, 5em 30em 0 #389068, 6em 30em 0 #40d870, 7em 30em 0 #40d870, 8em 30em 0 #40d870, 9em 30em 0 #40d870, 10em 30em 0 #389068, 11em 30em 0 #389068, 12em 30em 0 #389068, 13em 30em 0 #282828, 2em 31em 0 #282828, 3em 31em 0 #f0d840, 4em 31em 0 #389068, 5em 31em 0 #389068, 6em 31em 0 #389068, 7em 31em 0 #40d870, 8em 31em 0 #40d870, 9em 31em 0 #389068, 10em 31em 0 #389068, 11em 31em 0 #389068, 12em 31em 0 #f0d840, 13em 31em 0 #282828, 2em 32em 0 #282828, 3em 32em 0 #389068, 4em 32em 0 #f0d840, 5em 32em 0 #f0d840, 6em 32em 0 #282828, 7em 32em 0 #f0d840, 8em 32em 0 #f0d840, 9em 32em 0 #282828, 10em 32em 0 #f0d840, 11em 32em 0 #f0d840, 12em 32em 0 #389068, 13em 32em 0 #282828, 2em 33em 0 #282828, 3em 33em 0 #282828, 4em 33em 0 #389068, 5em 33em 0 #389068, 6em 33em 0 #f0d840, 7em 33em 0 #f0d840, 8em 33em 0 #f0d840, 9em 33em 0 #f0d840, 10em 33em 0 #389068, 11em 33em 0 #389068, 12em 33em 0 #282828, 13em 33em 0 #282828, 2em 34em 0 #282828, 3em 34em 0 #c01820, 4em 34em 0 #282828, 5em 34em 0 #282828, 6em 34em 0 #389068, 7em 34em 0 #389068, 8em 34em 0 #389068, 9em 34em 0 #389068, 10em 34em 0 #282828, 11em 34em 0 #282828, 12em 34em 0 #c01820, 13em 34em 0 #282828, 2em 35em 0 #282828, 3em 35em 0 #282828, 4em 35em 0 #f87800, 5em 35em 0 #c01820, 6em 35em 0 #282828, 7em 35em 0 #282828, 8em 35em 0 #282828, 9em 35em 0 #282828, 10em 35em 0 #c01820, 11em 35em 0 #f87800, 12em 35em 0 #282828, 13em 35em 0 #282828, 3em 36em 0 #282828, 4em 36em 0 #282828, 5em 36em 0 #282828, 6em 36em 0 #282828, 7em 36em 0 #282828, 8em 36em 0 #282828, 9em 36em 0 #282828, 10em 36em 0 #282828, 11em 36em 0 #282828, 12em 36em 0 #282828, 5em 37em 0 #282828, 6em 37em 0 #282828, 7em 37em 0 #282828, 8em 37em 0 #282828, 9em 37em 0 #282828, 10em 37em 0 #282828;
}
.linkji:before {
content: "";
height: 1em;
position: absolute;
left: 0;
top: 0;
width: 1em;
animation: panic 0.5s steps(1) infinite;
}
.linkji:after {
content: "";
height: 1em;
position: absolute;
left: 0;
top: 0;
width: 1em;
animation: chicken 0.4s steps(1) infinite;
}
@keyframes panic {
0%,
100% {
box-shadow: 5em 0 0 #f8f8f8, 10em 0 0 #f8f8f8, 0 2em 0 #f8f8f8, 14em 2em 0 #f8f8f8;
}
66% {
box-shadow: none;
}
}
@keyframes chicken {
0%,
100% {
box-shadow: 10em 4em 0 #282828, 11em 4em 0 #282828, 12em 4em 0 #282828, 9em 5em 0 #282828, 10em 5em 0 #d86060, 11em 5em 0 #d86060, 12em 5em 0 #d86060, 13em 5em 0 #282828, 9em 6em 0 #282828, 10em 6em 0 #282828, 11em 6em 0 #282828, 12em 6em 0 #d86060, 13em 6em 0 #d86060, 14em 6em 0 #282828, 3em 7em 0 #282828, 4em 7em 0 #282828, 8em 7em 0 #282828, 9em 7em 0 #b090f8, 10em 7em 0 #b090f8, 11em 7em 0 #f8f8f8, 12em 7em 0 #282828, 13em 7em 0 #d86060, 14em 7em 0 #282828, 2em 8em 0 #282828, 3em 8em 0 #b090f8, 4em 8em 0 #f8f8f8, 5em 8em 0 #282828, 6em 8em 0 #282828, 7em 8em 0 #282828, 8em 8em 0 #b090f8, 9em 8em 0 #b090f8, 10em 8em 0 #f8f8f8, 11em 8em 0 #f8f8f8, 12em 8em 0 #f8f8f8, 13em 8em 0 #282828, 14em 8em 0 #282828, 2em 9em 0 #282828, 3em 9em 0 #b090f8, 4em 9em 0 #b090f8, 5em 9em 0 #f8f8f8, 6em 9em 0 #f8f8f8, 7em 9em 0 #282828, 8em 9em 0 #b090f8, 9em 9em 0 #f8f8f8, 10em 9em 0 #282828, 11em 9em 0 #f8f8f8, 12em 9em 0 #f8f8f8, 13em 9em 0 #f8f8f8, 14em 9em 0 #282828, 2em 10em 0 #282828, 3em 10em 0 #282828, 4em 10em 0 #b090f8, 5em 10em 0 #b090f8, 6em 10em 0 #f8f8f8, 7em 10em 0 #f8f8f8, 8em 10em 0 #b090f8, 9em 10em 0 #f8f8f8, 10em 10em 0 #282828, 11em 10em 0 #f8f8f8, 12em 10em 0 #282828, 13em 10em 0 #282828, 14em 10em 0 #282828, 1em 11em 0 #282828, 2em 11em 0 #282828, 3em 11em 0 #b090f8, 4em 11em 0 #b090f8, 5em 11em 0 #f8f8f8, 6em 11em 0 #f8f8f8, 7em 11em 0 #f8f8f8, 8em 11em 0 #f8f8f8, 9em 11em 0 #f8f8f8, 10em 11em 0 #f8f8f8, 11em 11em 0 #282828, 12em 11em 0 #b06028, 13em 11em 0 #f0a068, 14em 11em 0 #282828, 0 12em 0 #282828, 1em 12em 0 #b090f8, 2em 12em 0 #b090f8, 3em 12em 0 #282828, 4em 12em 0 #282828, 5em 12em 0 #f8f8f8, 6em 12em 0 #f8f8f8, 7em 12em 0 #b090f8, 8em 12em 0 #f8f8f8, 9em 12em 0 #f8f8f8, 10em 12em 0 #f8f8f8, 11em 12em 0 #b090f8, 12em 12em 0 #282828, 13em 12em 0 #f0a068, 14em 12em 0 #f0a068, 15em 12em 0 #282828, 0 13em 0 #282828, 1em 13em 0 #282828, 2em 13em 0 #282828, 3em 13em 0 #f8f8f8, 4em 13em 0 #f8f8f8, 5em 13em 0 #f8f8f8, 6em 13em 0 #b090f8, 7em 13em 0 #282828, 8em 13em 0 #f8f8f8, 9em 13em 0 #f8f8f8, 10em 13em 0 #b090f8, 11em 13em 0 #282828, 12em 13em 0 #d86060, 13em 13em 0 #282828, 14em 13em 0 #282828, 0 14em 0 #282828, 1em 14em 0 #b090f8, 2em 14em 0 #f8f8f8, 3em 14em 0 #f8f8f8, 4em 14em 0 #b090f8, 5em 14em 0 #b090f8, 6em 14em 0 #282828, 7em 14em 0 #b090f8, 8em 14em 0 #f8f8f8, 9em 14em 0 #f8f8f8, 10em 14em 0 #b090f8, 11em 14em 0 #282828, 12em 14em 0 #d86060, 13em 14em 0 #d86060, 14em 14em 0 #282828, 0 15em 0 #282828, 1em 15em 0 #282828, 2em 15em 0 #b090f8, 3em 15em 0 #b090f8, 4em 15em 0 #b090f8, 5em 15em 0 #282828, 6em 15em 0 #b090f8, 7em 15em 0 #f8f8f8, 8em 15em 0 #f8f8f8, 9em 15em 0 #f8f8f8, 10em 15em 0 #b090f8, 11em 15em 0 #b090f8, 12em 15em 0 #282828, 13em 15em 0 #282828, 1em 16em 0 #282828, 2em 16em 0 #282828, 3em 16em 0 #282828, 4em 16em 0 #282828, 5em 16em 0 #282828, 6em 16em 0 #b090f8, 7em 16em 0 #f8f8f8, 8em 16em 0 #f8f8f8, 9em 16em 0 #b090f8, 10em 16em 0 #b090f8, 11em 16em 0 #b090f8, 12em 16em 0 #282828, 13em 16em 0 #282828, 1em 17em 0 #282828, 2em 17em 0 #b06028, 3em 17em 0 #282828, 4em 17em 0 #282828, 5em 17em 0 #b090f8, 6em 17em 0 #b090f8, 7em 17em 0 #b090f8, 8em 17em 0 #b090f8, 9em 17em 0 #b090f8, 10em 17em 0 #282828, 11em 17em 0 #282828, 12em 17em 0 #f0a068, 13em 17em 0 #f0a068, 14em 17em 0 #282828, 2em 18em 0 #282828, 4em 18em 0 #282828, 5em 18em 0 #282828, 6em 18em 0 #282828, 7em 18em 0 #282828, 8em 18em 0 #282828, 9em 18em 0 #282828, 10em 18em 0 #282828, 11em 18em 0 #b06028, 12em 18em 0 #282828, 13em 18em 0 #282828, 10em 19em 0 #282828, 11em 19em 0 #282828, 12em 19em 0 #282828;
}
50% {
box-shadow: 10em 4em 0 #282828, 11em 4em 0 #282828, 12em 4em 0 #282828, 6em 5em 0 #282828, 7em 5em 0 #282828, 8em 5em 0 #282828, 9em 5em 0 #282828, 10em 5em 0 #d86060, 11em 5em 0 #d86060, 12em 5em 0 #d86060, 13em 5em 0 #282828, 3em 6em 0 #282828, 4em 6em 0 #282828, 5em 6em 0 #282828, 6em 6em 0 #b090f8, 7em 6em 0 #b090f8, 8em 6em 0 #b090f8, 9em 6em 0 #282828, 10em 6em 0 #282828, 11em 6em 0 #282828, 12em 6em 0 #d86060, 13em 6em 0 #d86060, 14em 6em 0 #282828, 2em 7em 0 #282828, 3em 7em 0 #f8f8f8, 4em 7em 0 #f8f8f8, 5em 7em 0 #282828, 6em 7em 0 #282828, 7em 7em 0 #b090f8, 8em 7em 0 #282828, 9em 7em 0 #b090f8, 10em 7em 0 #b090f8, 11em 7em 0 #f8f8f8, 12em 7em 0 #282828, 13em 7em 0 #d86060, 14em 7em 0 #282828, 2em 8em 0 #282828, 3em 8em 0 #f8f8f8, 4em 8em 0 #f8f8f8, 5em 8em 0 #f8f8f8, 6em 8em 0 #282828, 7em 8em 0 #282828, 8em 8em 0 #b090f8, 9em 8em 0 #b090f8, 10em 8em 0 #f8f8f8, 11em 8em 0 #f8f8f8, 12em 8em 0 #f8f8f8, 13em 8em 0 #282828, 14em 8em 0 #282828, 2em 9em 0 #282828, 3em 9em 0 #b090f8, 4em 9em 0 #b090f8, 5em 9em 0 #f8f8f8, 6em 9em 0 #f8f8f8, 7em 9em 0 #282828, 8em 9em 0 #b090f8, 9em 9em 0 #f8f8f8, 10em 9em 0 #282828, 11em 9em 0 #f8f8f8, 12em 9em 0 #f8f8f8, 13em 9em 0 #f8f8f8, 14em 9em 0 #282828, 1em 10em 0 #282828, 2em 10em 0 #f8f8f8, 3em 10em 0 #282828, 4em 10em 0 #b090f8, 5em 10em 0 #b090f8, 6em 10em 0 #f8f8f8, 7em 10em 0 #f8f8f8, 8em 10em 0 #b090f8, 9em 10em 0 #f8f8f8, 10em 10em 0 #282828, 11em 10em 0 #f8f8f8, 12em 10em 0 #282828, 13em 10em 0 #282828, 14em 10em 0 #282828, 1em 11em 0 #282828, 2em 11em 0 #b090f8, 3em 11em 0 #f8f8f8, 4em 11em 0 #282828, 5em 11em 0 #282828, 6em 11em 0 #b090f8, 7em 11em 0 #f8f8f8, 8em 11em 0 #f8f8f8, 9em 11em 0 #f8f8f8, 10em 11em 0 #f8f8f8, 11em 11em 0 #282828, 12em 11em 0 #b06028, 13em 11em 0 #f0a068, 14em 11em 0 #282828, 1em 12em 0 #282828, 2em 12em 0 #b090f8, 3em 12em 0 #f8f8f8, 4em 12em 0 #f8f8f8, 5em 12em 0 #f8f8f8, 6em 12em 0 #f8f8f8, 7em 12em 0 #b090f8, 8em 12em 0 #f8f8f8, 9em 12em 0 #f8f8f8, 10em 12em 0 #f8f8f8, 11em 12em 0 #b090f8, 12em 12em 0 #282828, 13em 12em 0 #f0a068, 14em 12em 0 #f0a068, 15em 12em 0 #282828, 1em 13em 0 #282828, 2em 13em 0 #282828, 3em 13em 0 #b090f8, 4em 13em 0 #f8f8f8, 5em 13em 0 #f8f8f8, 6em 13em 0 #b090f8, 7em 13em 0 #282828, 8em 13em 0 #f8f8f8, 9em 13em 0 #f8f8f8, 10em 13em 0 #b090f8, 11em 13em 0 #282828, 12em 13em 0 #d86060, 13em 13em 0 #282828, 14em 13em 0 #282828, 1em 14em 0 #282828, 2em 14em 0 #b090f8, 3em 14em 0 #282828, 4em 14em 0 #b090f8, 5em 14em 0 #f8f8f8, 6em 14em 0 #282828, 7em 14em 0 #f8f8f8, 8em 14em 0 #f8f8f8, 9em 14em 0 #f8f8f8, 10em 14em 0 #b090f8, 11em 14em 0 #282828, 12em 14em 0 #d86060, 13em 14em 0 #d86060, 14em 14em 0 #282828, 2em 15em 0 #282828, 3em 15em 0 #b090f8, 4em 15em 0 #b090f8, 5em 15em 0 #b090f8, 6em 15em 0 #282828, 7em 15em 0 #f8f8f8, 8em 15em 0 #f8f8f8, 9em 15em 0 #f8f8f8, 10em 15em 0 #b090f8, 11em 15em 0 #b090f8, 12em 15em 0 #282828, 13em 15em 0 #282828, 2em 16em 0 #282828, 3em 16em 0 #b090f8, 4em 16em 0 #282828, 5em 16em 0 #282828, 6em 16em 0 #b06028, 7em 16em 0 #282828, 8em 16em 0 #f8f8f8, 9em 16em 0 #b090f8, 10em 16em 0 #b090f8, 11em 16em 0 #b090f8, 12em 16em 0 #282828, 3em 17em 0 #282828, 4em 17em 0 #b06028, 5em 17em 0 #b06028, 6em 17em 0 #f0a068, 7em 17em 0 #282828, 8em 17em 0 #b090f8, 9em 17em 0 #b090f8, 10em 17em 0 #282828, 11em 17em 0 #282828, 3em 18em 0 #282828, 4em 18em 0 #282828, 5em 18em 0 #b06028, 6em 18em 0 #f0a068, 7em 18em 0 #f0a068, 8em 18em 0 #282828, 9em 18em 0 #282828, 3em 19em 0 #282828, 4em 19em 0 #282828, 5em 19em 0 #282828, 6em 19em 0 #282828, 7em 19em 0 #282828;
}
}
/* 兼容小屏幕直接隐藏 */
@media screen and (max-width: 1108px) {
.sceneji {
display: none;
}
}
/* 全站右下角像素鸡 结束*/
<!--像素鸡--> <div id="sceneji" class="sceneji"> <!-- <div class="grass grass--1"></div> <div class="grass grass--2"></div> --> <div class="flowerji"></div> <div class="linkji"></div> <!--像素鸡-->
在css的代码中：
.sceneji {
font-size: 3px;
position: fixed;
width: 100%;
max-width: 75em;
height: 60em;
right: 7px;
bottom: -51px;
z-index: 99;
}
.grassji {
position: absolute;
}
[/content_hide]
这部分是为了适配B2主题，如果你用的不是B2主题，可以修改相关样式值，自己调整一下显示位置。
4张svip动态会员图标，好像是之前B2官网的人分享的，4张图片20多兆。
由于我网站小水管，图片加载不动，所以用不了。
[content_hide]
[/content_hide]
