免費論壇 繁體 | 簡體
Sclub交友聊天~加入聊天室當版主
分享
返回列表 發帖

霓虹特效文字

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



TOP

css流光字

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

流光字

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

  1. <p align="center"><span class="text">流光字</span></p>
  2. <style type="text/css">
  3. .text{
  4. width: 300px;
  5. height: 100px;
  6. position: relative;
  7. 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%);
  8. -webkit-text-fill-color: transparent;/* 将字体设置成透明色 */
  9. -webkit-background-clip: text;/* 裁剪背景图,使文字作为裁剪区域向外裁剪 */
  10. -webkit-background-size: 200% 100%;
  11. -webkit-animation: masked-animation 4s linear infinite;
  12. font-size: 60px;letter-spacing:20px;font-weight:bold;font-family:Microsoft YaHei;
  13. }
  14. @keyframes masked-animation {
  15. 0% {
  16. background-position: 0 0;
  17. }
  18. 100% {
  19. background-position: -100% 0;
  20. }
  21. </style>
複製代碼


本帖最後由 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; 光移速度,文字大小等。


  1. <center>
  2. <div style="width:800px" align=center><img src="https://image.ibb.co/jWpmNT/DSC06407.jpg" style="width: 800px; height: 533px;" />
  3. <style type="text/css">
  4. .描边字{ width: 800px; height: 80px; position: relative; center; margin-left: 0px; margin-top: -70px;
  5. 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%);
  6. -webkit-text-fill-color: transparent;
  7. -webkit-text-stroke: 1px #0f0; -webkit-background-clip: text;
  8. -webkit-background-size: 200% 100%;
  9. -webkit-animation: masked-animation 4s linear infinite; font-size: 60px; font-family:kaiti; font-weight:bold; }
  10. @keyframes masked-animation { 0% { background-position: 0 0; } 100% { background-position: -100% 0; } }
  11. </style>
  12. <p class="描边字" align=center>迷人的天山天池</p>
  13. </div></center><br><br>
複製代碼


TOP

返回列表