纯css3实现斑马线repeating-linear-gradient和linear-gradient的妙用

最新推荐文章于 2024-07-22 16:40:01 发布

陆康永

最新推荐文章于 2024-07-22 16:40:01 发布

阅读量8.6k

点赞数 1

分类专栏： css

本文链接：https://blog.csdn.net/xiaomogg/article/details/50882232

版权

css 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

今天睡得太早，结果晚上12:45的时候就醒过来了。现在想起小时候，实在是羡慕，那时候9点钟睡了，到早上上学的时候还是迷迷糊糊的要睡觉的感觉，现在特羡慕那时候那么能睡。

今天是周一了，两天的休息日已经过去了，想想挺浪费的，这两天就纯呆家里玩LOL，上周周五下班的时候还给自己定了很多目标结果就执行了一个，而且效果差池人意。

实在是睡不着，趁这个时间，把上周六晚上学到的一个css3背景效果记录下，方便下次查询

这个知识点，我查询了很多博客和文档，部分文字直接复制w3cplus的

注意红色部分的疑问点

下面我们要实现这样的一个效果:

先讲一下css3多个背景：

代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .d1{
            background-image:url(1.jpg), url(2.jpg);
            background-size: 50px 50px;
            background-position: 0 0,30px 0;
            background-repeat: no-repeat;
            width: 600px;
            height: 600px;
        }
    </style>
</head>
<body>
<div class="d1"></div>
</body>
</html>

效果：第二个背景被第一个背景给遮住了，第一个背景比第二个背景的z-index高，我不大清楚我这里要表达什么，但知道这个情况就可以了

现在我们尝试使用纯linear-gradient和background-size实现相同的条纹效果。我们将一个方形的背景加上带有角度.25em宽度黑色条纹和.5em宽度的蓝色条纹。一个正方形的对角线是直角边的√2(根号二)。如果我们知道对角线长度是.25em + .50em = .75em，然后background-size的尺寸是.75em / √2。

代码如下所示：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{
            font-size:40px;
        }
        div{
            width: 200px;
            height: 200px;
            color:#fff;
        }
        .pt1_7{
             /*1em等于40px  蓝 .25em为10px   黑-------.5em为20px
              如果按照正方形的正方形的对角线是直角边的√2
              那对角边为  （.25+.5）/Math.sqrt(2)*40  约等于21
              转换为px就是 (10+20) /Math.sqrt(2)     约等于21

             */
            background: linear-gradient(135deg, #000 .25em, #0092b7 0);//疑问1.为什么这里是0而不是.5em？
            background-size: 21px 21px;
        }
    </style>
</head>
<body>
   <div class="pt1_7">
        1EM
   </div>
</body>
</html>

效果:

这并不是我想要的；

那我们试一下其他方式，例如.25em的黑色条纹放在中间呢？让我们试试！

background: linear-gradient(135deg,
#0092b7 calc(50% - .125em) /* blue corner */, /*疑问2：这里的.125是怎么得到的*/
#000 0, #000 calc(50% + .125em) /* black stripe */,
#0092b7 0 /* blue corner */
);

效果：

是不是比我们的效果有点类似了【除了黑色条纹右下角【黑色渐变结束】和左下角【黑色渐变开始】少了一个类似三角形的一块】

细心对比能发现，这些缺块将黑色条纹宽度一半(.25em的一半就是.125em)【解答疑问一】。

下面我们的工作就是把这个缺的三角形块补回来：

background: linear-gradient(135deg,
#000 .125em /* black corner */,
#0092b7 0, #0092b7 calc(50% - .125em) /* blue stripe */,
#000 0, #000 calc(50% + .125em) /* black stripe */,
#0092b7 0, #0092b7 calc(100% - .125em) /* blue stripe */,
#000 0 /* black corner */
);

效果:

但这不是最终效果，因为我们呢的rem转px存在误差，还有我们多了俩个半条黑色条纹这直接导致对角线的计算不正确。从左上角到右下角，我们现在有一半的黑色条纹(.125em)，蓝色条纹(.5em)，黑色条纹(.25em)，另一个蓝色条纹(.5em)和另一个半的黑色条纹(.125em)。所以加起来对角线是1.5em。这意味着我们需要改变background-size的值为1.5 em / √(2) 1.5 em /√(2)约等于42px修正后可以看到效果如下图: