css渐变基础和效果收集

linear-gradient
linear-gradient(45deg, red 0%, orange 25%, yellow 50%, green 75%, blue 100%);
渐变角是容器垂直线顺时针旋转的角度

1. 多段百分比值，规则
/* 百分比 */
linear-gradient(red 0%, orange 25%, yellow 50%, green 75%, blue 100%);

linear-gradient(red, blue); 
/*相当于*/
linear-gradient(red 0%, blue 100%); 

/* 不写百分比则均匀分布 */
linear-gradient(red, orange, yellow, green, blue);
百分比简写规则
1. 第一个颜色，0%为起始点，大于0则为终止点
2. 后面颜色，百分比皆为起始点
3. 颜色在起始点为纯色，在起始点和终止点之间为纯色块
4. 百分比后者小于前者，后者使用前者的终止值
linear-gradient(red 50%, orange 40%);
/*相当于*/
linear-gradient(red 50%, orange 50%);
使用0，可以方便的制作纯色条
background:linear-gradient(
    red 0%,
    red 14.3%,
    orange 0,
    orange 50%
    yellow 0,
    yellow 100%
);
5. 颜色的起始值和终止值有多种写法
下面3种写法等价
/*一个颜色两次两个值*/
linear-gradient(red 0%, orange 10%, orange 30%, yellow 50%, yellow 70%, green 90%, green 100%);
/*一个颜色一次两个值*/
linear-gradient(red, orange 10% 30%, yellow 50% 70%, green 90%);
/*一个颜色一次两个值*/
linear-gradient(red 0%, orange 10% 30%, yellow 50% 70%, green 90% 100%);
2. 条纹(斑马)滚动条
 
repeating-linear-gradient 可以方便的实现斑马条纹

linear-gradient   不能直接实现斑马条纹，它会将渐变充满整个容器。配合background-size可以实现条纹，但是需要计算，颜色也不能直接顺序写，一种颜色要分多段来写，才能达到整个容器一致的重复渐变。并且更换倾斜角度，background-size的值要重新计算。代价很高，不推荐使用。
 
2.1 斑马条
width: 200px;
height: 20px;
margin: 50px auto;
background-color: yellowgreen;
background-image: linear-gradient(45deg, rgba(255, 255, 255, .3) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .3) 50%, rgba(255, 255, 255, .3) 75%,  transparent 75%, transparent 100%);
background-size: 20px 20px;
2.2 斑马条 带滚动效果
.progress {
    margin: 300px auto;

    width: 600px;
    height: 20px;

    background-image: repeating-linear-gradient(
        45deg,
        #2ed573 0%,
        #2ed573 1%,
        #7bed9f 1%,
        #7bed9f 2%
    );

    background-position: -2% 0;
    background-size: 150%;
    animation: slider 5s linear infinite;
}

@keyframes slider {
    100% {
        background-position: -100% 0;
    }
}
3. 渐变中transparent应用
 
渐变中，可以使用transparent透明色，可以达到特别的效果。例如，生成不规则图形，生成虚线等
 
4. 多背景和渐变结合使用
 
background可以使用多背景，并且前面的背景优先级高，可以覆盖后面的背景，结合background-size和background-position，可以配合生成复杂的图形。background-image支持渐变，渐变本身就可以绘制复杂的图形，加上可以配合图片，背景色等，绘制特定的图形，不是问题。
 
5. 渐变实现效果记录

5.1 虚线
.dashed {
    height: 1px;
    background: linear-gradient(to right, #000000, #000000 5px, transparent 5px, transparent);
    background-size: 10px 100%;
}
虚线 带滚动
.g-section {
    position: relative;
    padding: 10px;
    box-sizing: border-box;
    border: 1px solid transparent;
    
    &:focus-within {
        background: 
            linear-gradient(90deg, #03a9f4 50%, transparent 0) repeat-x,
            linear-gradient(90deg, #03a9f4 50%, transparent 0) repeat-x,
            linear-gradient(0deg, #03a9f4 50%, transparent 0) repeat-y,
            linear-gradient(0deg, #03a9f4 50%, transparent 0) repeat-y;
        background-size: 8px 1px, 8px 1px, 1px 8px, 1px 8px;
        background-position: 0 0, 0 100%, 0 0, 100% 0;
        animation: linearGradientMove .5s infinite linear;
    }
}

@keyframes linearGradientMove {
    100% {
        background-position: 6% 0, -6% 100%, 0 -6%, 100% 6%;
    }
}
5.2 气泡框的尖头
.tri {
    width: 6px; height: 6px;
    background: linear-gradient(to top, #ddd, #ddd) no-repeat, linear-gradient(to right, #ddd, #ddd) no-repeat, linear-gradient(135deg, #fff, #fff 6px, hsla(0,0%,100%,0) 6px) no-repeat;
    background-size: 6px 1px, 1px 6px, 6px 6px;
    transform: rotate(-45deg);
}
5.3 加减号
.btn-plus {
    background-image: linear-gradient(to top, currentColor, currentColor), linear-gradient(to top, currentColor, currentColor);
    background-size: 10px 2px, 2px 10px;
}
.btn-minus {
    background-image: linear-gradient(to top, currentColor, currentColor);
    background-size: 10px 2px;
}
加号其他写法
background: linear-gradient(#999, #999) 50%/1px 10px no-repeat, linear-gradient(#999, #999) 50%/10px 1px no-repeat;
5.6 铜钱
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #fff;
background-image: linear-gradient(to right, yellow 25%, transparent 25%, transparent 75%,  yellow 75%),
                  linear-gradient(to top, yellow 25%, transparent 25%, transparent 75%,  yellow 75%);
5.7 三角
background: linear-gradient(to top right, #0000 50%, red 0) left top/50% 100% no-repeat, linear-gradient(to top left, #0000 50%, blue 0) right top/50% 100% no-repeat;

//或
background: linear-gradient(to top right, #0000 50%, red 0);
transform: rotate(135deg);

//或
background: conic-gradient(red 45deg, #0000 0 315deg, red 0);
5.8 镂空
background-image:radial-gradient(transparent 0,transparent 49%,orange 50%,orange 100%)
5.9. 切角
四个角三角形切角
.bgc{
    width:195px;
    height: 200px;
    background-color: #425df3;
    background: 
        linear-gradient(-135deg, transparent 20px, #425df3 0) top right ,
        linear-gradient(-45deg, transparent 20px, #425df3 0) bottom right,
        linear-gradient(45deg, transparent 20px, #425df3 0) bottom left ,
        linear-gradient(135deg, transparent 20px, #425df3 0) top left;
    background-size: 50% 50%;
    background-repeat: no-repeat;
}
linear-gradient实现切角有缺陷

切角多种实现方法

1. 固定距离使用 clip-path
2. 固定切角使用 conic-gradient(at 100% 0, #B89DFF 250deg, transparent 0)
3. 局部切角使用 linear-gradient
 
具体可参考 css实现切角
 
6. 渐变种类
 
linear-gradient : 线性渐变
radial-gradient : 径向渐变
conic-gradient: 圆锥渐变

repeating-linear-gradient 重复线性渐变
repeating-radial-gradient 重复径向渐变
repeating-conic-gradient 重复锥形渐变

repeating-radial-gradient

可以实现
环形波纹
环形loading
黑胶唱片

conic-gradient

可以实现
饼图
炫酷刻度表
环形进度条
彩色矩形边框
彩色环形
loading

具体可参考
posted @ 2022-05-20 09:57  全玉  阅读(144)  评论(0)  编辑  收藏  举报