加入收藏 | 设为首页 | 会员中心 | 我要投稿 核心网 (https://www.hxwgxz.com/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 编程 > 正文

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

发布时间:2022-03-03 08:46:25 所属栏目:编程 来源:互联网
导读:这篇文章给大家分享的用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);
    }

(编辑:核心网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    热点阅读