<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>纯CSS3实现动态火车行驶特效</title>
<base target="_blank" />
<!-- <link rel="stylesheet" type="text/css" href="./mytrain.css"> -->
</head>
<style>
#test2 h4 {
display: block;
width: 400px;
height: 200px;
/* 渐变背景 */
background-image: -webkit-linear-gradient(right, #3498db, #f47920 10%, #d71345 20%, #f7acbc 30%,
#ffd400 40%, #3498db 50%, #f47920 60%, #d71345 70%, #f7acbc 80%, #ffd400 90%, #3498db);
color: transparent;/*文字颜色设置为透明 设置为透明的元素还是会占位*/
-webkit-background-clip: text; /*将背景剪切为文字 只展示文字的那块背景*/
background-size: 200% 100%;/*水平方向上背景图片扩展一倍*/
animation: myTest 5s linear infinite
}
@keyframes myTest {
0% {
background-position: 0 0;
/*background-position 属性设置背景图像的起始位置。*/
}
100% {
background-position: -100% 0;
}
}
</style>
<body>
<!-- <div id='test'>我的测试学习</div>
<hr/> -->
<div id='test2'>
<h4>日暮苍山远，天寒白屋贫。柴门闻犬吠，风雪夜归人。</h4>
</div>
</body>
</html>
思路：
1、将文字设置为块元素，宽高定义
2、给文字加上渐变的背景[注意 需要加上浏览器内核，亲自试过不加内核标识不展示]
3、文字颜色设置为透明 此时文字会消失，但是还是会占位【transparent 元素还是会占位
4、将背景剪切成文字，就是只展示文字那里的背景 此时的backgrouned-clip 也需要加上浏览器内核标识
5、将背景图水平方向上扩展一倍，目的是为了后面的动画中的position有移动空间
6、设置animation动画 动画名称 动画完成一次需要的时间 动画规则 动画次数
7、@keyFrames 实现具体的动画规则 规定0%从背景图片的0，0位置开始动画 到100%的时候位置移动到 -100%，0
分享到：
相关推荐
`body` 设置了字体大小、行高和字体家族，`h3` 设置了内边距、背景颜色、文字颜色、字体大小、行高、居中对齐等属性，使得标题具有明显的视觉效果。 接着是`.box` 类的选择器，它定义了一个相对定位的容器，具有...
### Flash遮罩动画实例知识点详解 #### 一、概述 Flash是一款非常强大的矢量图形编辑和动画创作软件，被广泛应用于网页设计、动画制作等领域。本文档通过一个具体的实例——“月圆之夜举笔题诗”动画，详细介绍如何...
- 为了使效果更加逼真，可以调整Tab的背景色、文字颜色和图标颜色，使其在未选中和选中状态下有所区别。 - 使用`android:state_selected`和`android:state_focused`等状态选择器属性来定义不同状态下的样式。 5. ...
总的来说，渐变背景星空CSS3特效是一种将CSS3的新特性巧妙融合的实例，它展示了如何通过CSS3的渐变、动画和伪元素等工具来创造出引人注目的视觉效果。这种特效不仅能够提升网站的美感，还能增强用户的互动体验，是...
3. **渐变（gradients）**：线性渐变和径向渐变可以让文字颜色从一种过渡到另一种，增强视觉效果。 4. **边框半径（border-radius）**：可以用来创建圆角效果，让文字边缘更柔和，有时可以用来模拟3D效果。 5. **...
- **步骤1**：新建文档，使用线条工具绘制三棱锥的轮廓，并填充橘色到黄色的线性渐变效果，之后删除边框。 - **步骤2**：在第20帧插入关键帧，重新绘制三棱锥，并创建形状补间动画。 - **步骤3**：在第21帧插入关键...
1. **渐变背景**：CSS3引入了线性渐变和径向渐变，使得我们可以轻松创建丰富多彩的背景。在圆形按钮上应用渐变，可以在鼠标悬停时产生平滑的颜色过渡。 2. **阴影效果**：通过`box-shadow`属性，我们能够为按钮添加...
在iOS开发中，我们通常用它来为视图添加背景渐变色。要使用CAGradientLayer，首先要创建一个实例，并设置其frame与需要添加动画的UILabel的bounds相同。这是因为CAGradientLayer根据bounds的大小来决定渐变区域，而...
13. 如果要让Flash 同时对若干个对象产生渐变动画，则必须将这些对象放置在不同的层中。 □ A. 正确 □ B. 错误 14. 矢量图形用来描述图像的是： □ A. 直线 □ B. 曲线 □ C. 色块 □ D. A 和B 都正确 15. 下列那几...
1. **颜色过渡**：CSS3中的线性渐变（linear-gradient）和径向渐变（radial-gradient）可以用来模拟霓虹灯的多彩效果。我们可以为文字设置一个背景渐变，使颜色从一种色调平滑过渡到另一种，以此来模拟光源从内部...
2. **渐变_背景**：线性渐变（linear-gradient）和径向渐变（radial-gradient）让按钮的背景色彩变化自然平滑，增添层次感。 3. **阴影_效果**：box-shadow属性能添加阴影，增加按钮的立体感，使按钮看起来更有深度...
线性渐变（LinearGradient）是Android图形库提供的一种绘制颜色平滑过渡的技术，它可以用于背景、文字、形状等多个元素上。在TextView中应用渐变，可以让文本显得更为生动和吸引人，尤其适用于创建类似“闪光”...
1. `background: -webkit-gradient(linear, left top, right top, ...)` 和 `background: -webkit-linear-gradient(left top, right top, ...)`：这是创建线性渐变的两种写法，分别对应老式和新式的Webkit浏览器兼容...
在资源"iPhone Gradient Buttons"中，包含的源代码应该展示了如何创建不同类型的渐变按钮，包括线性渐变和径向渐变。通过学习和理解这些代码，开发者不仅可以掌握颜色渐变技术，还能进一步提升对UI设计和交互的理解...
渐变包括线性渐变和径向渐变，可以用于创建平滑过渡效果，如天空、背景或物体表面的光泽。通过实践，学生将学会在舞台上应用渐变填充和渐变描边，以及如何调整渐变的角度、透明度等参数。 实训2：文字的使用 在...
在"进度条合集"文件中，可能包含了不同设计和动画效果的进度条实例，例如线性进度条、环形进度条、带有文字提示的进度条等。每个案例都有其特定的CSS实现方式，通过分析这些代码，我们可以学习到更多关于CSS3动画和...
这个`TextViewGradient.rar`文件很可能是包含了一个示例项目，演示如何在`TextView`中实现线性渐变背景，以及可能的歌词播放效果。 线性渐变（`LinearGradient`）是Android图形库中的一个关键工具，它允许开发者...
3. **边框与背景**：圆角边框border-radius、渐变background-image（线性渐变linear-gradient、径向渐变radial-gradient）、阴影box-shadow等特性，使元素外观更具层次感。 4. **响应式设计**：媒体查询@media允许...