给网站添加渐变闪亮移动通知公告HTML代码 - 陌路人博客

给网站添加渐变闪亮移动通知公告HTML代码-陌路人博客-第1张图片陌路人

陌路人博客(molure.cn)
用心传递快乐,初心不变。

给网站添加渐变闪亮移动通知公告HTML代码

前言

给网站添加渐变闪亮移动通知公告代码,我最近在网上看到别人网站上的头顶字母移动效果不错有很多人问我这个如何做到的,这个我看了一下还挺美观,所以就扒下来了。

演示截图

给网站添加渐变闪亮移动通知公告HTML代码-陌路人博客-第4张图片

<div class="textwidget custom-html-widget">
<style>#nr{font-size:20px;margin: 0;background: -webkit-linear-gradient(left,#ffffff,#ff0000 6.25%,#ff7d00 12.5%,#ffff00 18.75%,#00ff00 25%,#00ffff 31.25%,#0000ff 37.5%,#ff00ff 43.75%,#ffff00 50%,#ff0000 56.25%,#ff7d00 62.5%,#ffff00 68.75%,#00ff00 75%,#00ffff 81.25%,#0000ff 87.5%,#ff00ff 93.75%,#ffff00 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-size: 200% 100%;animation: masked-animation 2s infinite linear;}@keyframes masked-animation {0% {background-position: 0 0;}100% {background-position: -100%, 0;}}</style><div style="background-color:#333;border-radius:25px;box-shadow:0px 0px 5px #f200ff;padding:5px;margin-top:10px;margin-bottom:0px;"><marquee>
<b id="nr">公告:欢迎来到陌路人博客,百度陌路人博客</b> </marquee></div>
</div>


×

感谢您的支持,我们会一直保持!

给网站添加渐变闪亮移动通知公告HTML代码-陌路人博客- 第6张图片
请土豪扫码随意打赏

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

打赏作者
版权所有,转载注意明处:陌路人博客 » 给网站添加渐变闪亮移动通知公告HTML代码
标签: 教程 代码

发表评论

表情

网友评论(0)