編碼的世界 / 優質文選 / 生涯

css樣式實現炫彩字體


2021年11月05日
-   

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#logo {
font-weight: 600;
font-size: 28px;
font-family: "黑體";
color: #8c888b;
background: -webkit-linear-gradient(45deg, #70f7fe, #fbd7c6, #fdefac, #bfb5dd, #bed5f5);
-moz-linear-gradient(45deg, #70f7fe, #fbd7c6, #fdefac, #bfb5dd, #bed5f5);
-ms-linear-gradient(45deg, #70f7fe, #fbd7c6, #fdefac, #bfb5dd, #bed5f5);
color: transparent;
/*設置字體顏色透明*/
-webkit-background-clip: text;
/*背景裁剪為文本形式*/
animation: ran 10s linear infinite;
/*動態10s展示*/
}
@keyframes ran {
from {
backgroud-position: 0 0;
}
to {
background-position: 2000px 0;
}
}
</style>
</head>
<body>
<a class="navbar-brand" id="logo" href="#">不言而喻の博客&nbsp;&nbsp;</a>
</body>
</html>

熱門文章