为文字或者边框添加七彩变换效果

最新推荐文章于 2021-06-19 12:54:24 发布
最新推荐文章于 2021-06-19 12:54:24 发布
阅读量5k 收藏 6
点赞数 1
分类专栏： html小技巧 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/OneBlock/article/details/88996386
版权

之前的效果是这样
在这里插入图片描述
加了之后效果是这样
在这里插入图片描述在这里插入图片描述
因为颜色是变化的，没去截动态图。
大致代码利用的css，没用js，不说了代码如下

<style>
        .font {
            animation: color_change 10000ms ease-out infinite alternate;
            font-size: 50px;
            color: white;
        }
        @keyframes color_change {
            0% {
                border-color: red;
                text-shadow: 0 0 10px rgba(255,0,0,0.6),  0 0 10px rgba(255,0,0,0.4), 0 1px 0 rgba(255,0,0,0.2);
                box-shadow: 0 0 10px rgba(255,0,0,0.6),  0 0 10px rgba(255,0,0,0.4), 0 1px 0 rgba(255,0,0,0.2);
            }
            5% {
                border-color: red;
                text-shadow: 0 0 10px rgba(255,64,0,0.6),  0 0 10px rgba(255,64,0,0.4), 0 1px 0 rgba(255,64,0,0.2);
                box-shadow: 0 0 10px rgba(255,64,0,0.6),  0 0 10px rgba(255,64,0,0.4), 0 1px 0 rgba(255,64,0,0.2);
            }
            10% {
                border-color: red;
                text-shadow: 0 0 10px rgba(255,128,0,0.6),  0 0 10px rgba(255,128,0,0.4), 0 1px 0 rgba(255,128,0,0.2);
                box-shadow: 0 0 10px rgba(255,128,0,0.6),  0 0 10px rgba(255,128,0,0.4), 0 1px 0 rgba(255,128,0,0.2);
            }
            15% {
                border-color: red;
                text-shadow: 0 0 10px rgba(255,192,0,0.6),  0 0 10px rgba(255,192,0,0.4), 0 1px 0 rgba(255,192,0,0.2);
                box-shadow: 0 0 10px rgba(255,192,0,0.6),  0 0 10px rgba(255,192,0,0.4), 0 1px 0 rgba(255,192,0,0.2);
            }
            20% {
                border-color: red;
                text-shadow: 0 0 10px rgba(255,255,0,0.6),  0 0 10px rgba(255,255,0,0.4), 0 1px 0 rgba(255,255,0,0.2);
                box-shadow: 0 0 10px rgba(255,255,0,0.6),  0 0 10px rgba(255,255,0,0.4), 0 1px 0 rgba(255,255,0,0.2);
            }
            25% {
                border-color: red;
                text-shadow: 0 0 10px rgba(192,255,0,0.6),  0 0 10px rgba(192,255,0,0.4), 0 1px 0 rgba(192,255,0,0.2);
                box-shadow: 0 0 10px rgba(192,255,0,0.6),  0 0 10px rgba(192,255,0,0.4), 0 1px 0 rgba(192,255,0,0.2);
            }
            30% {
                border-color: red;
                text-shadow: 0 0 10px rgba(128,255,0,0.6),  0 0 10px rgba(128,255,0,0.4), 0 1px 0 rgba(128,255,0,0.2);
                box-shadow: 0 0 10px rgba(128,255,0,0.6),  0 0 10px rgba(128,255,0,0.4), 0 1px 0 rgba(128,255,0,0.2);
            }
            35% {
                border-color: red;
                text-shadow: 0 0 10px rgba(64,255,0,0.6),  0 0 10px rgba(64,255,0,0.4), 0 1px 0 rgba(64,255,0,0.2);
                box-shadow: 0 0 10px rgba(64,255,0,0.6),  0 0 10px rgba(64,255,0,0.4), 0 1px 0 rgba(64,255,0,0.2);
            }
            40% {
                border-color: red;
                text-shadow: 0 0 10px rgba(0,255,0,0.6),  0 0 10px rgba(0,255,0,0.4), 0 1px 0 rgba(0,255,0,0.2);
                box-shadow: 0 0 10px rgba(0,255,0,0.6),  0 0 10px rgba(0,255,0,0.4), 0 1px 0 rgba(0,255,0,0.2);
            }
            45% {
                border-color: red;
                text-shadow: 0 0 10px rgba(0,255,64,0.6),  0 0 10px rgba(0,255,64,0.4), 0 1px 0 rgba(0,255,64,0.2);
                box-shadow: 0 0 10px rgba(0,255,64,0.6),  0 0 10px rgba(0,255,64,0.4), 0 1px 0 rgba(0,255,64,0.2);
            }
            50% {
                border-color: red;
                text-shadow: 0 0 10px rgba(0,255,128,0.6),  0 0 10px rgba(0,255,128,0.4), 0 1px 0 rgba(0,255,128,0.2);
                box-shadow: 0 0 10px rgba(0,255,128,0.6),  0 0 10px rgba(0,255,128,0.4), 0 1px 0 rgba(0,255,128,0.2);
            }
            55% {
                border-color: red;
                text-shadow: 0 0 10px rgba(0,255,192,0.6),  0 0 10px rgba(0,255,192,0.4), 0 1px 0 rgba(0,255,192,0.2);
                box-shadow: 0 0 10px rgba(0,255,192,0.6),  0 0 10px rgba(0,255,192,0.4), 0 1px 0 rgba(0,255,192,0.2);
            }
            60% {
                border-color: red;
                text-shadow: 0 0 10px rgba(0,255,255,0.6),  0 0 10px rgba(0,255,255,0.4), 0 1px 0 rgba(0,255,255,0.2);
                box-shadow: 0 0 10px rgba(0,255,255,0.6),  0 0 10px rgba(0,255,255,0.4), 0 1px 0 rgba(0,255,255,0.2);
            }
            65% {
                border-color: red;
                text-shadow: 0 0 10px rgba(0,192,255,0.6),  0 0 10px rgba(0,192,255,0.4), 0 1px 0 rgba(0,192,255,0.2);
                box-shadow: 0 0 10px rgba(0,192,255,0.6),  0 0 10px rgba(0,192,255,0.4), 0 1px 0 rgba(0,192,255,0.2);
            }
            70% {
                border-color: red;
                text-shadow: 0 0 10px rgba(0,128,255,0.6),  0 0 10px rgba(0,128,255,0.4), 0 1px 0 rgba(0,128,255,0.2);
                box-shadow: 0 0 10px rgba(0,128,255,0.6),  0 0 10px rgba(0,128,255,0.4), 0 1px 0 rgba(0,128,255,0.2);
            }
            75% {
                border-color: red;
                text-shadow: 0 0 10px rgba(0,64,255,0.6),  0 0 10px rgba(0,64,255,0.4), 0 1px 0 rgba(0,64,255,0.2);
                box-shadow: 0 0 10px rgba(0,64,255,0.6),  0 0 10px rgba(0,64,255,0.4), 0 1px 0 rgba(0,64,255,0.2);
            }
            80% {
                border-color: red;
                text-shadow: 0 0 10px rgba(0,0,255,0.6),  0 0 10px rgba(0,0,255,0.4), 0 1px 0 rgba(0,0,255,0.2);
                box-shadow: 0 0 10px rgba(0,0,255,0.6),  0 0 10px rgba(0,0,255,0.4), 0 1px 0 rgba(0,0,255,0.2);
            }
            85% {
                border-color: red;
                text-shadow: 0 0 10px rgba(0,0,192,0.6),  0 0 10px rgba(0,0,192,0.4), 0 1px 0 rgba(0,0,192,0.2);
                box-shadow: 0 0 10px rgba(0,0,192,0.6),  0 0 10px rgba(0,0,192,0.4), 0 1px 0 rgba(0,0,192,0.2);
            }
            90% {
                border-color: red;
                text-shadow: 0 0 10px rgba(0,0,128,0.6),  0 0 10px rgba(0,0,128,0.4), 0 1px 0 rgba(0,0,128,0.2);
                box-shadow: 0 0 10px rgba(0,0,128,0.6),  0 0 10px rgba(0,0,128,0.4), 0 1px 0 rgba(0,0,128,0.2);
            }
            95% {
                border-color: red;
                text-shadow: 0 0 10px rgba(0,0,64,0.6),  0 0 10px rgba(0,0,64,0.4), 0 1px 0 rgba(0,0,64,0.2);
                box-shadow: 0 0 10px rgba(0,0,64,0.6),  0 0 10px rgba(0,0,64,0.4), 0 1px 0 rgba(0,0,64,0.2);
            }
            100% {
                border-color: red;
                text-shadow: 0 0 10px rgba(0,0,0,0.6),  0 0 10px rgba(0,0,0,0.4), 0 1px 0 rgba(0,0,0,0.2);
                box-shadow: 0 0 10px rgba(0,0,0,0.6),  0 0 10px rgba(0,0,0,0.4), 0 1px 0 rgba(0,0,0,0.2);
            }
        }
    </style>

这个代码有点多，不过颜色变化比较平滑。有种纵向丝滑的感觉
text-shadow这个是文字效果
box-shadow这个是边框特效，可根据实际情况取舍

我不是网监
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
边框加文字效果.html
09-10
div加入一个边框，边框上加入文字，主要作用是表示一个区域，这个区域有一个名称，目前主要使用的标签是标签和的简单用法，文件拿着直接打开即可，不需要另外的编译，直接看到效果
css3 svg文字轮廓边框特效
07-24
3. **CSS3样式**：最后，使用CSS3为`<text>`和`<path>`元素添加样式，比如设置颜色、边框宽度和动画效果。例如： ```css text { fill: transparent; /* 文字填充设为透明 */ stroke: #000; /* 文字边框颜色 */ ...
Linux终端程序用c语言实现改变输出的字的颜色 （转）
sduzh的专栏
10-21 1891
Linux终端程序用c语言实现改变输出的字的颜色   格式: echo "\033[字背景颜色;字体颜色m字符串\033[0m" 例如: echo "\033[41;36m something here \033[0m"  其中41的位置代表底色, 36的位置是代表字的颜色 那些ascii code 是对颜色调用的始末.  \033[ ; m …
css彩色（渐变）文字
weixin_30849591的博客
12-25 1578
css彩色文字也称渐变文字 在张鑫旭博客首页看到这效果，就自己研究了一下。 实现方法加个背景然后在根据文本剪切,再把文本填充为透明色让之前设置的背景颜色显示出来即可。 -webkit-background-clip: text;根据文本剪切 -webkit-text-fill-color: transparent;填充为透明色让之前设置的背景颜色显示出来 css p { ...
JS实现的随机乱撞的彩色圆球特效代码
weixin_30902675的博客
07-24 179
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML5学习第5天[乱撞的球]</title> <style> body{ font-family: 微软雅黑; } body,h1{...
第95天：CSS3 边框、背景和文字效果
lelara的博客
11-25 135
　　1，CSS3边框： border-radius：CSS3圆角边框。在CSS2中添加圆角矩形需要技巧，我们必须为每个圆角使用不同的图片，在CSS3中，创建圆角是非常容易的，在CSS3中，border-radius属性用于创建圆角.border：2px solid; box-shadow：CSS3边框阴影。在CSS3中，box-shadow用于向方框添加阴影.box-shadow：10px 1...
div边框加文字效果
10-09
div边框加文字效果
Html/CSS前端实现文字边框阴影效果
09-27
在这个例子中，`.text-shadow`类的`box-shadow`属性为文字添加了一个外阴影，使得文字看起来像是浮在深蓝色背景之上。 总的来说，通过灵活运用`box-shadow`属性，我们可以创造出各种各样的边框阴影效果，增强网页的...
纯CSS3悬停文字边框动画特效
06-24
在"纯CSS3悬停文字边框动画特效"这个项目中，我们将学习五种不同的边框动画效果，这些效果会在鼠标悬停在文本上时触发，分别是从上、下、左、右以及中间展开。 首先，让我们了解CSS3的关键帧动画（@keyframes）规则...
易语言截图加边框效果
08-20
易语言截图加边框效果源码系统结构:设置窗口信息,取得窗口信息,改变窗口透明度,取窗口矩形, ======窗口程序集1 || ||------_图片框1_鼠标左键被按下 || ||------_图片框1_鼠标左键被放开 |
彩虹字，七彩文字带波浪效果
11-10
挥动的七彩文字再网页上经常可以看到，文字的颜色是不断变化的并产生波浪效果，这样就可以使页面中的文字更加美观
Latex 给一段文字加边框
热门推荐
Learn the hard way
12-15 4万+
\fbox{% \parbox{\textwidth}{% \begin{center} aaa\\ bbb \end{center} }% }
Css实现彩色文字
weixin_43900440的博客
12-14 1175
代码 .style { width: 200rpx; background: repeating-conic-gradient(red 20deg,lightblue 50deg); // 圆周形渐变色 -webkit-background-clip: text; // 兼容 background-clip: text; // 将背景裁剪只剩文字部分 color: transparent; // 透明字体颜色,使背景可以显示 } 效果 ...
html使用js加边框样式,JavaScript怎么给div加边框？
weixin_39959615的博客
06-19 2406
JavaScript怎么给div加边框？下面本篇文章给大家介绍一下使用JavaScript给div加边框的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。JavaScript怎么给div加边框？下面通过示例来大家介绍一下。div文本！！function addBorder(){document.getElementById("div").style.border="thick...
创建交互式shell脚本对话框
weixin_33859504的博客
04-10 833
当你在终端环境下安装新的软件时，你可以经常看到信息对话框弹出，需要你的输入，比如：RHEL/CentOS自带的setup，对话框的类型有密码箱、检查表、菜单等等。他们可以引导你以一种直观的方式输入必要的信息，使用这样的用户友好的对话框的好处是显而易见的。如下图所示： 当你写一个交互式shell脚本，你可以使用这样的对话框来接受用户的输入。whiptail可以在shell脚本中创建基于终端的对...
css 彩色文字
思渝崖
03-30 722
其实就是: 在文案的下面垫一张彩色背景图 文字颜色设置成transparent .text { color: transparent; background-image: url("xxx.jpg"); background-size: cover; background-clip: text; -webkit-background-clip: text; background-r...
css 文字加边框
xiaozhenqi的专栏
10-20 7242
通常我们可以对边框设置宽度（厚度）、边框样式、边框颜色这三个属性与参数。 1）、边框颜色：border-color:#000 2）、边框厚度（宽度）：border-width:1px 使用数字+单位设置边框厚度宽度，如1px(边框厚度宽度为1像素)，边框必须为正数字，大于0的数值。否则设置边框border样式无效。 3）、border边框样式：border-style:solid 边框样
C#控制台实现冒泡排序，变色动画（背景颜色，边框厚度，边框颜色，透明度动画）
qq_43551373的博客
01-09 661
冒泡排序  int[] array = { 25,21,50,41,10}; for (int i = 0; i &lt; array.Length; i++) { for (int j = 0; j &lt; array.Length-1-i; j++) { ...
css 如何让文字标题显示在边框上
神zhi殇的博客
12-26 4074
方法一、 &lt;style&gt; .box{ position:relative; border:1px solid red; } .box::before{ content:attr(title); position:absolute; left:50%; transfor...
为标签边框添加鼠标hover效果
最新发布
05-25
你可以使用CSS中的:hover伪类选择器来为标签边框添加鼠标hover效果。具体方法如下： 1. 为标签设置边框样式，例如： ```css .tag { border: 1px solid gray; padding: 0.5rem; } ``` 2. 使用:hover伪类选择器为...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值