测试为x3.5默认模板,x3.4未测试,总的来说效果并不是很满意,Discuz应用中心这个功能还是收费的,大家可以自己修改代码满足功能。
1、深色顶部或者logo
/template/default/common/header.htm
查找
上面添加
<style>
/* 深色背景 */
/* Logo 扫光特效 */
.hdc h2 a {
overflow: hidden;
display: block;
position: relative;
}
.hdc h2 a:before {
content: "";
position: absolute;
top: -50px;
left: -100%;
width: 200%; /* 增加宽度,确保扫光覆盖范围 */
height: 20px; /* 光带的高度 */
background: linear-gradient(
90deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.3) 25%, /* 左侧淡化,降低亮度 */
rgba(255, 255, 255, 0.5) 50%, /* 中间高亮,降低亮度 */
rgba(255, 255, 255, 0.3) 75%, /* 右侧淡化,降低亮度 */
rgba(255, 255, 255, 0) 100% /* 完全透明 */
);
transform: rotate(-45deg);
animation: flashlights 5s ease-in-out infinite; /* 5s 控制扫光速度,数值越大越慢 */
z-index: 2; /* 确保伪元素在 Logo 上方 */
filter: blur(10px); /* 添加模糊效果,使光线更柔和 */
}
@keyframes flashlights {
0% { left: -100%; top: -50px; }
100% { left: 100%; top: 100px; }
}
</style>
2、浅色背景
<style>
/* 有logo增加阴影效果 */
/* Logo 扫光特效 */
.hdc h2 a {
overflow: hidden;
display: block;
position: relative;
}
.hdc h2 a:before {
content: "";
position: absolute;
top: -50px;
left: -100%;
width: 200%; /* 增加宽度,确保扫光覆盖范围 */
height: 20px; /* 光带的高度 */
background: linear-gradient(
90deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.6) 25%, /* 左侧淡化 */
rgba(255, 255, 255, 0.9) 50%, /* 中间高亮 */
rgba(255, 255, 255, 0.6) 75%, /* 右侧淡化 */
rgba(255, 255, 255, 0) 100% /* 完全透明 */
);
transform: rotate(-45deg);
animation: flashlights 2.5s ease-in-out infinite; /* 2.5s 控制扫光速度,数字越大越慢 */
z-index: 2; /* 确保伪元素在 Logo 上方 */
filter: blur(10px); /* 添加模糊效果,使光线更柔和 */
}
@keyframes flashlights {
0% { left: -100%; top: -50px; }
100% { left: 100%; top: 100px; }
}
/* 为 Logo 添加阴影 */
.hdc h2 a img {
position: relative; /* 确保阴影生效 */
filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.3)); /* 添加阴影 */
z-index: 1; /* 确保 Logo 在伪元素下方 */
}
</style>
扫光速度:调整 animation: flashlights 1.5s ease-in 1s infinite; 中的 1.5s,数值越大速度越慢。
光带亮度:调整 rgba(255, 255, 255, 0.8) 和 rgba(255, 255, 255, 1) 中的数值,控制光带的亮度。
雾化效果:调整 box-shadow: 0 0 10px rgba(255, 255, 255, 0.5); 中的参数,控制雾化的大小和透明度。
也可以把代码放在后台--站点信息--网站第三方统计代码框内,免去修改文件的烦恼。
影子3 年前
发表在:【奇迹教程】item.txt与item.bmd文件介绍(装备属性修改、增加新装备等)PentiumTools工具是一个非常强...