css渐变小案例，比较复杂的线性渐变和径向渐变做泡泡

目录

一，前言

二，案例一，多个镜像渐变复合出图像

1.分析

2.第一步，四角的白色与红色条纹。

3.第二步，从上到下的渐变

4.第四步，后面的蓝红条纹效果

5.源码

6.奇思妙想

三，径向渐变做出好看的泡泡

1.分析

2.改变径向渐变中心

3.镜像渐变

---

一，前言

在已经学习过渐变的基础上，我们来用渐变做两个案例，使用线性渐变做一个多个渐变复合在一起的图像（下一图片），和使用径向渐变做一个泡泡（下二图片）。

 

二，案例一，多个镜像渐变复合出图像

1.分析

分析图片：

第一步，四个角是白色的，然后红色条，可得是从四个角开始渐变，先是白色，然后红色，最后是透明色transparent，而方法是我们平常使用渐变做条纹格子的办法。

第二步，然后是从上到下，蓝色逐渐渐变到透明色，在0%时候是纯蓝色，在75%的地方是纯透明色。

第三步，最后，是蓝色，红色的条纹，使用 repeating-linear-gradient来重复平铺。因为前面的渐变使用了透明色，所以不会遮挡后面。

2.第一步，四角的白色与红色条纹。

先从左下角开始，设置渐变为45deg，白色到90px，90px到110px为红色，做出红色的条纹效果，

再是透明色110px到130px，保证不会遮挡住后面。

然后是左上角，设置135deg，白色到60px，红色60px到80px，再是透明色。

把四个角都设置好，就可以实现四角的白色和红色条纹效果。

linear-gradient(45deg, white 90px, red 90px, red 110px, transparent 110px,
 transparent 130px),

                linear-gradient(-45deg, white 90px, red 90px, red 110px,
 transparent 110px, transparent 130px),

                linear-gradient(135deg, white 60px, red 60px, red 80px, 
transparent 80px, transparent 100px),

                linear-gradient(-135deg, white 60px, red 60px, red 80px, 
transparent 80px, transparent 100px);

3.第二步，从上到下的渐变

此步比较简单，直接上代码。

 linear-gradient(blue 0%, transparent 70%)

4.第四步，后面的蓝红条纹效果

这步需要repeating-linear-gradient，来写渐变平铺。

首先写好角度120deg，然后用渐变写条纹效果，0-25px是蓝色，25-50px为红色，依此类推写出条纹效果，repeating-linear-gradient会将其平铺铺满，做出图片上的效果。因为多使用了透明色，所以不会被遮盖。

repeating-linear-gradient(120deg, #806d9e6e 0px, rgba(128, 109, 158, 0.521) 25px,
 rgba(255, 0, 0, 0.493) 25px, rgba(255, 0, 0, 0.471) 50px,

                    #806d9e6e 50px, rgba(128, 109, 158, 0.521) 75px,
 rgba(255, 0, 0, 0.493) 75px, rgba(255, 0, 0, 0.471) 100px,

                    #806d9e6e 100px, rgba(128, 109, 158, 0.521) 125px,
 rgba(255, 0, 0, 0.493) 125px, rgba(255, 0, 0, 0.471) 150px,

                    #806d9e6e 150px, rgba(128, 109, 158, 0.521) 175px,
 rgba(255, 0, 0, 0.493) 175px, rgba(255, 0, 0, 0.471) 200px,

                    #806d9e6e 200px, rgba(128, 109, 158, 0.521) 225px);

5.源码

源码丢失，所以作者又写了一份，可能做出来不太一样，但绝对没问题。

.h{
            height: 250px;
            width: 800px;
            float: left;
            margin: 10px;
            /* background-repeat: repeat; */
            /* background-size: 300% 300%; */
            
            background-color: transparent;
            background-image: linear-gradient(45deg, white 90px, red 90px, red 110px, transparent 110px, transparent 130px),
                linear-gradient(-45deg, white 90px, red 90px, red 110px, transparent 110px, transparent 130px),
                linear-gradient(135deg, white 60px, red 60px, red 80px, transparent 80px, transparent 100px),
                linear-gradient(-135deg, white 60px, red 60px, red 80px, transparent 80px, transparent 100px),
                linear-gradient(blue 0%, transparent 70%),
                repeating-linear-gradient(120deg, #806d9e6e 0px, rgba(128, 109, 158, 0.521) 25px, rgba(255, 0, 0, 0.493) 25px, rgba(255, 0, 0, 0.471) 50px,
                    #806d9e6e 50px, rgba(128, 109, 158, 0.521) 75px, rgba(255, 0, 0, 0.493) 75px, rgba(255, 0, 0, 0.471) 100px,
                    #806d9e6e 100px, rgba(128, 109, 158, 0.521) 125px, rgba(255, 0, 0, 0.493) 125px, rgba(255, 0, 0, 0.471) 150px,
                    #806d9e6e 150px, rgba(128, 109, 158, 0.521) 175px, rgba(255, 0, 0, 0.493) 175px, rgba(255, 0, 0, 0.471) 200px,
                    #806d9e6e 200px, rgba(128, 109, 158, 0.521) 225px);
        }

6.奇思妙想

最后的红蓝条纹是否可以使用伪元素来做呢，作者大胆实践后得出结论，虽然会比较麻烦，但完全可以！

小插曲：作者使用z-index来调整伪元素的位置，结果因为没有设置定位而失败。所以改用了3d动画里的translateZ(-1px)来调整。

.g {
            height: 250px;
            width: 800px;
            /* z-index: 1; */
            float: left;
            /* position: relative; */
            /* top: 1200px;
            left: 0; */
            margin: 10px;
            /* overflow: hidden; */
            /* background-size: 100px 100px; */
            /* box-shadow: 1px 1px 8px gray; */
            background-color: transparent;
            background-image: linear-gradient(45deg, white 90px, red 90px, red 110px, transparent 110px, transparent 130px),
                linear-gradient(-45deg, white 90px, red 90px, red 110px, transparent 110px, transparent 130px),
                linear-gradient(135deg, white 60px, red 60px, red 80px, transparent 80px, transparent 100px),
                linear-gradient(-135deg, white 60px, red 60px, red 80px, transparent 80px, transparent 100px),
                linear-gradient(blue 0%, transparent 70%);
            /* linear-gradient(120deg,#806d9e6e 0px,rgba(128, 109, 158, 0.521) 50px,rgba(255, 0, 0, 0.493) 50px,rgba(255, 0, 0, 0.471) 100px); */
        }

        .g::before {
            box-sizing: inherit;
            content: '';
            z-index: 0;
            /* position: absolute;
            top: 0;
            left: 0; */
            display: block;
            /* clear: both; */
            height: 250px;
            width: 800px;
            /* float: left; */
            /* margin: 10px; */
            background-size: 115px 250px;
            /* box-shadow: 1px 1px 8px gray; */
            background-color: transparent;
            background-image: linear-gradient(120deg, #806d9e6e 0px, rgba(128, 109, 158, 0.521) 25px, rgba(255, 0, 0, 0.493) 25px, rgba(255, 0, 0, 0.471) 50px,
                    #806d9e6e 50px, rgba(128, 109, 158, 0.521) 75px, rgba(255, 0, 0, 0.493) 75px, rgba(255, 0, 0, 0.471) 100px,
                    #806d9e6e 100px, rgba(128, 109, 158, 0.521) 125px, rgba(255, 0, 0, 0.493) 125px, rgba(255, 0, 0, 0.471) 150px,
                    #806d9e6e 150px, rgba(128, 109, 158, 0.521) 175px, rgba(255, 0, 0, 0.493) 175px, rgba(255, 0, 0, 0.471) 200px,
                    #806d9e6e 200px, rgba(128, 109, 158, 0.521) 225px);
            /* background-image: linear-gradient(120deg,#806d9e6e 25%,rgba(255, 0, 0, 0.493) 25%,#806d9e6e 25%,rgba(255, 0, 0, 0.493) 25%); */

        }

        .g{
            transform-style: preserve-3d;
        }

        .g::before {
            transform: translateZ(-1px);
        }

三，径向渐变做出好看的泡泡

1.分析

如图所示，这个案例就比较简单了，改变径向渐变的中心，选择合适的颜色和位置进行渐变，就可以做出应该好看的泡泡。

2.改变径向渐变中心

假设，光照从左上角照过来，那么我们的渐变中心就应该放在左上角，并先设置为白色，再渐变其他颜色，由浅入深，显示出一种光照泡泡的光泽感。

设置宽高都是100px的情况下，我们把渐变中心设置在距离左上角20px（at 20px 20px）的位置。

3.镜像渐变

白0%，粉红25%，蓝40%和紫100%的颜色渐变，由浅入深。

再设置一个阴影，让泡泡更加自然好看。

代码如下。

.kuai1{
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-image: radial-gradient(at 20px 20px,white 0%,#f0ccd5 25%, #5a93cb 45%, #cf3ebe 100%);
            box-shadow: 0px 0px 8px 0px pink;
        }

大家可以尝试各种颜色来写一个泡泡，实话实说作者认为自己做的泡泡并不好看。