感谢您的支持,我会继续努力的!
打开微信扫一扫,即可进行扫码打赏哦
点我查看本站打赏源码!
Powered by RUNCODEX.COM,学的不仅是技术,更是梦想!!!
<h1>文字显示渐变,菜鸟教程 -- 学的不仅是技术,更是梦想!</h1>
<p class="hue" style="font: 50%" onclick="shizIsBlack()">• 黑色背景 •</p>
<p class="hue" style="font: 50%" onclick="shizIsWhite()">• 白色背景 •</p>
<p class="hue" style="font: 50%"><a href="//www.runcodex.com">• 菜鸟教程 •</a></p>
xxxxxxxxxx
function shizIsBlack() {
document.body.style.backgroundColor = "black";
}
function shizIsWhite() {
document.body.style.backgroundColor = "white";
html {
font-weight: normal;
font-size: 200%;
font-family: monospace;
font-smoothing: antialiased;
width: 100%;
overflow: hidden-x;
text-align: center;
@media (min-width: 650px) {
height: 100%;
html:before {
content: '';
display: inline-block;
vertical-align: middle;
margin-right: -0.25em;
body {
max-width: 38rem;
h1 {
color: #f35626;
background-image: -webkit-linear-gradient(92deg, #cc5500, #ccbb00);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-animation: hue 60s infinite linear;
@keyframes hue {
from {
filter: hue-rotate(0deg);
to {
filter: hue-rotate(-360deg);
a {
p {
cursor: pointer;
.clickyThing {
padding: .75rem;
margin: .375rem;
background-color: transparent;
border-radius: 1px;
.clickyThing:focus {
outline: none;
max-width: 100px;
border: 4px solid #f35626;
line-height: 1.375;
padding-left: 1.5rem;
padding-right: 1.5rem;
font-weight: 700;