CSS混合渐变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .test{
            background: 
            linear-gradient(115deg, rgb(211, 255, 215) 0%, rgb(0, 0, 0) 100%), 
            radial-gradient(90% 100% at 50% 0%, rgb(200, 200, 200) 0%, rgb(22, 0, 45) 100%),
            radial-gradient(100% 100% at 80% 0%, rgb(250, 255, 0) 0%, rgb(36, 0, 0) 100%), 
            radial-gradient(150% 210% at 100% 0%, rgb(112, 255, 0) 0%, rgb(20, 175, 125) 0%, rgb(0, 10, 255) 100%), 
            radial-gradient(100% 100% at 100% 30%, rgb(255, 77, 0) 0%, rgba(0, 200, 255, 1) 100%),
            linear-gradient(60deg, rgb(255, 0, 0) 0%, rgb(120, 86, 255) 100%);
            background-blend-mode: overlay, overlay, difference, difference, difference, normal;

        }
        .test2{
            background: linear-gradient(180deg, #F7D6FF 0%, #005686 100%), 
            linear-gradient(180deg, #FFFFFF 0%, #060046 100%), 
            linear-gradient(130deg, #00FFA3 0%, #1A003C 100%), 
            linear-gradient(307deg, #FF0000 0%, #3300C6 100%), 
            radial-gradient(50% 72% at 50% 50%, #004584 0%, #00FFB2 100%), 
            radial-gradient(100% 140% at 100% 0%, #5ED500 0%, #2200AA 100%);
            background-blend-mode: soft-light, overlay, difference, difference, color-burn,normal;
        }
        .test3{
            background:linear-gradient(0deg, #F7D6FF 0%, #005686 100%), 
            linear-gradient(0deg, #FFFFFF 0%, #060046 100%), 
            linear-gradient(310deg, #00FFA3 0%, #1A003C 100%), 
            linear-gradient(127deg, #FF0000 0%, #3300C6 100%), 
            radial-gradient(50% 72% at 50% 50%, #004584 0%, #00FFB2 100%), 
            radial-gradient(100% 140% at 0% 100%, #5ED500 0%, #2200AA 100%);
            background-blend-mode: soft-light, overlay, difference, difference, color-burn, normal;
        }

        * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
 
.test4 {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(240, 228, 228);
}
 
.TheCircle {
    position: relative;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    border: 3px solid rgb(246, 247, 248);
    box-shadow: 0 0 0 3px rgb(41, 134, 196);
}
 
.Water {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background-color: rgb(23, 106, 201); */
    border-radius: 50%;
    overflow: hidden;
    background:linear-gradient(0deg, #F7D6FF 0%, #005686 100%), 
            linear-gradient(0deg, #FFFFFF 0%, #060046 100%), 
            linear-gradient(310deg, #00FFA3 0%, #1A003C 100%), 
            linear-gradient(127deg, #FF0000 0%, #3300C6 100%), 
            radial-gradient(50% 72% at 50% 50%, #004584 0%, #00FFB2 100%), 
            radial-gradient(100% 140% at 0% 100%, #5ED500 0%, #2200AA 100%);
            background-blend-mode: soft-light, overlay, difference, difference, color-burn, normal;
    animation: color_min 25s infinite;
    background-size: 600% 600%;
}
 @keyframes color_min{
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
 }
.Water::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 140%;
    height: 140%;
    border-radius: 40%;
    background-color: rgb(240, 228, 228);
    animation: real 5s linear infinite;
}
 
@keyframes real {
    0% {
        transform: translate(-50%, -65%) rotate(0deg);
    }
 
    100% {
        transform: translate(-50%, -65%) rotate(360deg);
    }
}
 
.Water::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 140%;
    height: 140%;
    border-radius: 42%;
    background-color: rgb(240, 228, 228, 0.2);
    animation: virtual 7s linear infinite;
}
 
@keyframes virtual {
    0% {
        transform: translate(-50%, -60%) rotate(0deg);
    }
 
    100% {
        transform: translate(-50%, -60%) rotate(360deg);
    }
}
    </style>
</head>
<body>
    <div style="width: 1000px;height:200px" class="test"></div>
    <div style="width: 1000px;height:200px" class="test2"></div>
    <div style="width: 1000px;height:200px" class="test3"></div>
<div class="test4">

    <div class="TheCircle">
        <div class="Water"></div>
      </div>
</div>
</body>
</html>
posted @ 2022-11-07 15:11 jswf 阅读(71) 评论(0) 收藏举报
刷新页面返回顶部
jswf

CSS混合渐变

公告
