加入收藏 | 设为首页 | 会员中心 | 我要投稿 51站长网 (https://www.51zhanzhang.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
站内搜索:
当前位置: 首页 > 综合聚焦 > 编程要点 > 语言 > 正文

css里怎样做文字长阴影的立体效果?

发布时间:2022-01-11 19:05:09 所属栏目:语言 来源:互联网
导读:这篇文章给大家分享的用css给文字添加阴影的内容,整体的实现就是文字添加长阴影的效果,这样的好处就是可以增加字体的立体感,那么具体怎样做呢?下面我们一起来了解一下。 实现如下图效果 主要知识点 css中的字体阴影 text-shadowless 语法中的 loops 和 m
   这篇文章给大家分享的用css给文字添加阴影的内容,整体的实现就是文字添加长阴影的效果,这样的好处就是可以增加字体的立体感,那么具体怎样做呢?下面我们一起来了解一下。
 
  实现如下图效果
 
 
 
  主要知识点
 
  css中的字体阴影 text-shadowless
 
  语法中的 loops 和 merge代码
 
  <div class="long-shadow">屮艸芔茻</div>
   .loop(@counter) when (@counter > 0) {
      .loop((@counter - 1));
      text-shadow+: (1px * @counter) (1px * @counter) #2d585a;
    }
   .long-shadow{
      overflow: hidden;
      background-color: #5f9ea0;
      width:800px;
      height: 160px;
      line-height: 160px;
      text-align: center;
      letter-spacing: 80px;
      color: #fff;
      font-size: 100px;
      .loop(200);
    }

(编辑:ASP站长)

【免责声明】本站内容转载自互联网,其相关言论仅代表作者个人观点绝非权威,不代表本站立场。如您发现内容存在版权问题,请提交相关链接至邮箱:bqsm@foxmail.com,我们将及时予以处理。

    相关内容
    未处理完善
      无相关信息
    未处理完善