html文本框中加入跑马灯,CSS html文字的跑马灯(流光)特效

在网页的合适位置，放一些带有跑马灯特效的文字肯定会吸引访客的眼球的。今天这篇博文就写一写利用纯CSS来实现网页中文字跑马灯特效的案例。

在CSS3出现以前，如果要制作一段流光文字必须借助图片，但现在我们直接可以利用CSS代码来实现了，省时又少力，还能加快前端网页的加载速，省资源啊。先看效果图：

CSS3实现文字跑马灯(流光)效果

HTML代码

飞鸟慕鱼博客：http://www.feiniaomy.com

CSS代码

body {

margin: 0;

padding: 0;

background-color: #2f2424;

}

div {

margin: 400px auto;

font-size: 40px;

text-align: center;

}

p {

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;

}

代码实现原理：

以上代码中，使用了CSS中的 animation 属性，linear-gradient()函数，以及 @keyframes 规则来实现的

1、animation 属性

animation：是CSS3中新增的属性，它可以制作出多种酷炫的动画效果，如果对flash有一定的了解，那这个属性就会很容易学习。

2、@keyframes 规则。

@keyframes：能够将一套 CSS 样式逐渐变化为另一套样式，来实现动画的效果。

0% 是动画的开始时间，100% 动画的结束时间。

3、linear-gradient() 函数

linear-gradient() 函数用于创建一个线性渐变的 "图像"。

CSS 跑马灯(流光)字体特效代码示例平台 : 所有平台 | 分类 : 编程开发 | 大小 : 0.1 MB

html文本框中加入跑马灯,CSS html文字的跑马灯(流光)特效相关推荐

css实现文本框中内容超出长度显示省略号，鼠标移入悬浮显示全部内容
css样式: width: 300px;text-overflow: ellipsis;overflow: hidden; 此时的设置可以完美实现文本框中的内容超长显示为省略号:但是想知道全部内容是不 ...
通过css控制HTML文本框中的文字垂直居中
当定义了 Text 的 height 属性时,在 Text 中输入的文字都不是垂直居中的,不过你可以添加CSS来控制它,让输入的文字垂直居中,使网页更完美. 复制代码代码如下: <html&g ...
html 文本框无法输入,无法在HTML文本框中输入任何东西
所以我试图创建一个文本框(名为SearchUp),我可以在其中搜索名称.然而,它不允许我输入任何奇怪的东西,因为我的所有其他文本框都可以工作.我希望有人能够帮助我解决这个问题.谢谢.无法在HTML文本 ...
[html] 怎样在文本框中禁用中文输入法？
[html] 怎样在文本框中禁用中文输入法? 用文本框的 ime-mode css 属性松开键时检查文本框的的值,只保留 Unicode 编码在 0 - 255 的字符把所有双字节字符替换为空把中文字 ...
要在textarea文本框中粘贴图片怎么办？
项目需求: 有一条描述信息(文字 + 图片),点击编辑,文本框中显示描述信息,并且可以对描述信息做出修改拆解需求: 文本框里要能显示预设的值(文字 + 图片) 文本框里还要能支持粘贴文字与图片实际 ...
Firefox/Chrome下flash的wmode参数设为opaque或transparent时输入文本框中无法输入中文汉字的解决方法
一.前言这段时间做个项目,要涉及到flash开发.真悲催,之前没有接触过flash开发,于是找个哥们临时教了一下Adobe Flash CS5 的使用方法,感觉还蛮简单,所见即所得,和MFC下的开发 ...
Firefox/Chrome下flash的wmode参数设为opaque或transparent时输入文本框中无法输入中文汉字的解决方法...
这段时间做个项目,要涉及到flash开发.真悲催,之前没有接触过flash开发,于是找个哥们临时教了一下Adobe Flash CS5 的使用方法,感觉还蛮简单,所见即所得,和MFC下的开发有点像,渐 ...
html文本框左移动怎么设css,html---文本框样式；
一.一个单行文本框的例子您的姓名: 您的E_mail: 输入口令: 二.检验用户输入的信息三.制作一个留言簿留言簿姓名: E_mail: 留言 html文本框参考样式输入框景背景透明: ...
php怎么把文本框的边框去掉,如何在文本框中设置清除按钮
有时我们会看到在文本框中的右边会有一个圆圈里面有个×,这其实就是清除按钮,那么如何在文本框中来实现这个清除按钮呢?接下来的这篇文章就来给大家介绍关于在文本框中设置清除按钮的方法. 我们先来看一下设置清 ...
java隐含文本框_Linux_文本框中密码的隐藏与显示，　HTML文本框中，如果设定为密 - phpStudy...
文本框中密码的隐藏与显示 HTML文本框中,如果设定为密码框,则输入的值显示为"*",如果在后台管理中,需要相询密码,则无法及时掌握密码值. 使用Javascrtip控制,则能很快 ...

html文本框中加入跑马灯,CSS html文字的跑马灯(流光)特效

html文本框中加入跑马灯,CSS html文字的跑马灯(流光)特效相关推荐

最新文章

热门文章