html径向渐变怎么写彩虹,CSS3 彩虹渐变文本

最新推荐文章于 2024-02-16 15:54:59 发布
最新推荐文章于 2024-02-16 15:54:59 发布
阅读量185 收藏
点赞数
文章标签： html径向渐变怎么写彩虹
这段CSS代码创建了一个动态效果，通过@import引入谷歌字体库的Raleway字体，然后应用到body背景及文字样式上。多个.wrd类元素以不同高度、颜色和动画延迟依次渐显，实现了文字逐层淡入的视觉效果。动画关键帧@keyframes fade确保了元素从透明渐变为不透明的平滑过渡。
摘要由CSDN通过智能技术生成

CSS

语言：

CSSSCSS

确定

@import url(http://fonts.googleapis.com/css?family=Raleway:400);

body {

background: #222;

height: 100vh;

width: 100vw;

overflow: hidden;

}

.wrd {

position: absolute;

text-align: center;

font-size: 120px;

margin-top: 120px;

height: 20px;

max-width: content-box;

overflow: hidden;

font-weight: bold;

padding: 0;

right: 0;

left: 0;

color: black;

line-height: 90px;

font-family: 'Raleway', sans-serif;

}

.wrd:nth-child(1) {

opacity: 0;

height: 10px;

z-index: -1;

color: #33b2cc;

-webkit-animation: fade 1s 0.2s linear alternate infinite;

animation: fade 1s 0.2s linear alternate infinite;

}

.wrd:nth-child(2) {

opacity: 0;

height: 20px;

z-index: -2;

color: #33c;

-webkit-animation: fade 1s 0.4s linear alternate infinite;

animation: fade 1s 0.4s linear alternate infinite;

}

.wrd:nth-child(3) {

opacity: 0;

height: 30px;

z-index: -3;

color: #b233cc;

-webkit-animation: fade 1s 0.6s linear alternate infinite;

animation: fade 1s 0.6s linear alternate infinite;

}

.wrd:nth-child(4) {

opacity: 0;

height: 40px;

z-index: -4;

color: #c36;

-webkit-animation: fade 1s 0.8s linear alternate infinite;

animation: fade 1s 0.8s linear alternate infinite;

}

.wrd:nth-child(5) {

opacity: 0;

height: 50px;

z-index: -5;

color: #cc8033;

-webkit-animation: fade 1s 1s linear alternate infinite;

animation: fade 1s 1s linear alternate infinite;

}

.wrd:nth-child(6) {

opacity: 0;

height: 60px;

z-index: -6;

color: #9c3;

-webkit-animation: fade 1s 1.2s linear alternate infinite;

animation: fade 1s 1.2s linear alternate infinite;

}

.wrd:nth-child(7) {

opacity: 0;

height: 70px;

z-index: -7;

color: #33cc4d;

-webkit-animation: fade 1s 1.4s linear alternate infinite;

animation: fade 1s 1.4s linear alternate infinite;

}

.wrd:nth-child(8) {

opacity: 0;

height: 80px;

z-index: -8;

color: #3cc;

-webkit-animation: fade 1s 1.6s linear alternate infinite;

animation: fade 1s 1.6s linear alternate infinite;

}

.wrd:nth-child(9) {

opacity: 0;

height: 90px;

z-index: -9;

color: #334dcc;

-webkit-animation: fade 1s 1.8s linear alternate infinite;

animation: fade 1s 1.8s linear alternate infinite;

}

@-webkit-keyframes fade {

100% {

opacity: 1;

}

}

@keyframes fade {

100% {

opacity: 1;

}

}

weixin_39781143
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html用css写彩虹,如何使用纯CSS实现彩虹条纹文字的效果（附代码）
weixin_39634579的博客
06-14 1060
本篇文章给大家带来的内容是关于如何使用纯CSS实现彩虹条纹文字的效果(附代码)，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。效果预览源代码下载https://github.com/comehope/front-end-daily-challenges代码解读定义 dom，容器中包含文本，并且包含4个 用于特效， 的 data-text 属性值为与文本相同：web居中显示：htm...
html用渐变做彩虹,photoshop如何用渐变制作彩虹
weixin_34941214的博客
07-01 605
很多同学都喜欢那种彩虹，其实彩虹也可以用photoshop制作，只要用好渐变就可以了。那么大家知道photoshop如何用渐变制作彩虹吗?下面是学习啦小编整理的photoshop如何用渐变制作彩虹的方法，希望能帮到大家!photoshop用渐变制作彩虹的方法过程：选择好想要的彩虹渐变色，新建图层在合适的位置拉上径向渐变得到初步的彩虹效果;后期适当模糊处理，并把边缘过渡处理自然即可。原图一、新建图层...
HTML动态彩虹字
最新发布
qq_68725483的博客
02-16 1115
【代码】HTML动态彩虹字。
html 彩虹字体,拿来就用，超炫彩虹字体送你了
weixin_32176627的博客
06-22 1573
原标题：拿来就用，超炫彩虹字体送你了还记得小编以前提过的2017设计趋势吗?里面就说到了色彩的渐变和叠加是目前的潮流。其中运用的最广泛的就有彩虹字。一般情况下，要做好彩虹字，那就需要设计师一个一个字来填充颜色、图层叠加，还得考虑色彩之间的搭配，也是一个花功夫的活儿。可是现在秒秒学小编为各位找到一个更简单的彩虹字使用方法，那就是直接下载使用!这样一来哪怕是PS小白都能使用了。不过，这种彩虹字体不过目...
html渐变做一个彩虹,微信小程序canvas渐变，实现彩虹效果。
weixin_34581086的博客
06-25 621
微信小程序提供了两种渐变的方式：createLinearGradient(x，y，x1，y1)创建一个线性的渐变。x，y 起点坐标x1，y1 终点坐标createCircularGradient(x，y，r)创建一个从圆心开始的渐变。x，y 圆心坐标r 半径创建了渐变对象之后，必须添加两个或者两个以上的渐变点；addColorStop(position, color)方法用于指定颜色渐变点的位置和...
纯CSS实现颜色渐变效果（包含环形渐变、线性渐变、彩虹效果等）
09-25
在本文中，我们将深入探讨如何使用纯CSS实现颜色渐变，包括线性渐变、环形渐变以及彩虹效果。 ### 1. CSS渐变色的基本概念 CSS渐变分为两种类型：线性渐变（Linear Gradients）和环形渐变（Radial Gradients）。...
css渐变无限彩虹动画特效
06-01
"css渐变无限彩虹动画特效"是利用CSS3的特性来实现的一种视觉上引人入胜的动态背景效果。这种特效可以将网页的文字或者元素背景变成一道道不断变幻的彩虹，给用户带来独特的视觉体验。 首先，我们要理解CSS3中的...
纯CSS3彩虹弹性加载动画特效特效代码
03-20
2. **渐变（Gradients）**：CSS3提供了线性渐变（linear-gradient）和径向渐变（radial-gradient）功能，可以用于创建彩虹效果。通过在不同时间点改变背景的线性或径向渐变，我们可以实现彩虹色的流动效果。 3. **...
HTML——彩虹马 特效.rar
02-15
2. 用CSS为马设计样式，包括彩虹色的外观，可能通过线性或径向渐变来实现颜色的过渡。 3. 使用JavaScript控制马的动画效果，例如通过改变元素的位置、透明度或颜色来模拟奔跑或变换颜色的动作。 4. 可能还会使用到...
纯css3彩虹弹性加载动画特效.zip
11-20
1. **渐变（Gradients）**：CSS3支持线性渐变（linear-gradient）和径向渐变（radial-gradient）。在这个特效中，彩虹效果就是通过设置不同颜色的渐变来实现的，可以根据角度或方向设置不同的颜色过渡，创造出五彩...
用js实现网页背景色彩虹渐变
09-28
使用简单的js来实现网页背景色彩虹色渐变，不是切换，是一直循环变色
一种灵活的彩虹渐变色简洁算法
10-07
一种灵活的彩虹渐变色简洁算法,vb6源码，主体仅有13行代码，可应用到任意长度及方向的色条，以及任意半径的圆弧，
CSS 彩虹字 动态彩虹字
ChauncyWu的博客
05-14 5650
1. 静态彩虹字 // html <div class="this-div">Elegant and Beautiful</div> // css .this-div{ margin: 20px; width: 200px; background: linear-gradient(90deg, red, blue); -webkit-text-fill-c...
C语言Qt视图实现彩虹渐变效果，我就问你6不6？
03-30 1799
前言 将view中的文本内容用自定义的颜色显示是一种十分常见的需求。今天我们稍微改变些“花样”。下面话不多说了，来一起看看详细的介绍吧 需求定义 我们的需求很简单，现在有一些在view中的text内容需要使用彩色显示，而且不使用单一的一种颜色，而是多种颜色渐变实现的彩虹效果。 需要C/C++资料，加小编C/C++编程学习群：825414254就可以获取了。 文字描述可能比较抽象，所以我们先给出...
SVG特效之彩虹渐变
Bohn的博客
09-01 1361
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;h1&a
使用渐变实现彩虹效果
weixin_48306060的博客
04-27 300
代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &lt...
css3 彩虹文字解答
南征北战的博客
11-22 809
css
用html实现彩虹动画
Wenors的博客
11-19 456
核心： @keyframes spin { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } .wrapper { border-bottom: solid 2px #757575; height: 100px; left: 50%; overflow: hidden; position: fixed; top: 50%; transform:...
CSS3渐变效果详解：线性与径向渐变
"本章详细介绍了CSS3中的渐变效果，包括线性渐变和径向渐变。线性渐变使用linear-gradient属性创建，允许指定方位、起始色和末尾色。方位参数可以是预定义的方向如to top、to right等，也可以使用角度单位进行更精确...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值