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实现走马灯效果
Dec 26 HTML / CSS
详解CSS3的图层阴影和文字阴影效果使用
Jun 09 HTML / CSS
css3新单位vw、vh的使用教程
Mar 23 HTML / CSS
CSS3实现可翻转的hover效果
May 23 HTML / CSS
使用HTML5捕捉音频与视频信息概述及实例
Aug 22 HTML / CSS
HTML5探秘:用requestAnimationFrame优化Web动画
Jun 03 HTML / CSS
html5弹跳球示例代码
Jul 23 HTML / CSS
用HTML5制作一个简单的桌球游戏的教程
May 12 HTML / CSS
浅析HTML5中的 History 模式
Jun 22 HTML / CSS
微信小程序“圣诞帽”的实现思路详解
Dec 28 HTML / CSS
HTML5实现视频弹幕功能
Aug 09 HTML / CSS
amazeui树节点自动展开折叠面板并选中第一个树节点的实现
Aug 24 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
PHP 上传文件的方法(类)
2009/07/30 PHP
php中运用http调用的GET和POST方法示例
2014/09/29 PHP
PHP操作mysql数据库分表的方法
2016/06/09 PHP
Thinkphp 在api开发中异常返回依然是html的解决方式
2019/10/16 PHP
php让json_encode不自动转义斜杠“/”的方法
2020/04/27 PHP
IE8 浏览器Cookie的处理
2009/01/31 Javascript
DLL+ ActiveX控件+WEB页面调用例子
2010/08/07 Javascript
JavaScript截取字符串的Slice、Substring、Substr函数详解和比较
2014/03/20 Javascript
可编辑下拉框的2种实现方式
2014/06/13 Javascript
使用cluster 将自己的Node服务器扩展为多线程服务器
2014/11/10 Javascript
AngularJS中update两次出现$promise属性无法识别的解决方法
2017/01/05 Javascript
xmlplus组件设计系列之树(Tree)(9)
2017/05/02 Javascript
用vue快速开发app的脚手架工具
2018/06/11 Javascript
angularjs1.5 组件内用函数向外传值的实例
2018/09/30 Javascript
实现高性能javascript的注意事项
2019/05/27 Javascript
Elasticsearch实现复合查询高亮结果功能
2019/09/10 Javascript
python3.3实现乘法表示例
2014/02/07 Python
Python中使用PyHook监听鼠标和键盘事件实例
2014/07/18 Python
python3新特性函数注释Function Annotations用法分析
2016/07/28 Python
pandas 空的dataframe 插入列名的示例
2018/10/30 Python
python实现简易数码时钟
2021/02/19 Python
用python爬取租房网站信息的代码
2018/12/14 Python
python中使用while循环的实例
2019/08/05 Python
Python实现Keras搭建神经网络训练分类模型教程
2020/06/12 Python
摩托车和ATV零件、配件和服装的首选在线零售商:MotoSport
2017/12/22 全球购物
美国珠宝精品店:Opulent Jewelers
2019/08/20 全球购物
意大利和国际奢侈品牌购物网站:Suitnegozi.com
2021/01/15 全球购物
致标枪运动员加油稿
2014/02/15 职场文书
三年级学生评语
2014/04/23 职场文书
防灾减灾标语
2014/10/07 职场文书
病人写给医生的感谢信
2015/01/23 职场文书
画展邀请函
2015/01/31 职场文书
2015年秋季运动会加油稿
2015/07/22 职场文书
少先队大队委竞选口号
2015/12/25 职场文书
什么是Python装饰器?如何定义和使用?
2022/04/11 Python
JS前端监控采集用户行为的N种姿势
2022/07/23 Javascript