【css】渐变巧用

折桂怀橘

已于 2023-04-04 11:27:38 修改

阅读量95

点赞数

文章标签： css css3 javascript

于 2023-04-03 17:07:59 首次发布

本文链接：https://blog.csdn.net/weixin_42910765/article/details/129931632

版权

css

linear-gradient
conic-gradient 圆锥渐变

linear-gradient

 background-image: linear-gradient(0deg, #78f, #f78);

平分秋色过度颜色
在这里插入图片描述

background-image: linear-gradient(45deg, #87f 60%, #f78 60%);

设置角度，两个值一样的时候就不在过度颜色
在这里插入图片描述

 background: repeating-linear-gradient(45deg,
                    #5b77e8 0,
                    #5b77e8 25px,
                    #eeff35 0,
                    #eeff35 50px);

在这里插入图片描述
滚动起来

 .div10 {
      height: 20px;
      background: repeating-linear-gradient(
        45deg,
        #5b77e8 25%,
        #eeff35 0,
        #eeff35 50%,
        #5b77e8 0,
        #5b77e8 75%,
        #eeff35 0
      );
      background-size: 30px 30px;
      animation: roll 1s linear infinite;
    }
    @keyframes roll {
      from {
        background-position-x: 0;
      }
      to {
        background-position-x: 30px;
      }
    }

background-color: teal;
background-image: linear-gradient(white 2px, transparent 0), // 粗横杠
linear-gradient(90deg, white 2px, transparent 0),  // 粗竖杠
linear-gradient(rgba(255, 255, 255, 0.2) 1px, transparent 0), 
linear-gradient(90deg, rgba(255, 255, 255, 0.2) 1px, transparent 0);
background-size: 75px 75px, 75px 75px, 15px 15px, 15px 15px;  //粗细两个杠分布的距离，并根据画布重复填充

linear-gradient 叠加使用
在这里插入图片描述

.corner {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 120px;
            line-height: 120px;
            padding: 40px;
            text-align: center;
            color: white;
            font-size: 200%;
            background: linear-gradient(-150deg, transparent 1.5em, yellowgreen 0);// 透明折角
            border-radius: .5em;
        }

        .corner:before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            background:linear-gradient(to left bottom, transparent 50%, rgba(0, 0, 0, .2) 0, rgba(0, 0, 0, .4)) 100% 0 no-repeat; // 显示的深色折角
            width: 1.73em;
            height: 3em;
            transform: translateY(-1.3em) rotate(-30deg);
            transform-origin: bottom right;
            border-bottom-left-radius: inherit;
            box-shadow: -.2em .2em .3em -.1em rgba(0, 0, 0, .15);
        }

在这里插入图片描述

.underline {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 400px;
            height: 200px;
            text-align: center;
            color: white;
            background: #454c5e;
            border-radius: .5em;
        }

        .underline1-text,
        .underline2-text {
            cursor: pointer;
            position: absolute;
            left: 16%;
            transition: 1s;
        }

        .underline1-text {
            top: 10%;
            background: linear-gradient(white, rgb(217, 49, 49)) no-repeat;
            background-size: 100% 1px;
            background-position: -10em 1.15em;
        }

        .underline1-text:hover {
            background-position: 0 1.15em;
        }

        .underline2-text {
            top: 38%;
            background:
                linear-gradient(90deg, white 50%, transparent 0) repeat-x;
            background-size: .2em 2px;
            background-position: -3em 1.15em;
        }

        .underline2-text:hover {
            background-position: 0 1.15em;
        }

在这里插入图片描述

conic-gradient 圆锥渐变

background: conic-gradient(deeppink, yellowgreen);

在这里插入图片描述

background: conic-gradient(deeppink 0 30%, yellowgreen 0 70%, teal 0 100%);

在这里插入图片描述

 background: repeating-conic-gradient(deeppink 0 15deg, yellowgreen 0 30deg);

在这里插入图片描述

@keyframes rotate {
  100% {
    transform: rotate(1turn);
  }
}

.conic {
  position: relative;
  z-index: 0;
  width: 400px;
  height: 300px;
  margin: 20px;
  border-radius: 10px;
  overflow: hidden;
  padding: 2rem;
  
  &::before {
    content: '';
    position: absolute;
    z-index: -2;
    left: -50%;
    top: -50%;
    width: 200%;
    height: 200%;
    background-color: #1a232a;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-image: conic-gradient(transparent, rgba(168, 239, 255, 1), transparent 30%);
    animation: rotate 4s linear infinite;
  }
  
  &::after {
    content: '';
    position: absolute;
    z-index: -1;
    left: 6px;
    top: 6px;
    width: calc(100% - 12px);
    height: calc(100% - 12px);
    background: #000;
    border-radius: 5px;
  }
}