老校友 - Powered by Discuz! Board

繁體 | 簡體

Sclub交友聊天~加入聊天室當版主

(檢舉)

新浪微博

QQ空间

Facebook

Google+

Plurk

Twitter

Line

標題: css流光字 [打印本頁]

作者: rainbow 時間: 2018-1-26 15:37 標題: 霓虹特效文字

本帖最後由 rainbow 於 2021-1-28 15:14 編輯

作者: rainbow 時間: 2018-8-27 21:12 標題: css流光字

本帖最後由 rainbow 於 2018-8-27 21:27 編輯

流光字

（此代码只在Chrome浏览器上才能显示流光效果）

<p align="center"><span class="text">流光字</span></p>
<style type="text/css">
.text{
width: 300px;
height: 100px;
position: relative;
background-image: -webkit-linear-gradient(left,blue,#66ffff 10%,#cc00ff 20%,#CC00CC 30%, #CCCCFF 40%, #00FFFF 50%,#CCCCFF 60%,#CC00CC 70%,#CC00FF 80%,#66FFFF 90%,blue 100%);
-webkit-text-fill-color: transparent;/* 将字体设置成透明色 */
-webkit-background-clip: text;/* 裁剪背景图，使文字作为裁剪区域向外裁剪 */
-webkit-background-size: 200% 100%;
-webkit-animation: masked-animation 4s linear infinite;
font-size: 60px;letter-spacing:20px;font-weight:bold;font-family:Microsoft YaHei;
}
@keyframes masked-animation {
0% {
background-position: 0 0;
}
100% {
background-position: -100% 0;
}
</style>

複製代碼

作者: rainbow 時間: 2018-8-31 08:59

本帖最後由 rainbow 於 2018-9-2 19:18 編輯

迷人的天山天池

（此代码只在Chrome浏览器上才能显示流光效果）

代码解析：
width: 800px; height: 80px; position: relative; center; margin-left: 0px; margin-top: -70px; 流光字的背景色宽高及定位。

background-image: webkit-linear-gradient(left,#fff,#fff 10%,#fff 20%,#fff 30%, #fFF 40%, #FFF 50%,#fFF 60%,#fff 70%,#fFF 80%,#FFF 90%,#000 100%); 渐变背景色。

-webkit-text-fill-color: transparent; 填充透明色。

-webkit-text-stroke: 1px #0f0; 镂空字（描边）的边线宽和颜色。

-webkit-background-clip: text;指定元素背景所在区域。text表示元素背景在前景内容（文字）中。

-webkit-background-size: 200% 100%; 使背景图片水平方向扩大一倍，从而保证有元素移动或变化的空间。

-webkit-animation: masked-animation 4s linear infinite; font-size: 60px; font-family:kaiti; font-weight:bold; 光移速度，文字大小等。

<center>
<div style="width:800px" align=center><img src="https://image.ibb.co/jWpmNT/DSC06407.jpg" style="width: 800px; height: 533px;" />
<style type="text/css">
.描边字{ width: 800px; height: 80px; position: relative; center; margin-left: 0px; margin-top: -70px;
background-image: -webkit-linear-gradient(left,#fff,#fff 10%,#fff 20%,#fff 30%, #fFF 40%, #FFF 50%,#fFF 60%,#fff 70%,#fFF 80%,#FFF 90%,#000 100%);
-webkit-text-fill-color: transparent;
-webkit-text-stroke: 1px #0f0; -webkit-background-clip: text;
-webkit-background-size: 200% 100%;
-webkit-animation: masked-animation 4s linear infinite; font-size: 60px; font-family:kaiti; font-weight:bold; }
@keyframes masked-animation { 0% { background-position: 0 0; } 100% { background-position: -100% 0; } }
</style>
<p class="描边字" align=center>迷人的天山天池</p>
</div></center><br><br>

複製代碼

歡迎光臨老校友 (http://boanson.orzweb.net/)