问题描述:

实现头像的堆叠效果

从第二个头像开始,每个头像都会盖住前一个头像上,遮盖的宽度为 30px

实现叠加的方式有很多,比如给每个头像添加 translateX 属性,或者使用负值 margin

主要问题在于距离。第一个的头像的距离为 0,第二个为 30,第三个为 60,第四个为 90...

如果用 js 就能写个循环,然后分别添加。但因为移动端适配的问题,需要在 css 中生成

解决方案:

查了好些文章才知道,原来 less 是可以写循环函数的

首先定义一个循环函数,根据 nth-child 分别设置移动距离

.head-picture(@n, @i:1) when (@i <= @n) {
&:nth-child(@{i}) {
transform: translateX(-30px * (@i - 1));
}
.head-picture(@n,(@i + 1));
}

然后在样式里面调用:

&__item {
  // ...
  .head-picture(10);
}

Less 结合 nth-child 选择器循环生成样式的更多相关文章

  1. 用Less循环生成样式

    需求是这样的,我要给一个轮播图设置不同的背景图,由于每张图片的背景图路劲都不一样,所以需要对每个单独的元素自定义图片路径.然后想到Less语法有mixin机制,就这样实现了一个递归function,然 ...

  2. jQuery 选择器 筛选器 样式操作 文本操作 属性操作 文档处理 事件 动画效果 插件 each、data、Ajax

    jQuery jQuery介绍 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方 ...

  3. CSS 选择器及各样式引用方式

    Css :层叠样式表 (Cascading Style Sheets),定义了如何显示HTML元素. 目录 1. 选择器的分类:介绍ID.class.元素名称.符合.层次.伪类.属性选择器. 2. 样 ...

  4. 一个很吊的swing循环生成窗口。

    import javax.swing.*; import java.awt.event.ActionListener; import java.awt.event.ActionEvent; publi ...

  5. swift基本用法-for循环遍历,遍历字典,循环生成数组

    // Playground - noun: a place where people can play import UIKit //--------------------------------- ...

  6. php循环生成的表单如何获得其各项值案例

    思路:输入框和按钮是用for循环生成的,不但要获取输入框里的各项值,并且要获取点击按钮的值,要知道是那个按钮被点击了,这里以生成5个为例.如图: 这是提交页面,点击的是“小米”. 这是显示结果,测试显 ...

  7. C# Random循环生成随机数重复问题解决方案

    C# Random循环生成随机数重复问题解决方案1.当我们通过Random生成随机数时,习惯的写法如下: int a=new Random().Next(0,100); 然后生成一个数据数没有任何问题 ...

  8. 笔记:css3伪选择器改变滚动条样式

    现在我打开支持前缀-webkit-的浏览器,也就是说只要支持前缀为-webkit-的浏览器才有效果 <!doctype html> <html lang="en" ...

  9. MySQL学习笔记:循环生成5万行id连续的数据

    # ---- mysql循环生成5万行id连续的数据 ---- /* id 1 2 3 4 …… */ CREATE TABLE tb( id ) NOT NULL AUTO_INCREMENT, V ...

随机推荐

  1. Javascript高级编程学习笔记(63)—— 事件(7)鼠标及滚轮事件

    鼠标与滚轮事件 鼠标事件是web开发中最常用的一类事件,毕竟鼠标是最主要的定位设备 DOM3级事件中定义了9个鼠标事件: click:在用户单击主鼠标按钮(一般为鼠标左键)或者按下回车时触发,这一点对 ...

  2. 吴恩达机器学习笔记2-代价函数I(cost function)

    我们选择的参数决定了我们得到的直线相对于我们的训练集的准确程度,模型所预测的值与训练集中实际值之间的差距(下图中蓝线所指)就是建模误差(modeling error). 我们的目标便是选择出可以使得建 ...

  3. RISC-V指令集介绍 - 整数基本指令集

    1. 寄存器 32个x寄存器,RV32下x reg是32位宽 x0:硬连线 常数0 专门的零寄存器 x1-x31:31个通用reg 返回地址:没有强制要求那一个x作为lr,但是一般用x1 pc:额外的 ...

  4. 机器学习入门05 - 泛化 (Generalization)

    原文链接:https://developers.google.com/machine-learning/crash-course/generalization 泛化是指模型很好地拟合以前未见过的新数据 ...

  5. python数据抓取分析(python + mongodb)

    分享点干货!!! Python数据抓取分析 编程模块:requests,lxml,pymongo,time,BeautifulSoup 首先获取所有产品的分类网址: def step(): try: ...

  6. 厉害了,Spring Cloud for Alibaba 来了!

    最近,Spring Cloud 发布了 Spring Cloud Alibaba 首个预览版本:Spring Cloud for Alibaba 0.2.0. 大家都好奇,这和阿里巴巴有什么关系?莫非 ...

  7. jsbridge的js封装

    /*注意:源生app需要配置jsbridge的环境,而在前端页面中需要下方封装代码,既可以达到调用app方法的功能和注册供app调用的方法1.注册方法:注册后,供app调用,注册时,同名函数,下一个会 ...

  8. android用OkHttp和okio包通信的坑--气死我了

    今天新建了个项目,想要用用okhttp包来实现Android和tomcat的通信, 于是就根据记忆,把以前可以用的代码复制过来了,然后呢,出现这个.... 图有点大,不知到怎么调小 很莫名其妙,我看了 ...

  9. ADO.NET的整理

    ADO.NET的几个对象 Connection:管理数据库的连接 Command:对数据库执行命令 DataReader:数据流读取器,返回的数据都是快速的且只是“向前”的数据流.无法实例化,只能通过 ...

  10. IDEA添加Git项目

    1.进入主页面IntelliJ IDEA (如果不知道如何进入主页面,在加载项目是点击“Cancel”按钮 ) 2.点击“Check out from Version Control” ,选择“Git ...