开启辅助访问
切换到宽版

天天ASP家园官方Q群

天天ASP家园网友互动群

群1: 697497501(新手学习互助群)

群2: 47598123(进阶应用群)

天天ASP家园»论坛 › 技术交流 › 前端技术 › 几个实用的CSS效果-文字镂空/渐变/立体/垂直/光影掠过。 ...
返回列表 发新帖
查看: 130|回复: 5

[文章教程] 几个实用的CSS效果-文字镂空/渐变/立体/垂直/光影掠过。。。

[复制链接]
xuanxiao 发表于 2024-7-6 10:31:43 | 显示全部楼层 |阅读模式
微信图片_20240706104726.jpg
文字镂空
微信图片_20240706103245.png

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8">
  5.     <title>css镂空文字</title>
  6.     <style type="text/css">
  7.       div {
  8.         margin: 10% auto;
  9.         font-size: 56px;
  10.         font-weight: bold;
  11.         text-align: center;
  12.         /*字体粗细*/
  13.         -webkit-text-stroke: 1px #aa55ff;
  14.         /*描边*/
  15.         -webkit-text-fill-color: transparent;
  16.       }
  17.     </style>
  18.   </head>
  19.   <body>
  20.     <div>关注雪天前端</div>
  21.   </body>
  22. </html>
复制代码
ASP币如何冲？请看这里
回复

使用道具 举报

 楼主| xuanxiao 发表于 2024-7-6 10:35:00 | 显示全部楼层
渐变文字
微信图片_20240706103245.png

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>线性渐变的文字</title>
  6.   <style>
  7.     div{
  8.        margin: 10% 0;
  9.        text-align: center;
  10.        font-size: 50px;
  11.        background:-webkit-linear-gradient(top, #ff007f, #aaaaff);/*线性渐变*/
  12.        -webkit-background-clip: text;
  13.        -webkit-text-fill-color: transparent;/*文字的填充颜色 透明色*/
  14.     }
  15.   </style>
  16. </head>
  17. <body>
  18.   <div>
  19.     关注雪天前端
  20.   </div>
  21. </body>
  22. </html>
复制代码
ASP币如何冲？请看这里
回复 支持 反对

使用道具 举报

 楼主| xuanxiao 发表于 2024-7-6 10:36:11 | 显示全部楼层
立体文字
微信图片_20240706103718.bmp
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8">
  5.     <title>立体文字</title>
  6.     <style>
  7.       body{
  8.         background-color: #333;
  9.       }
  10.       div {
  11.         color: #ffffff;
  12.         font-size: 60px;
  13.         font-weight: 700;
  14.         text-shadow: 1px 0px #ff5500, 1px 2px #ff5500, 3px 1px #ffaa00,
  15.           2px 3px #ff5500, 4px 2px #ffaa00, 4px 4px #ff5500,
  16.           5px 3px #ffaa00, 5px 5px #ff5500, 7px 4px #ffaa00,
  17.           6px 6px #ff5500, 8px 5px #ffaa00, 7px 7px #ff5500,
  18.           9px 6px #ffaa00, 9px 8px #ff5500, 11px 7px #ffaa00
  19.       }
  20.     </style>
  21.   </head>
  22.   <body>
  23.     <div>雪天前端</div>
  24.   </body>
  25. </html>
复制代码


ASP币如何冲？请看这里
回复 支持 反对

使用道具 举报

 楼主| xuanxiao 发表于 2024-7-6 10:37:18 | 显示全部楼层
图片嵌入文字

微信图片_20240706103718.bmp
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8">
  5.     <title>文字图案填充</title>
  6.     <style>
  7.       div {
  8.         margin: 20px;
  9.         font-size: 50px;
  10.         font-weight: bold;
  11.         background-image: url("https://img2.baidu.com/it/u=118187512,3642343065&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=300");
  12.         -webkit-background-clip: text;
  13.         -webkit-text-stroke: 1px #ff5500;
  14.         -webkit-text-fill-color: transparent;
  15.       }
  16.     </style>
  17.   </head>
  18.   <body>
  19.     <div>关注雪天前端</div>
  20.   </body>
  21. </html>
复制代码
ASP币如何冲？请看这里
回复 支持 反对

使用道具 举报

 楼主| xuanxiao 发表于 2024-7-6 10:39:54 | 显示全部楼层
光影掠过文字

微信图片_20240706103718.bmp
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8">
  5.     <title>实现文字的舞台灯光效果</title>
  6.     <style>
  7.       body {
  8.         background: #000;
  9.         padding-top: 10%;
  10.       }

  12.       p {
  13.         font-size: 70px;
  14.         text-align: center;
  15.         background: -webkit-linear-gradient(left, #ff5500, #ffff00) 0 0 no-repeat;
  16.         -webkit-background-size: 140px;
  17.         -webkit-background-clip: text;
  18.         -webkit-text-fill-color: rgba(255, 255, 255, 0.2);
  19.         -webkit-animation: dh 2.5s infinite;
  20.       }

  22.       @-webkit-keyframes dh {
  23.         0% {
  24.           background-position: 0 0;
  25.         }

  27.         100% {
  28.           background-position: 100% 100%;
  29.         }
  30.       }
  31.     </style>
  32.   </head>
  33.   <body>
  34.     <p>关注我的人都会大吉大利</p>
  35.   </body>
  36. </html>
复制代码



垂直文字
微信图片_20240706103245.png
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8">
  5.     <title>垂直文本</title>
  6.     <style type="text/css">
  7.       div {
  8.         margin: 10px auto;
  9.         padding: 30px 50px;
  10.         background: #000000;
  11.         font-size: 32px;
  12.         color: #989898;
  13.         text-align: center;
  14.         writing-mode: vertical-rl;
  15.         line-height: 55px;
  16.       }
  17.     </style>
  18.   </head>
  19.   <body>
  20.     <div>
  21.       <h4>《念奴娇·赤壁怀古》苏轼</h4>
  22.       <p>

  24.         大江东去，浪淘尽，千古风流人物。<br>

  26.         故垒西边，人道是，三国周郎赤壁。<br>

  28.         乱石穿空，惊涛拍岸，卷起千堆雪。<br>

  30.         江山如画，一时多少豪杰。<br>

  32.         遥想公瑾当年，小乔初嫁了，雄姿英发。<br>

  34.         羽扇纶巾，谈笑间，樯橹灰飞烟灭。<br>

  36.         故国神游，多情应笑我，早生华发。<br>

  38.         人生如梦，一尊还酹江月。<br>
  39.       </p>
  40.     </div>
  41.   </body>
  42. </html>
复制代码




ASP币如何冲？请看这里
回复 支持 反对

使用道具 举报

 楼主| xuanxiao 发表于 2024-7-6 10:42:13 | 显示全部楼层
打字机效果

微信图片_20240706103245.png
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8">
  5.     <title>css打字机效果</title>
  6.     <style>
  7.       body {
  8.         height: 100vh;
  9.         background-color: #000;
  10.         overflow: hidden;
  11.         display: flex;
  12.         justify-content: center;
  13.         align-items: center;
  14.       }

  16.       .text {
  17.         width: 680px;
  18.         border-right: 2px solid #eee;
  19.         font-size: 28px;
  20.         text-align: center;
  21.         white-space: nowrap;
  22.         overflow: hidden;
  23.         background: #fff;
  24.         -webkit-background-clip: text;
  25.         /* 背景透明 */
  26.         -webkit-text-fill-color: transparent;
  27.       }

  29.       .useAnimation {
  30.         animation: dh 4s steps(44) 1s normal both,
  31.           ss 0.5s steps(44) infinite normal;
  32.       }

  34.       @keyframes dh {
  35.         from {
  36.           width: 0;
  37.         }

  39.         to {
  40.           width: calc(690px / 2);
  41.         }
  42.       }

  44.       /* 竖线的闪烁效果 */
  45.       @keyframes ss {
  46.         from {
  47.           /* 竖线的颜色 */
  48.           border-right-color: #363636;
  49.         }

  51.         to {
  52.           /* 竖线的颜色 */
  53.           border-right-color: #ffffff;
  54.         }
  55.       }
  56.     </style>

  58.   </head>
  59.   <body>
  60.     <body>
  61.       <p class="text useAnimation">
  62.         关注雪天前端,订阅更多好文
  63.       </p>
  64.     </body>

  66.   </body>
  67. </html>
复制代码


斜角标签
微信图片_20240706103245.png
  1. <!DOCTYPE html>
  2. <html lang="zh">
  3.   <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style>
  7.       .box {
  8.         width: 300px;
  9.         height: 400px;
  10.         background-color: cadetblue;
  11.         position: relative;
  12.         overflow: hidden;
  13.       }

  15.       .tag {
  16.         position: absolute;
  17.         top: 5%;
  18.         right: -21px;
  19.         width: 100px;
  20.         line-height: 20px;
  21.         text-align: center;
  22.         font-size: 13px;
  23.         color: #fff;
  24.         background-color: #ff0000;

  26.         transform: rotate(45deg);
  27.       }
  28.     </style>
  29.   </head>
  30.   <body>
  31.     <div class="box">
  32.       <div class="tag">推荐视频</div>
  33.     </div>
  34.   </body>
  35. </html>
复制代码


ASP币如何冲？请看这里
回复 支持 反对

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 注册

本版积分规则

快速回复 返回顶部 返回列表

在线客服

售前咨询
售后咨询
服务热线
023-58418553
微信公众号