CSS中条纹效果的实现方案

作者: 科研者 | 来源:发表于2017-08-07 15:36 被阅读0次

条纹效果如下所示:

条纹效果示例.png

在CSS中,条纹效果的应用还是很广泛的,比如:条纹背景、网格效果、棋盘格效果等等;

条纹效果的特点就是:多个颜色条交替排列,相邻颜色条之间的过渡是突变的效果;
所以,可以用颜色突变的方案来实现条纹效果;

根据我的《CSS中颜色突变的实现方案》,有如下方案可实现条纹效果:

备注:
如果没有看过我的《CSS中颜色突变的实现方案》,建议先看下,然后再来看这篇文章;

方案1:多个元素组合

这个方案的思路比较直观,就是每个颜色条用一个元素显示;由于过于简单,在此就不再讲解;

此方案优点:

  1. 原理直观,易理解;
  2. 可以实现任意多颜色的条纹效果;

此方案缺点:

  1. 添加了较多冗余的元素;

方案2:多色条纹

这个方案是通过 《CSS中颜色突变的实现方案》/方案2-插入颜色渐变辅助色标 实现条纹效果的,由于条纹往往是交替重复出现的,所以最好用重复线性渐变函数repeating-linear-gradient() 来实现;

以实现红、绿、蓝3个颜色的水平条纹效果为例:
示例代码:

background-image: repeating-linear-gradient(red 0%, red 10%, green 10%, green 20%,blue 20%,blue 30%);

示例效果:

红绿蓝条纹效果.png

此方案的优点:

  1. 用单个元素实现,不用添加冗余元素;
  2. 可以实现任意多颜色的交替重复的条纹;

方案3:双色条纹

方案2可以实现任意多颜色的条纹效果,不过每多一个颜色,需要添加2个色标(其中包含一个辅助色标),但如果只有2种颜色的突变,也可以使用非重复的线性渐变来实现;这个方案是根据《CSS中颜色突变的实现方案》/方案3-非重复的2色渐变 进行扩展的;

具体思路如下:

  1. 设置background-image的值为非线性渐变linear-gradient(色标1, 色标2);
  2. 设置background-size为2个条纹的尺寸;
  3. 设置background-repeat为repeat,以实现条纹的重复排列;

以实现红、蓝2个颜色的水平条纹效果为例:
示例代码:

background-image: linear-gradient(red 50%, blue 50%);   //设置背景图片为2色的条纹;
background-size: 100% 20%;  //指定背景图片的尺寸;
background-repeat:repeat;       //指定背景图片的重复模式;

示例效果:

红蓝条纹效果.png

此方案优点:

  1. 用单个元素实现,不用添加冗余元素;
  2. 不用插入辅助色标;

此方案缺点:

  1. 只能实现2种颜色的条纹;

相关文章:CSS中特殊效果的实现方案

相关文章

  • CSS中特殊效果的实现方案

    相关文章 CSS中渐变特性的研究 CSS中颜色突变的实现方案 CSS中条纹效果的实现方案 CSS中环形效果的实现方...

  • CSS中条纹效果的实现方案

    条纹效果如下所示: 在CSS中,条纹效果的应用还是很广泛的,比如:条纹背景、网格效果、棋盘格效果等等; 条纹效果的...

  • web前端中的遮罩蒙版

    在前端开发中,有一些效果需要实现遮罩蒙版的效果,有几种方案,记录一下 CSS实现 css 中mask属性,最早是出...

  • web前端经验分享

    CSS技巧 解决css样式污染方案 命名约定 BEM命名规范 使用CSS Modules css实现新手引导效果 ...

  • CSS中网格效果的实现方案

    网络效果如下所示: 在CSS中,网格效果的应用还是很广泛的,比如:棋盘格效果、参考线效果等等; 在CSS中实现颜色...

  • CSS3动画属性实现幻灯片效果

    纯CSS实现的幻灯片效果:查看demo; 实现思路 既然想实现动画效果,那么就需要用到CSS3中的@keyfram...

  • Css实现斑马条纹背景

    五个盒子,一步一步实现最终效果,代码中有注释 HTML CSS 竖直条纹 只需要在linear-gradient方...

  • 表格

    基本示例 条纹状表格 依赖:nth-child选择器CSS实现,IE8不兼容 带边框的表格 鼠标悬停效果 紧缩表格...

  • CSS实现条纹背景

    实现方法:CSS线性渐变linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。li...

  • react学习笔记-过渡动画(5)

    4-11、React中实现css过渡动画 4-12、React中实现css动画效果 4-13、使用react-tr...

网友评论

    本文标题:CSS中条纹效果的实现方案

    本文链接:https://www.haomeiwen.com/subject/pgkalxtx.html