纯css创建动态文字渐变效果

简介: 纯css创建动态文字渐变效果

动态效果就不放了,放两张效果不同的展示了

效果展示

11d653de704f477bbae157adebb5a18d.png

首先创建html部分

<h1 class="gradient-box"><b><strong>123123123</strong></b></h1>

控制时间的

1.  @keyframes gradientAnimation {
2. 0% { background-position: 0% 50%; }
3. 50% { background-position: 100% 50%; }
4. 100% { background-position: 0% 50%; }
5.     }

控制样式的动画效果的

1. 
2. /* 设置元素样式 */
3. .gradient-box {
4. width: 200px;
5. height: auto;
6. background: linear-gradient(90deg, red, blue,gray,#02B379);
7. background-size: 200% 200%;
8. animation: gradientAnimation 2s ease infinite;
9.       -webkit-text-fill-color: transparent;
10.                 -webkit-background-clip:text;
11. 
12.     }

完整代码

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="utf-8" />
5. <title></title>
6. <meta name="viewport" content="width=device-width, initial-scale=1">
7. <style type="text/css">
8. 
9. 
10. /* 创建渐变动画 */
11.   @keyframes gradientAnimation {
12. 0% { background-position: 0% 50%; }
13. 50% { background-position: 100% 50%; }
14. 100% { background-position: 0% 50%; }
15.     }
16. 
17. /* 设置元素样式 */
18.     .gradient-box {
19.       width: 200px;
20.       height: auto;
21.       background: linear-gradient(90deg, red, blue,gray,#02B379);
22.       background-size: 200% 200%;
23.       animation: gradientAnimation 2s ease infinite;
24.       -webkit-text-fill-color: transparent;
25.                 -webkit-background-clip:text;
26. 
27.     }
28. 
29. </style>
30. </head>
31. <body>
32. <h1 class="gradient-box"><b><strong>123123123</strong></b></h1>
33. </body>
34. </html>

本篇博客结束谢谢观看

目录
相关文章
|
4月前
|
前端开发
CSS新增样式----圆角边框、盒子阴影、文字阴影
CSS新增样式----圆角边框、盒子阴影、文字阴影
|
5月前
|
前端开发
CSS 限制文字行数(超出显示省略号...)
CSS 限制文字行数(超出显示省略号...)
64 0
|
5月前
CSS3 transform 文字切斜展开动画
CSS3 transform 文字切斜展开动画
45 0
|
5月前
CSS3 text-shadow - 凹凸文字效果
CSS3 text-shadow - 凹凸文字效果
29 0
|
1天前
|
前端开发 容器
css 中可以让文字在垂直和水平方向上重叠的两个属性是什么?
css 中可以让文字在垂直和水平方向上重叠的两个属性是什么?
|
23天前
|
前端开发 JavaScript UED
动态伸缩搜索框:HTML, CSS, JavaScript的完美结合
动态伸缩搜索框:HTML, CSS, JavaScript的完美结合
24 1
css3文字阴影和盒子阴影
css3文字阴影和盒子阴影
|
2月前
|
前端开发
css文字环绕png图片
css文字环绕png图片
26 1
|
3月前
|
前端开发
css文字字体间距设置
css文字字体间距设置
22 0

相关产品

  • 云迁移中心