css3中less实现文字长阴影(long shadow)
2020-05-08 04:05
1211 查看
本文主要介绍了css3中less实现文字长阴影,分享给大家,具体如下:
问题
实现如下图效果
主要知识点
css中的字体阴影 text-shadowless
<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文字长阴影内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!
相关文章推荐
- CSS3实现文字阴影与自动换行
- IE下实现类似CSS3 text-shadow文字阴影的几种方法
- 利用css3的text-shadow属性实现文字阴影乳白效果
- IE下实现类似CSS3 text-shadow文字阴影的几种方法
- CSS3+HTML5实现块阴影与文字阴影
- IE下实现类似CSS3 text-shadow文字阴影的几种方法
- css3新功能之(text-shadow实现)CSS3文字阴影效果
- CSS3文字阴影实现乳白文字效果
- css3实现文字的阴影效果
- 利用css3的text-shadow属性实现文字阴影乳白效果
- CSS3+HTML5实现块阴影与文字阴影
- 【迟早得学】CSS3特效之文字阴影:text
- css3 文字溢出 换行实现方案
- CSS3的文字阴影
- cocos2d-x 利用CCLabelTTF制作文字描边与阴影效果的实现方法
- CSS3实现曲线阴影和翘边阴影
- jquery使用CSS3实现文字动画效果插件Textillate.js
- css3 ——text-shadow使用阴影叠加出的燃烧的文字特效
- CSS3实现的图片圆角及阴影特效
- css3 shadow为了实现各种漂亮的阴影效果