css html文字的跑马灯(流光)特效-kb88凯时官网登录

时间：2019-10-05

阅读：

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

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

先看效果图：

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

html代码


    
        免费资源网：http://www.freexyz.cn

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 html ps制作艺术文字 ps制作立体文字

css中的position属性可以用来设置元素在页面中的定位方式，其中有一个值叫做fixed。fixed值指定的元素会被固定在页面的某个位置，不会随着页面的滚动而移动，这就实现了css不随滚

2023-04-21 14:34:52

换行是指在文字或者其他内容到达行末时，自动转到下一行的行为。在网页设计中，正确的换行可以使页面看起来更加舒适和自然。在css中，实现正确的换行需要了解一些原理和技巧。本

2023-04-21 14:34:32

css居中的方法，是网页制作中非常基础的技术之一。无论是居中文字还是图片，都可以通过简单的css代码来实现。下面，我们将介绍几种常用的css居中方法。一、居中一个div要把一个di

2023-04-21 14:34:15

css即层叠样式表，是一种用于描述html文档外观的语言。在网页设计中，css起到了至关重要的作用，可以让网页看起来更加美观、清晰，提高用户体验，使网站更加流行。然而，在实际开发中，很

2023-04-21 14:34:01

html高度设置是网页设计中重要的一部分，它可以让网页以更美观的方式呈现出来。在这篇文章中我们将会讨论html高度设置的基本知识以及如何使用css控制高度。一、html高度设置

2023-04-13 20:51:42

clamp(), max(), 和 min() 函数clamp() 函数的作用是把一个值限制在一个上限和下限之间，当这个值超过最小值和最大值的范围时，在最小值和最大值之间选择一个值使用。它接收三

2022-10-31 20:26:21

理论篇1. box-sizing 属性值有什么作用？用来控制元素的盒子模型的解析模式，默认为content-box context-box：w3c 的标准盒子模型，设置元素的 height/width 属性指的是 content

2022-10-28 22:02:09

将原本的鼠标指针样式，修改成自己想要的效果，并且添加上一些特殊的交互效果。修改鼠标样式首先，第一个问题，我们可以看到，上图中，鼠标指针的样式被修改成了一个圆点：正常而言应该是

2022-06-24 23:07:32

前几天被人问，「如何把元素固定在容器底部」。（本来想直接把 demo 地址给他，结果没找到，那么今天我们来补一下）demo 地址想法&思路如果是页面底部，我们可以直接 position: fixed;b

2022-06-18 22:22:38

前言在平常的样式排版中，我们经常遇到将某个模块隐藏的场景通过css隐藏元素的方法有很多种，它们看起来实现的效果是一致的但实际上每一种方法都有一丝轻微的不同，这些不同决定

2022-06-18 22:22:29

最近做个项目,其中有个样式是换行布局,作为样式渣渣的我一开始不会,只能查资料,然后摆平了它.今天得空了,简要记录一下,方便后面小伙伴布局使用.参考资料 flex-wrap开始样式

2022-06-18 22:22:21

目录背景粘性定位：案例：实现的代码问题探索及项目中的坑背景最近在做项目迁移，因为技术不同，导致某些功能的问题需要手动解决；如何在居位在主体区域底部不随内容而滚动；
ok进入正

2022-06-08 21:58:06

目录介绍演示正文挑选素材发光效果聚集动画融合效果粽子出现结语介绍本期将带给大家的是一个css创意特效——端午加载动画，想法是让粽叶，糯米，红枣绕圆旋转，然后聚集

2022-06-08 21:57:48

目录一、前言二、控制继承1.开启继承2.重设几乎所有属性值三、拓展：常见继承属性与非继承属性1.常见可继承属性2.常见不可继承属性四、总结一、前言我们知道，css 属性有可继承

2022-06-08 21:56:50

目录一、理解 !important 与优先级无关二、什么时候可以使用 !important 规则1.覆盖内联样式2.覆盖优先级很高的选择器三、禁用 !important 的经验法则一、理解 !important

2022-06-08 21:56:38

目录使用css 实现三角形、多边形等不规则形状flex布局下实现文本省略号展示效果实现自定义dash虚线分割线使用重复性渐变实现分割线总结前言：css是一门神奇的语言，用的好可以

2022-06-08 21:56:28

在css3中可以实现缩放效果的属性在css3中，可以利用transform属性配合scale()函数实现元素缩放效果。transform 属性向元素应用 2d 或 3d 转换。该属性允许我们对元素进行旋转

2022-06-08 21:09:35

css3中rotate3d方法怎么用rotate3d() css 函数定义一个变换，它将元素围绕固定轴移动而不使其变形。运动量由指定的角度定义; 如果为正，运动将为顺时针，如果为负，则为逆时针。在

2022-06-08 21:09:20

css3中calc怎么设置除法calc() 函数用于动态计算长度值。需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；任何长度值都可以使用calc()函数进行计算；c

2022-06-07 11:41:28

需求介绍在页面上，有时会需要展示一些透明背景的图片，为了展示其透明的背景，通常会像ps一样，使用黑白相间的格子组成背景，从而告诉用户，这是一张透明的图片。效果预览实现原理1.利

2022-05-30 21:34:57

目录text-shadow 没有文字阴影text-shadow 语法悬停效果#1悬停效果#2悬停效果#3悬停效果#4最后本文将专注于使用 css text-shadow 属性来实现有趣的鼠标悬停效果，但是实际上

2022-05-28 21:19:07

用户在浏览网站时经常会看到左侧有一种宣传栏，它不会随着鼠标滚动而不被用户看到，它会始终以页面的中心为参照物始终保持在左侧一个固定的位置，今天我们来做一下这个小例子，让我

2022-05-14 09:58:49

在html中实现两个div并排显示，方法如下：方法1：设置float浮动对需要并排显示的div设置样式：style="float:left;"

div1

方法2：设置div为行内样式对需

2022-05-14 09:58:40

这是一道面试题，你有多少种办法呢？这里我们假设左边名为 left，宽度为 200 px，右边名为 right。即默认.left { width: 200px;}我的理解分四大类 flex 布局需

2022-05-12 22:08:26

预期是写一个如下所示的布局内容：即有一个固定高度的外部容器，顶部的header已知高度，在header占据了固定高度后，剩下的都分给body部分。因此采用flex布局，header设置flex-shrink

2022-05-10 21:40:29

可以通过设置元素的pointer-events属性设置为none，来实现元素不可点击。此方法是通过设置元素的鼠标事件失效来实现元素不可点击。pointer-events: none;css pointer-events

2022-05-10 14:31:28

目录一、背景二、什么是css原子化，又有什么用？1.含义分析2.方案选择三、开发体验可行性优点1.开发的效率和舒适2.灵活和可维护缺点1.仍存在的上手门槛2. 小程序使用windicss受

2022-04-27 21:48:05

clip-path属性创建一个只有元素的部分区域，可以显示的剪切区域。区域内的部分显示，区域外的隐藏。

使用元素的伪

2022-04-20 22:14:39

一：高度塌陷问题在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。但是当为子元素设置浮动以后，子元素会完全脱离文档流，此时将会导致子元素无法撑起

2022-04-16 11:00:25

clear在css中的用法是什么css中clear的作用是清除元素的浮动效果。clear属性指定段落的左侧或右侧不允许浮动的元素。在 css1 和 css2 中，这是通过自动为清除元素（即设置了 cl

2022-04-16 10:51:59

这段时间一直在研究关于php过滤html标签的问题，也写过两三篇此类的博文。今天再来一篇，php过滤html标签的几种方法。strip_tags()函数过滤关于php中strip_tags()前几天写了一

2019-10-04 09:30:11

在php中经常遇到这种情况，需要对一段含有html标签代码的字符串进行过滤，去掉里面的html标签。针对这种情况，php给我们提供了一个预设函数strip_tags()，可以很方便的对字符串的ht

2019-10-04 09:26:47

在前端网页设计时，离不开一些动态事件的交互，比如提交数据，登录，注册等等。这事件一般都需要通过html onclick事件的调用，这篇文章重点介绍一下 onclick事件的定义与用法onclick

2019-10-04 09:23:16

今天在写一个关于 html 中 select 下拉元素选择的动态事件时，发现如果使用 javascript 中的 click 事件的话，会被执行两次。网上查了一下资料，发现 select 元素下拉选中事件并

2019-10-03 15:01:17

在html页面的div布局中，如果我们把div的宽度当做一个计算公式，让浏览器去自动去计算它们的值是不是很有意思呢？那么今天就说一下，css中的一个关于计算的函数 calc() calc() 函数

2019-09-28 23:30:32

在网站web前端设计中，如果想加快网页的加载速度，减少网站访客的等待时间，经常要对html页面文件，css文件，js文件，图片文件等静态文件进行压缩，也有的会使用cdn一类的加速服务。而今

2019-09-28 23:29:41

前两天发布了一篇关于利用html5在手机端进行拨号和发送短信的教程，今天再说一下利用html5在手机端调用摄像头以及录音的教程html5 调用手机摄像头在html5中可以利用type类型

2019-09-28 23:25:51

今天有一童鞋过来问如何在html页面中，添加拨打电话号码的的功能。我个人没做过此类的功能，也有点疑惑，就百度了一下查了点资料，发现非常的简单，写个教程记录一下。html拨打电话的

2019-09-28 23:23:55

由于项目要求，需要利用php做一个获取远程页面html状态码的功能，用来判断远程页面是否可以访问，就类似那种html页面状态码检测工具一样。整理了一下代码，贴出来。有需要的可以拿

2019-09-28 23:00:05

我们通常在做布局时父层是不设置高度的，我们一般情况是希望父层的高度是由子层里面的内容来决定的。但是有时候我们要给子层内容做浮动，这样的话父层高度不会被撑开，即父层的高

2019-09-18 17:07:56

2020-10-16

2019-11-10

2018-08-13

2020-03-21

2019-10-05

2018-08-14

2020-10-14

2019-11-10

2019-09-18

2018-10-20

css html文字的跑马灯(流光)特效-kb88凯时官网登录

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

代码实现原理：

热点内容

免费资源网

在线工具

扫一扫随时看

本站下载频道