CSS3 日落时的渐变色背景

CSS Animated Sunset Background Gradient

CSS3

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body,
html {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    position: relative;
}
body .container1,
body .container2,
body .container3,
html .container1,
html .container2,
html .container3 {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
body .container1,
html .container1 {
    background-image: linear-gradient(#5583be, #eebaa5, #de7d8e 70%);
}
body .container2,
html .container2 {
    background: #5583BE;
}
body .container3,
html .container3 {
    background-image: linear-gradient(#283142 20%, #ef4700 50%, #ff9919 70%);
}
body .content,
html .content {
    background-image: url("http://gallery.yopriceville.com/var/resizes/Free-Clipart-Pictures/Silhouettes-PNG/Palm_Trees_Silhouette_PNG_Clip_Art_Image.png?m=1463584089");
    background-size: 500px;
    background-repeat: no-repeat;
    height: 500px;
    width: 500px;
    position: absolute;
    bottom: 0;
    left: -120px;
}
@keyframes opacity-change1 {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
}
@keyframes opacity-change2 {
    0%, 100%, 50% {
        opacity: 0;
    }
    25% {
        opacity: 0.5;
    }
    75% {
        opacity: 0.5;
    }
}
@keyframes opacity-change3 {
    0%, 100% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
}
.container1 {
    -moz-animation: opacity-change1 linear 5s infinite;
    -webkit-animation: opacity-change1 linear 5s infinite;
    animation: opacity-change1 linear 5s infinite;
}
.container2 {
    -moz-animation: opacity-change2 linear 5s infinite;
    -webkit-animation: opacity-change2 linear 5s infinite;
    animation: opacity-change2 linear 5s infinite;
}
.container3 {
    -moz-animation: opacity-change3 linear 5s infinite;
    -webkit-animation: opacity-change3 linear 5s infinite;
    animation: opacity-change3 linear 5s infinite;
}

HTML

CSS Animated Sunset Background Gradient

CSS3

编辑器支持Emmet

快捷键

CSS Animated Sunset Background Gradient

CSS3

CSS3 带悬停信息提示框的水平时间线（紫红色调渐变背景）

CSS3 不停变化的单一元素的渐变色背景动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：