CSS3棕榈树海滩山脉日出场景动画

很漂亮的日出渐变背景色。

css3, light, tree

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 2762
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(65deg, #759fc6, #ff8d7e, #ffb14b, #759fc6);
}
body .box {
    width: 500px;
    height: 500px;
    position: relative;
    max-width: 100vw;
    max-height: 100vw;
    box-shadow: 0 20px 20px 0 rgba(0, 0, 0, 0.2);
    overflow: hidden;
}
body .box .a,
body .box .b,
body .box .c,
body .box .d,
body .box .e,
body .box .f,
body .box .g,
body .box .h,
body .box .i,
body .box .j {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: #ff8d7e;
    animation: brighten 40s linear infinite alternate;
}
@keyframes brighten {
    0% {
        filter: brightness(0.75) hue-rotate(-15deg);
    }
    50% {
        filter: brightness(1) hue-rotate(0deg);
    }
    100% {
        filter: brightness(1) hue-rotate(0deg);
    }
}
body .box .a {
    -webkit-clip-path: polygon(0% 36%, 42% 45%, 48% 49%, 46% 50%, 54% 54%, 52% 55%, 59% 60%, 59% 62%, 80% 73%, 76% 76%, 100% 89%, 82% 100%, 0% 100%);
    clip-path: polygon(0% 36%, 42% 45%, 48% 49%, 46% 50%, 54% 54%, 52% 55%, 59% 60%, 59% 62%, 80% 73%, 76% 76%, 100% 89%, 82% 100%, 0% 100%);
    z-index: 10;
    background: #ba9cd2;
}
body .box .b {
    z-index: 9;
    -webkit-clip-path: polygon(100% 62%, 75% 51%, 0% 36%, 0% 100%, 100% 100%);
    clip-path: polygon(100% 62%, 75% 51%, 0% 37%, 0% 100%, 100% 100%);
    background: #d06e95;
}
body .box .c {
    z-index: 10;
    -webkit-clip-path: polygon(4% 49%, 100% 68%, 100% 57%);
    clip-path: polygon(66% 49%, 100% 68%, 100% 57%);
    background: linear-gradient(30deg, #99b8d5 57%, #759fc6 57%);
    animation: tide 5s ease-in-out infinite alternate;
}
@keyframes tide {
    0% {
        -webkit-clip-path: polygon(77% 52%, 100% 62%, 100% 57%);
        clip-path: polygon(77% 52%, 100% 62%, 100% 57%);
    }
    100% {
        -webkit-clip-path: polygon(4% 49%, 100% 68%, 100% 57%);
        clip-path: polygon(66% 49%, 100% 68%, 100% 57%);
    }
}
body .box .d {
    z-index: 7;
    -webkit-clip-path: polygon(77% 42%, 66% 46%, 60% 44%, 54% 45%, 47% 43%, 40% 45%, 100% 57%, 100% 44%, 88% 46%, 84% 44%, 81% 45%);
    clip-path: polygon(77% 42%, 66% 46%, 60% 44%, 54% 45%, 47% 43%, 40% 45%, 100% 57%, 100% 44%, 88% 46%, 84% 44%, 81% 45%);
    background: #933f8c;
}
body .box .e {
    z-index: 6;
    -webkit-clip-path: polygon(31% 43%, 46% 39%, 48% 41%, 59% 30%, 61% 33%, 72% 27%, 78% 31%, 83% 29%, 90% 37%, 100% 28%, 100% 58%);
    clip-path: polygon(31% 43%, 46% 39%, 48% 41%, 59% 30%, 61% 33%, 72% 27%, 78% 31%, 83% 29%, 90% 37%, 100% 28%, 100% 58%);
    background: #9d73bf;
}
body .box .f {
    z-index: 5;
    -webkit-clip-path: polygon(0% 28%, 100% 15%, 100% 57%, 0% 36%);
    clip-path: polygon(0% 28%, 100% 15%, 100% 57%, 0% 36%);
    background: #ff4769;
}
body .box .g {
    z-index: 11;
    -webkit-clip-path: polygon(0% 63%, 10% 48%, 7% 48%, 6% 45%, 4% 46%, 1% 46%, 5% 42%, 11% 42%, 9% 40%, 7% 41%, 6% 38%, 5% 39%, 2% 36%, 6% 36%, 11% 37%, 11% 35%, 8% 33%, 9% 33%, 7% 32%, 11% 32%, 13% 34%, 14% 38%, 21% 34%, 28% 38%, 26% 41%, 25% 39%, 24% 41%, 23% 39%, 22% 40%, 21% 39%, 21% 41%, 19% 39%, 18% 40%, 24% 45%, 24% 52%, 21% 55%, 21% 53%, 19% 55%, 19% 53%, 20% 51%, 18% 51%, 18% 50%, 17% 49%, 17% 47%, 15% 47%, 16% 51%, 14% 56%, 13% 57%, 13% 55%, 11% 55%, 13% 53%, 12% 53%, 13% 51%, 11% 51%, 1% 67%, 1% 68%);
    clip-path: polygon(0% 63%, 10% 48%, 7% 48%, 6% 45%, 4% 46%, 1% 46%, 5% 42%, 11% 42%, 9% 40%, 7% 41%, 6% 38%, 5% 39%, 2% 36%, 6% 36%, 11% 37%, 11% 35%, 8% 33%, 9% 33%, 7% 32%, 11% 32%, 13% 34%, 14% 38%, 21% 34%, 28% 38%, 26% 41%, 25% 39%, 24% 41%, 23% 39%, 22% 40%, 21% 39%, 21% 41%, 19% 39%, 18% 40%, 24% 45%, 24% 52%, 21% 55%, 21% 53%, 19% 55%, 19% 53%, 20% 51%, 18% 51%, 18% 50%, 17% 49%, 17% 47%, 15% 47%, 16% 51%, 14% 56%, 13% 57%, 13% 55%, 11% 55%, 13% 53%, 12% 53%, 13% 51%, 11% 51%, 0% 67%, 0% 68%);
    background: #933f8c;
    transform-origin: 0% 100%;
    animation: swaying 5s ease-in-out infinite alternate;
}
@keyframes swaying {
    0% {
        transform: rotate(0deg);
        -webkit-clip-path: polygon(0% 63%, 10% 48%, 7% 48%, 6% 45%, 4% 46%, 1% 46%, 5% 42%, 11% 42%, 9% 40%, 7% 41%, 6% 38%, 5% 39%, 2% 36%, 6% 36%, 11% 37%, 11% 35%, 8% 33%, 9% 33%, 7% 32%, 11% 32%, 13% 34%, 14% 38%, 21% 34%, 28% 38%, 26% 41%, 25% 39%, 24% 41%, 23% 39%, 22% 40%, 21% 39%, 21% 41%, 19% 39%, 18% 40%, 24% 45%, 24% 52%, 21% 55%, 21% 53%, 19% 55%, 19% 53%, 20% 51%, 18% 51%, 18% 50%, 17% 49%, 17% 47%, 15% 47%, 16% 51%, 14% 56%, 13% 57%, 13% 55%, 11% 55%, 13% 53%, 12% 53%, 13% 51%, 11% 51%, 1% 67%, 1% 68%);
        clip-path: polygon(0% 63%, 10% 48%, 7% 48%, 6% 45%, 4% 46%, 1% 46%, 5% 42%, 11% 42%, 9% 40%, 7% 41%, 6% 38%, 5% 39%, 2% 36%, 6% 36%, 11% 37%, 11% 35%, 8% 33%, 9% 33%, 7% 32%, 11% 32%, 13% 34%, 14% 38%, 21% 34%, 28% 38%, 26% 41%, 25% 39%, 24% 41%, 23% 39%, 22% 40%, 21% 39%, 21% 41%, 19% 39%, 18% 40%, 24% 45%, 24% 52%, 21% 55%, 21% 53%, 19% 55%, 19% 53%, 20% 51%, 18% 51%, 18% 50%, 17% 49%, 17% 47%, 15% 47%, 16% 51%, 14% 56%, 13% 57%, 13% 55%, 11% 55%, 13% 53%, 12% 53%, 13% 51%, 11% 51%, 0% 67%, 0% 68%);
    }
    100% {
        transform: rotate(-2deg) translateX(-1%) translateY(-1%);
        -webkit-clip-path: polygon(0% 63%, 10% 48%, 7% 48%, 6% 45%, 4% 46%, 1% 46%, 5% 42%, 11% 42%, 9% 40%, 7% 41%, 6% 38%, 5% 39%, 2% 36%, 6% 36%, 11% 37%, 11% 35%, 8% 33%, 9% 33%, 7% 32%, 11% 32%, 13% 34%, 14% 38%, 21% 34%, 28% 38%, 26% 41%, 25% 39%, 24% 41%, 23% 39%, 22% 40%, 21% 39%, 21% 41%, 19% 39%, 18% 40%, 24% 45%, 24% 52%, 21% 55%, 21% 53%, 19% 55%, 19% 53%, 20% 51%, 18% 51%, 18% 50%, 17% 49%, 17% 47%, 15% 47%, 16% 51%, 14% 56%, 13% 57%, 13% 55%, 11% 55%, 13% 53%, 12% 53%, 13% 51%, 11% 51%, 1% 67%, 1% 68%);
        clip-path: polygon(0% 63%, 10% 48%, 7% 48%, 6% 45%, 4% 46%, 1% 46%, 5% 42%, 11% 42%, 9% 40%, 7% 41%, 6% 38%, 5% 39%, 2% 36%, 6% 36%, 11% 37%, 11% 35%, 8% 37%, 9% 35%, 7% 32%, 11% 34%, 13% 34%, 14% 38%, 21% 36%, 28% 41%, 26% 46%, 25% 44%, 24% 41%, 23% 39%, 22% 44%, 21% 39%, 21% 41%, 19% 39%, 18% 40%, 24% 45%, 24% 52%, 21% 55%, 21% 56%, 19% 58%, 19% 53%, 20% 55%, 18% 55%, 18% 54%, 17% 49%, 17% 47%, 15% 47%, 16% 51%, 14% 56%, 13% 57%, 13% 55%, 11% 55%, 13% 53%, 12% 53%, 13% 51%, 11% 51%, 0% 67%, 0% 68%);
    }
}
body .box .h {
    z-index: 11;
    -webkit-clip-path: polygon(0% 71%, 5% 71%, 13% 75%, 13% 77%, 14% 80%, 12% 81%, 15% 86%, 12% 84%, 15% 89%, 11% 86%, 13% 89%, 7% 88%, 9% 91%, 5% 89%, 7% 92%, 4% 90%, 4% 94%, 2% 93%, 3% 95%, 2% 97%, 6% 100%, 0% 99%);
    clip-path: polygon(0% 71%, 5% 71%, 13% 75%, 13% 77%, 14% 80%, 12% 81%, 15% 86%, 12% 84%, 15% 89%, 11% 86%, 13% 89%, 7% 88%, 9% 91%, 5% 89%, 7% 92%, 4% 90%, 4% 94%, 2% 93%, 3% 95%, 2% 97%, 6% 100%, 0% 99%);
    background: #933f8c;
    animation: blowing 3s ease-in-out infinite alternate;
}
@keyframes blowing {
    from {
        -webkit-clip-path: polygon(0% 71%, 5% 71%, 13% 75%, 13% 77%, 14% 80%, 12% 81%, 15% 86%, 12% 84%, 15% 89%, 11% 86%, 13% 89%, 7% 88%, 9% 91%, 5% 89%, 7% 92%, 4% 90%, 4% 94%, 2% 93%, 3% 95%, 2% 97%, 6% 100%, 0% 99%);
        clip-path: polygon(0% 71%, 5% 71%, 13% 75%, 13% 77%, 14% 80%, 12% 81%, 15% 86%, 12% 84%, 15% 89%, 11% 86%, 13% 89%, 7% 88%, 9% 91%, 5% 89%, 7% 92%, 4% 90%, 4% 94%, 2% 93%, 3% 95%, 2% 97%, 6% 100%, 0% 99%);
    }
    to {
        -webkit-clip-path: polygon(0% 71%, 5% 71%, 13% 75%, 13% 77%, 14% 80%, 12% 81%, 15% 86%, 12% 84%, 15% 89%, 11% 86%, 13% 89%, 7% 88%, 9% 91%, 5% 89%, 7% 92%, 4% 90%, 4% 94%, 2% 93%, 3% 95%, 2% 97%, 6% 100%, 0% 99%);
        clip-path: polygon(0% 71%, 5% 71%, 13% 75%, 13% 79%, 14% 84%, 12% 81%, 15% 86%, 12% 84%, 15% 91%, 11% 90%, 13% 93%, 7% 88%, 9% 95%, 5% 89%, 7% 92%, 4% 90%, 4% 99%, 2% 100%, 3% 95%, 2% 97%, 6% 100%, 0% 99%);
    }
}
body .box .i {
    z-index: 11;
    -webkit-clip-path: polygon(45% 100%, 67% 88%, 52% 77%, 61% 70%, 50% 63%, 55% 60%, 49% 57%, 51% 57%, 44% 50%, 42% 49%, 48% 56%, 46% 56%, 52% 60%, 47% 63%, 57% 70%, 46% 77%, 59% 89%, 34% 99%);
    clip-path: polygon(45% 100%, 67% 88%, 52% 77%, 61% 70%, 50% 63%, 55% 60%, 49% 57%, 51% 57%, 44% 50%, 42% 49%, 48% 56%, 46% 56%, 52% 60%, 47% 63%, 57% 70%, 46% 77%, 59% 89%, 34% 100%);
    background: #ffb14b;
}
body .box .s {
    position: absolute;
    z-index: 5;
    width: 25%;
    height: 25%;
    background: #ffb14b;
    border-radius: 500%;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    animation: sunrise 40s linear infinite alternate;
}
@keyframes sunrise {
    0% {
        transform: translateX(-50%) translateY(0%);
    }
    50% {
        transform: translateX(-50%) translateY(-150%);
    }
    100% {
        transform: translateX(-50%) translateY(-150%);
    }
}

HTML

很漂亮的日出渐变背景色。

css3, light, tree

编辑器支持Emmet

快捷键

很漂亮的日出渐变背景色。

css3, light, tree

CSS3 带空军1号飞过背景的白宫场景动画

HTML5/CSS3很棒的日出光线弥漫动画特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：