css动态彩虹背景,59.纯 CSS 创作彩虹背景文字

感想：又一次见识到CSS的强大之处，当然MDN文档也是666；

HTML code：

thanks

CSS code：

html, body {

margin:;

padding:;

}

/* 设置body的子元素水平垂直居中 */

body {

height: 100vh;

display: flex;

justify-content: center;

align-items: center;

background-color: black;

}

/* 设置p中文字样式 */

color: white;

/* 1. font 文档地址： http://www.w3school.com.cn/cssref/pr_font_font.asp ；

* 2.vw : 视口宽度 , vh : 视口高度；

font: bold 20vw sans-serif;

text-transform: uppercase;

/* 设置彩虹背景 */

background-image: linear-gradient(

to right,

orangered,

orange,

gold,

lightgreen,

cyan,

dodgerblue,

mediumpurple,

hotpink,

orangered

);

background-size: 110vw;

/* 添加动画 sliding: 滑行的 */

animation: sliding 30s linear infinite;

/* 将背景颜色赋值给文字，文档地址： https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip

1、-moz代表firefox浏览器私有属性

2、-ms代表ie浏览器私有属性

3、-webkit代表safari、chrome私有属性

background-clip: text;

-webkit-background-clip: text;

color: transparent;

}

@keyframes sliding {

to {

background-position: -2000vw;

}

1&period;纯 CSS 创作一个按钮文字滑动特效 + 弹幕(残缺)

css动态彩虹背景,59.纯 CSS 创作彩虹背景文字相关推荐

01超精美渐变色动态背景完整示例【CSS动效实战（纯CSS与JS动效）】
若是大一学子或者是真心想学习刚入门的小伙伴可以私聊我,若你是真心学习可以送你书籍,指导你学习,给予你目标方向的学习路线,无套路,博客为证. 本节案例如下(其他动效篇幅原因逐步讲解,欢迎三连): 一.线 ...
html中div动态边框,[实践总结]纯css实现动态边框
这几天工作中遇到一个交互需求,要求实现一个效果,当鼠标移入一个元素的时候,元素出现一个动态的边框,如图: 动态边框思路看到这个效果,我首先想到的是设置元素的border属性,可惜border不能设 ...
html用css写彩虹,如何使用纯CSS实现彩虹条纹文字的效果（附代码）
本篇文章给大家带来的内容是关于如何使用纯CSS实现彩虹条纹文字的效果(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 效果预览源代码下载 https://github.co ...
css画圆, 如何用纯css实现一个动态画圆环效果
最终的效果是:用纯css实现动态画圆的动画效果 html结构如下: <div class="wrap"> <div class="circle" ...
css 图标点击变色,纯CSS实现小图标变色的一些研究
by zhangxinxu from www.zhangxinxu.com/wordpress/?- 本文可全文转载,个人网站无需授权,只要保留原作者.出处以及文中链接即可,任何网站均可摘要聚合,商用 ...
css 实现标签切换,CSS_纯CSS实现Tab切换标签效果代码，本文实例讲述了纯CSS实现Tab切 - phpStudy...
纯CSS实现Tab切换标签效果代码本文实例讲述了纯CSS实现Tab切换标签效果代码.分享给大家供大家参考.具体如下: 这是一款纯CSS实现的Tab简洁版,很不错的效果,希望大家喜欢. 运行效果截图如 ...
css中间镂空,怎么用纯CSS实现镂空效果
怎么用纯CSS实现镂空效果发布时间:2021-03-19 09:49:16 来源:亿速云阅读:99 作者:小新小编给大家分享一下怎么用纯CSS实现镂空效果,希望大家阅读完这篇文章之后都有所收获, ...
css书本效果,如何使用纯CSS实现3D书本效果
如何使用纯CSS实现3D书本效果发布时间:2020-07-30 10:27:15 来源:亿速云阅读:59 作者:Leah 这期内容当中小编将会给大家带来有关如何使用纯CSS实现3D书本效果,文章内 ...
【CSS之美】原来纯CSS也能绘制人物头像
这篇文章给大家分享一组纯 CSS 绘制的<辛普森一家>人物头像.<辛普森一家>(The Simpsons)是马特·格勒宁为美国福克斯广播公司创作的一部动画情景喜剧.该剧通过对霍 ...

css动态彩虹背景,59.纯 CSS 创作彩虹背景文字

css动态彩虹背景,59.纯 CSS 创作彩虹背景文字相关推荐

最新文章

热门文章