子比主题 – 文章后渐变通知栏美化
这是一款给子比主题文章后加一个渐变通知栏的样式美化，这款是虽然腾飞博客借鉴别人站的，不过一看应该就是ai写的，效果还是不错，喜欢的自行部署吧！代码部署
定位：子比主题–>>文章&列表–>>文章页面–>>在文章内容后-插入内容，将下面的代码放里面即可！
<style>
.custom_notice_banner_wrapper_20240712{width:100%;display:flex;flex-direction:column;gap:15px;margin:20px 0;font-family:"PingFang SC","Microsoft YaHei",sans-serif}.custom_notice_banner_20240712{width:100%;height:50px;border-radius:12px;overflow:hidden;position:relative;box-shadow:0 4px 20px rgba(0,0,0,0.15);transition:all 0.4s cubic-bezier(0.175,0.885,0.32,1.275);border:1px solid rgba(255,255,255,0.2)}.custom_notice_banner_20240712:hover{transform:translateY(-3px) scale(1.01);box-shadow:0 8px 25px rgba(0,0,0,0.2);border:1px solid rgba(255,255,255,0.4)}.custom_notice_banner_content_20240712{display:flex;align-items:center;justify-content:center;height:100%;width:100%;position:relative;z-index:5;padding:0 20px}.custom_notice_banner_icon_20240712{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,0.25);backdrop-filter:blur(5px);margin-right:15px;color:white;box-shadow:0 2px 10px rgba(0,0,0,0.1);animation:custom_notice_banner_pulse_20240712 2s infinite}.custom_notice_banner_text_20240712{color:white;font-size:16px;font-weight:500;text-align:center;text-shadow:0 2px 4px rgba(0,0,0,0.2);letter-spacing:1px;background:rgba(255,255,255,0.1);padding:6px 15px;border-radius:20px;backdrop-filter:blur(5px)}.custom_notice_banner_20240712.purple_gradient{background:linear-gradient(-45deg,#9c27b0,#673ab7,#3f51b5,#e040fb,#9c27b0);background-size:400% 400%;animation:custom_notice_banner_gradient_20240712 15s ease infinite}.custom_notice_banner_20240712.orange_gradient{background:linear-gradient(-45deg,#ff9800,#ff5722,#ff4500,#ff9100,#ff9800);background-size:400% 400%;animation:custom_notice_banner_gradient_20240712 15s ease infinite}.custom_notice_banner_20240712.green_gradient{background:linear-gradient(-45deg,#8bc34a,#4caf50,#009688,#00c853,#8bc34a);background-size:400% 400%;animation:custom_notice_banner_gradient_20240712 15s ease infinite}.custom_notice_banner_glow_20240712{position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(255,255,255,0.3) 0%,rgba(255,255,255,0) 70%);opacity:0;z-index:2;animation:custom_notice_banner_glow_20240712 8s infinite}.custom_notice_banner_particles_20240712{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;z-index:3}.custom_notice_banner_particles_20240712::before,.custom_notice_banner_particles_20240712::after{content:"";position:absolute;background:rgba(255,255,255,0.4);border-radius:50%;animation:custom_notice_banner_float_20240712 6s infinite linear}.custom_notice_banner_particles_20240712::before{width:8px;height:8px;top:20%;left:10%;animation-delay:0s;filter:blur(1px)}.custom_notice_banner_particles_20240712::after{width:12px;height:12px;top:60%;left:80%;animation-delay:2s;filter:blur(2px)}.custom_notice_banner_20240712::after{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.3),transparent);z-index:4;animation:custom_notice_banner_shine_20240712 3s infinite}@keyframes custom_notice_banner_gradient_20240712{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}@keyframes custom_notice_banner_shine_20240712{0%{left:-100%}20%{left:100%}100%{left:100%}}@keyframes custom_notice_banner_pulse_20240712{0%{transform:scale(1)}50%{transform:scale(1.1)}100%{transform:scale(1)}}@keyframes custom_notice_banner_glow_20240712{0%{opacity:0;transform:translate(0%,0%)}25%{opacity:0.5}50%{opacity:0;transform:translate(10%,10%)}75%{opacity:0.5}100%{opacity:0;transform:translate(0%,0%)}}@keyframes custom_notice_banner_float_20240712{0%{transform:translateY(0) translateX(0);opacity:0}10%{opacity:1}90%{opacity:1}100%{transform:translateY(-30px) translateX(30px);opacity:0}}@media (max-width:768px){.custom_notice_banner_text_20240712{font-size:14px;padding:5px 10px}.custom_notice_banner_20240712{height:45px}.custom_notice_banner_icon_20240712{width:25px;height:25px;margin-right:10px}}
</style>
<div class="custom_notice_banner_wrapper_20240712">
<div class="custom_notice_banner_20240712 purple_gradient">
<div class="custom_notice_banner_glow_20240712"></div>
<div class="custom_notice_banner_content_20240712">
<div class="custom_notice_banner_icon_20240712">
<svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2">
<path d="M5 12h14M12 5l7 7-7 7"></path>
</svg>
</div>
<span class="custom_notice_banner_text_20240712">查看更多心仪的内容 按Ctrl+D收藏我们</span>
</div>
<div class="custom_notice_banner_particles_20240712"></div>
</div>
<div class="custom_notice_banner_20240712 orange_gradient">
<div class="custom_notice_banner_glow_20240712"></div>
<div class="custom_notice_banner_content_20240712">
<div class="custom_notice_banner_icon_20240712">
<svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="12" cy="12" r="10"></circle>
<path d="M12 8v4M12 16h.01"></path>
</svg>
</div>
<span class="custom_notice_banner_text_20240712">部分内容来自于网络 如有侵权请联系站长删除</span>
</div>
<div class="custom_notice_banner_particles_20240712"></div>
</div>
<div class="custom_notice_banner_20240712 green_gradient">
<div class="custom_notice_banner_glow_20240712"></div>
<div class="custom_notice_banner_content_20240712">
<div class="custom_notice_banner_icon_20240712">
<svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2">
<path d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"></path>
</svg>
</div>
<span class="custom_notice_banner_text_20240712">腾飞博客欢迎你来投稿文章</span>
</div>
<div class="custom_notice_banner_particles_20240712"></div>
</div>
</div>子比主题
页:
[1]