青岛网站建设新闻资讯

css控制字体颜色过度渐变代码

时间:2024-02-19 已阅读:983次 | 作者:青岛网站建设

首页>新闻资讯>建站知识

css控制字体颜色过度渐变代码,示例图片:

css控制字体颜色过度渐变代码

代码如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}
 
			body {
				display: flex;
				height: 100vh;
				align-items: center;
				justify-content: center;
			}
 
			p {
				font-size: 4vh;
				font-weight: 600;
				background-clip: text;
				-webkit-background-clip: text;
				/*这次的这句和以往不一样*/
				/* 以往是 考虑低版本浏览器*/
				/*这次就连最新版Chrome和Safari都得 */
				/*注意是background-clip: text;需要 */
				/*如果是: content啊之 类的就没这么苛刻的*/
				-webkit-text-fill-color: transparent;
				/*这个属性的- webkit前缀也比较特殊 */
				/*寻常的- webki t-表示的是Chrome和Safari的私有属'性*/
				/*但是它却声明了所有的(除了IE浏览器)*/
				background-image:
					linear-gradient(90deg,
						rgb(255, 167, 69),
						rgb(254, 134, 159),
						rgb(239, 122, 200),
						rgb(160, 131, 237),
						rgb(67, 174, 255),
						rgb(160, 131, 237),
						rgb(239, 122, 200),
						rgb(254, 134, 159),
						rgb(255, 167, 69));
				background-size: 200%;				
			}
 
			p:hover {
				animation: streamer 2s linear infinite;
			}
 
			@keyframes streamer {
				0% {
					background-position: 0%;
				}
 
				100% {
					background-position: 200%;
				}
			}
		</style>
	</head>
	<body>
		<p>何以与君识,无言泪千行</p>
	</body>
</html>



二维码
扫描二维码手机查看该文章

文章引用:https://www.qinghuahulian.com/news/webzhishi/1448.html

相关资讯

Copyright © 2011-2024 青华互联-青岛青华锐思网络科技有限公司 www.qinghuahulian.com All Rights Reserved
鲁公网安备37020202000800号 鲁ICP备14020555号-4 网站地图 百度地图