css3 linear-gradient实现购物车地址选择信封效果

对于css3的渐变前端的童鞋一定不陌生，在一些电商网站会为了美化将地址选择做成信封样式（个人感觉很稀饭~），看了一下它的实现方式，大多数是以图片的形式，持着优化的心态尝试着用css3 linear-gradient实现信封效果一下是效果图

下面我们开始喽~

html结构如下：

css样式如下：

.letter-box{
       width: 278px;
       height: 176px;
       padding: 5px;
       box-sizing: border-box;
   }
   .letter-border{
       width: 100%;
       height: 100%;
       background: #fbfaf5;
   }

渐变是写在letter-box上的，然后letter-border用颜色遮住中间的部分。

接下来我们对letter-box写渐变，首先我们先来分析一下图上边的渐变其实一共有三个颜色白色、红色和蓝色。我们都知道在用linear-gradient的时候除了最开始的时候定义渐变的角度我们还要定义颜色和颜色所占的比例，颜色我们现在已经知道了，那么我们现在来说一下这个比例怎么确定。

观察效果图我们可以找到规律一个红色、一个白色、一个蓝色、一个白色为一个循环，那么我们的规律数为4，我们的比例用100%/（我们的规律数*2）=12.5%就是我们的比例。解释一下为什么要用我们的规律数*2,不应该是规律数是一个组合吗？NO!把一个组合数的颜色放在一个正方体里边，为了方便大家理解p了一个效果图

css3 linear-gradient实现购物车地址选择信封效果

这个应该很直观了我们把大的box看成是以小正方体为单位repeat的就可以了

.letter-box{
       width: 278px;
       height: 176px;
       padding: 5px;
       box-sizing: border-box;
       background: linear-gradient(45deg,#f25953 12.5%,#fbfaf5 12.5%,#fbfaf5 25%,#5590d6 25%,#5590d6 37.5%,#fbfaf5 37.5%,#fbfaf5 50%,#f25953 50%,#f25953 62.5%,#fbfaf5 62.5%,#fbfaf5 75%,#5590d6 75%,#5590d6 87.5%,#fbfaf5 87.5%,#fbfaf5 100%);
       background-size: 70px 70px;
   }

为了达到效果并没有做兼容，大家在实际工作中使用linear-gradient记得要加前缀，菜鸟一枚多多交流~

秒客网

css3 linear-gradient实现购物车地址选择信封效果

相关文章