给logo增加扫光效果
测试为x3.5 默认模板 x3.4未测试，总的来说效果并不是很满意，有时间慢慢调整<br />1、深色顶部或者logo<br />/template/default/common/header.htm<br />查找</head><br />上面添加<br /><br /><ol><li><style><br /><li> /* 深色背景 */<br /><li> /* Logo 扫光特效 */<br /><li> .hdc h2 a {<br /><li> overflow: hidden;<br /><li> display: block;<br /><li> position: relative; <br /><li> }<br /><li><br /><li> .hdc h2 a:before {<br /><li> content: "";<br /><li> position: absolute;<br /><li> top: -50px;<br /><li> left: -100%;<br /><li> width: 200%; /* 增加宽度，确保扫光覆盖范围 */<br /><li> height: 20px; /* 光带的高度 */<br /><li> background: linear-gradient(<br /><li> 90deg,<br /><li> rgba(255, 255, 255, 0) 0%,<br /><li> rgba(255, 255, 255, 0.3) 25%, /* 左侧淡化，降低亮度 */<br /><li> rgba(255, 255, 255, 0.5) 50%, /* 中间高亮，降低亮度 */<br /><li> rgba(255, 255, 255, 0.3) 75%, /* 右侧淡化，降低亮度 */<br /><li> rgba(255, 255, 255, 0) 100% /* 完全透明 */<br /><li> );<br /><li> transform: rotate(-45deg);<br /><li> animation: flashlights 5s ease-in-out infinite; /* 5s 控制扫光速度，数值越大越慢 */<br /><li> z-index: 2; /* 确保伪元素在 Logo 上方 */<br /><li> filter: blur(10px); /* 添加模糊效果，使光线更柔和 */<br /><li> }<br /><li><br /><li> @keyframes flashlights {<br /><li> 0% { left: -100%; top: -50px; }<br /><li> 100% { left: 100%; top: 100px; }<br /><li> }<br /><li><br /><li></style></ol><br />浅色背景<br /><ol><li><style><br /><li> /* 有logo增加阴影效果 */<br /><li> /* Logo 扫光特效 */<br /><li> .hdc h2 a {<br /><li> overflow: hidden;<br /><li> display: block;<br /><li> position: relative; <br /><li> }<br /><li><br /><li> .hdc h2 a:before {<br /><li> content: "";<br /><li> position: absolute;<br /><li> top: -50px;<br /><li> left: -100%;<br /><li> width: 200%; /* 增加宽度，确保扫光覆盖范围 */<br /><li> height: 20px; /* 光带的高度 */<br /><li> background: linear-gradient(<br /><li> 90deg,<br /><li> rgba(255, 255, 255, 0) 0%,<br /><li> rgba(255, 255, 255, 0.6) 25%, /* 左侧淡化 */<br /><li> rgba(255, 255, 255, 0.9) 50%, /* 中间高亮 */<br /><li> rgba(255, 255, 255, 0.6) 75%, /* 右侧淡化 */<br /><li> rgba(255, 255, 255, 0) 100% /* 完全透明 */<br /><li> );<br /><li> transform: rotate(-45deg);<br /><li> animation: flashlights 2.5s ease-in-out infinite; /* 2.5s 控制扫光速度，数字越大越慢 */<br /><li> z-index: 2; /* 确保伪元素在 Logo 上方 */<br /><li> filter: blur(10px); /* 添加模糊效果，使光线更柔和 */<br /><li> }<br /><li><br /><li> @keyframes flashlights {<br /><li> 0% { left: -100%; top: -50px; }<br /><li> 100% { left: 100%; top: 100px; }<br /><li> }<br /><li>/* 为 Logo 添加阴影 */<br /><li> .hdc h2 a img {<br /><li> position: relative; /* 确保阴影生效 */<br /><li> filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.3)); /* 添加阴影 */<br /><li> z-index: 1; /* 确保 Logo 在伪元素下方 */<br /><li> }<br /><li></style></ol><br />扫光速度：调整 animation: flashlights 1.5s ease-in 1s infinite; 中的 1.5s，数值越大速度越慢。<br /><br />光带亮度：调整 rgba(255, 255, 255, 0.8) 和 rgba(255, 255, 255, 1) 中的数值，控制光带的亮度。<br /><br />雾化效果：调整 box-shadow: 0 0 10px rgba(255, 255, 255, 0.5); 中的参数，控制雾化的大小和透明度。<br />调整<em>, </em>效果<em>, </em>中的<em>, </em>rgba<em>, </em>测试 把代码 放在 这里也可以 免去修改文件的烦恼<br /><img title="PixPin_2025-01-23_12-48-39.png" id="aimg_34174" aid="34174" src1="static/image/common/none.gif" zoom="https://www.dismall.com/data/attachment/forum/202501/23/125011czt87661x0wq65tw.png" src="https://www.dismall.com/data/attachment/forum/202501/23/125011czt87661x0wq65tw.png" class="zoom" onclick="zoom(this, this.src, 0, 0, 0)" width="600" inpost="1" onmouseover="showMenu({'ctrlid':this.id,'pos':'12'})" /><br /> <br />不清楚为什么，我这里添加的任何代码都会完完整整的在首页右下角显示出来<br />也懒得去查原因 这个挺不错的啊，感谢分享 这东西不错，本地测试了下，有效果。<br />但这东西在默认模板上显示不是很特别，logo图片小了点。<br />我网站是透明底，主题列表页面板块名称那里倒是有一个背景图片，我想弄到这里。<br />怎么设置呢，指点一下。<br /><br />我看了半天代码，这代码的特效怎么就跟logo挂上钩了呢。主要引用logo代码是哪个？ <br />width: 200%; /* 增加宽度，确保扫光覆盖范围 */<br /><br /> height: 20px; /* 光带的高度 */<br />修改数值， <br />你说的是修改logo，那怎么运用到主题列表页面，板块名称那里。我修改了板块名称那个地方，有个背景图，长的。应用到那里，是乎效果更明显。 搞晕了头，总算是搞定。借作者的代码，分享下。<br /><br />测试主题列表页版块信息，默认模板是没有背景图片的。如果目前模板或修改后，添加了背景图片，让背景图片有扫光效果。<br />操作：<br />1，在CSS文件里查找背景图片的样式名称，替换logo样式名称：hdc h2 a （楼主的扫光代码）。<br />2，把修改过的代码放到目前模板/forum/forumdisplay.htm或php文件。<br /> 例：背景标签<div class="b-bg"></div><br /> 下面即可。<br /><br />最后细节就根据各位喜好去调节了。<br /><br /><br />
頁:
[1]