问题描述:

实现头像的堆叠效果

从第二个头像开始,每个头像都会盖住前一个头像上,遮盖的宽度为 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. 使用HttpClient发送Get/Post请求 你get了吗?

    HttpClient 是Apache Jakarta Common 下的子项目,可以用来提供高效的.最新的.功能丰富的支持 HTTP 协议的客户端编程工具包,并且它支持 HTTP 协议最新的版本和建议 ...

  2. git小技巧

    1 git提交时如何忽略一些文件: 在git根目录下添加,然后提交,就可以使用了,详细的语法详见 https://github.com/github/gitignore github提供了一个通用的. ...

  3. python中的进制转换

    python中常用的进制转化通常有两种方法: 1.用内置函数hex(),oct(),bin(),对应的数字表示为0x,0o,0b,功能是把十进制数字转化为其他进制  >>> int( ...

  4. Google Chrome 书签导出并生成 MHTML 文件

    目的 因为某些原因需要将存放在 Google Chrome 内的书签导出到本地,所幸 Google Chrome 提供了导出书签的功能. 分析 首先在 Google Chrome 浏览器当中输入 ch ...

  5. centos7通过yum安装nginx

    centos7通过yum安装nginx nginx不支持centos7通过yum直接安装~~~ 1.查看操作系统位数[root@-jenkins ~]# rpm -aq|grep centos-rel ...

  6. 缓存日志截取字段上传FTP

    #!/bin/bash awk '{print $3,$4,$5,$6,$9,$11,$12,$14,$15,$18}' /usr/local/tcacheserver/var/log/traffic ...

  7. kafka快速开始

    Step 1: Download the code Step 2: Start the server Step 3: Create a topic Step 4: Send some messages ...

  8. Java 容器 & 泛型:三、HashSet,TreeSet 和 LinkedHashSet比较

    Writer:BYSocket(泥沙砖瓦浆木匠) 微博:BYSocket 豆瓣:BYSocket 上一篇总结了下ArrayList .LinkedList和Vector比较,今天泥瓦匠总结下Hash ...

  9. java扫盲 接口 Enumeration

    摘要: 摘要: 原创出处: http://www.cnblogs.com/Alandre/ 泥沙砖瓦浆木匠 希望转载,保留摘要,谢谢! 记起2年前,高中生活最多的是老师的批评.谢谢! -泥沙砖瓦浆木匠 ...

  10. ELK实践(二):收集Nginx日志

    Nginx访问日志 这里补充下Nginx访问日志使用的说明.一般在nginx.conf主配置文件里需要定义一种格式: log_format main '$remote_addr - $remote_u ...