css3中less实现文字长阴影(long shadow)


Posted in HTML / CSS onApril 24, 2020

本文主要介绍了css3中less实现文字长阴影,分享给大家,具体如下:

问题

实现如下图效果

css3中less实现文字长阴影(long shadow)

主要知识点

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);
  }

 到此这篇关于css3中less实现 文字长阴影(long shadow)的文章就介绍到这了,更多相关less文字长阴影内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
利用CSS3的定位页面元素
Aug 29 HTML / CSS
CSS3模块的目前的状况分析
Feb 24 HTML / CSS
纯CSS实现菜单、导航栏的3D翻转动画效果
Apr 23 HTML / CSS
Html5 Canvas 实现一个“刮刮乐”游戏
Sep 05 HTML / CSS
HTML5制作酷炫音频播放器插件图文教程
Dec 30 HTML / CSS
HTML5 Canvas 绘图——使用 Canvas 绘制图形图文教程 使用html5 canvas 绘制精美的图
Aug 31 HTML / CSS
如何用canvas实现在线签名的示例代码
Jul 10 HTML / CSS
使用Html5多媒体实现微信语音功能
Jul 26 HTML / CSS
html5中嵌入视频自动播放的问题解决
May 25 HTML / CSS
CSS3 制作精美的定价表
Apr 06 HTML / CSS
CSS3新特性详解(五):多列columns column-count和flex布局
Apr 30 HTML / CSS
使用CSS3实现按钮悬停闪烁动态特效代码
Aug 30 HTML / CSS
CSS3 中filter(滤镜)属性使用详解
Apr 07 #HTML / CSS
css3媒体查询中device-width和width的区别详解
Mar 27 #HTML / CSS
css3 flex实现div内容水平垂直居中的几种方法
Mar 27 #HTML / CSS
浅析CSS3 中的 transition,transform,translate之间区别和作用
Mar 26 #HTML / CSS
css3 中translate和transition的使用方法
Mar 26 #HTML / CSS
CSS3 不定高宽垂直水平居中的几种方式
Mar 26 #HTML / CSS
使用 CSS3 中@media 实现网页自适应的示例代码
Mar 24 #HTML / CSS
You might like
仿Aspnetpager的一个PHP分页类代码 附源码下载
2012/10/08 PHP
destoon实现资讯信息前面调用它所属分类的方法
2014/07/15 PHP
ThinkPHP类似AOP思想的参数验证的实现方法
2019/12/18 PHP
超棒的javascript页面顶部卷动广告效果
2007/12/01 Javascript
Ext.MessageBox工具类简介
2009/12/10 Javascript
优化innerHTML操作(提高代码执行效率)
2011/08/20 Javascript
Javascript实现获取及设置光标位置的方法
2015/07/21 Javascript
Jquery中request和request.form和request.querystring的区别
2015/11/26 Javascript
jQuery实现页面下拉100像素出现悬浮窗口的方法
2016/09/05 Javascript
简单的渐变轮播插件
2017/01/12 Javascript
使用Bootstrap和Vue实现用户信息的编辑删除功能
2017/10/25 Javascript
vue 简单自动补全的输入框的示例
2018/03/12 Javascript
使用vue打包时vendor文件过大或者是app.js文件很大的问题
2018/06/29 Javascript
vue-i18n结合Element-ui的配置方法
2019/05/20 Javascript
JS中实现一个下载进度条及播放进度条的代码
2019/06/10 Javascript
vue实现的多页面项目如何优化打包的步骤详解
2020/07/19 Javascript
JavaScript实现多球运动效果
2020/09/07 Javascript
[02:32]DOTA2亚洲邀请赛 VG战队巡礼
2015/02/03 DOTA
Python线程创建和终止实例代码
2018/01/20 Python
python机器学习实现决策树
2019/11/11 Python
python绘制随机网络图形示例
2019/11/21 Python
Python3列表List入门知识附实例
2020/02/09 Python
Python实现FTP文件定时自动下载的步骤
2020/12/19 Python
Pycharm 跳转回之前所在页面的操作
2021/02/05 Python
巴西女装购物网站:Eclectic
2018/04/24 全球购物
Superdry极度干燥美国官网:英国制造的服装品牌
2018/11/13 全球购物
常见的软件开发流程有哪些
2015/11/14 面试题
2014镇党委班子对照检查材料思想汇报
2014/09/23 职场文书
普通党员个人剖析材料
2014/10/08 职场文书
2015年元旦标语大全
2014/12/09 职场文书
手术室消毒隔离制度
2015/08/05 职场文书
学生会任命书范本
2015/09/21 职场文书
2016年公司“3.12”植树节活动总结
2016/03/16 职场文书
什么是创业计划书?什么是商业计划书?这里一一解答
2019/07/12 职场文书
python执行js代码的方法
2021/05/13 Python
oracle索引总结
2021/09/25 Oracle