HTML+CSS3 —— by.云梦吖——彩虹渐变背景+渐变字体

【摘要】 HTML部分<!DOCTYPEhtml><html><head><metacharset="UTF-8">...

HTML部分

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>彩虹背景捏</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="text">
<p class="welcome">欢迎光临,地球欢迎你</p>
</div>
</body>
</html>

 

css部分

* {
margin: 0;
padding: 0;
}

body {
background-image: linear-gradient(125deg, #e74c3c, #e67e22, #f1c40f, #2ecc71, #16a085, #3498db, #9b59b6);
background-size: 100%;
animation: kobe 15s infinite;
}

.text {
/* font-size: 95px; */
text-align: center;
margin: 350px 0;
font-family: 'Modern Antiqua', cursive;
/* color: #ffcc66; */
color: #2c3e50;
font-weight: 700;
font-size: 22px;
}

@keyframes kobe {
0% {
background-position: 0 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0 50%;
}
}
.welcome{
font-size: 3rem;
line-height: 4rem;
color: #59a5ff; /* Fallback Color */
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
.welcome {
background: -webkit-gradient(linear,left top,right top,from(#59a5ff),to(#6e6bff));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}

版权声明:《 HTML+CSS3 —— by.云梦吖——彩虹渐变背景+渐变字体 》为作者未完成的梦原创文章,转载请注明原文地址!
最后编辑:2020-5-28 01:05:53
分享到:
赞(0)
发表评论 / Comment

用心评论~