CSS3 弧形渐变色背景+球形涟漪

css3 linear-gradient 和 radial-gradient(ellipse...)用法演示。

css3, ripple

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

.gradient0 {
    background: linear-gradient(270deg, #ee4073, #fec883);
    background-size: 400% 400%;
}
.animation {
    -webkit-animation: GradientAnimation 15s ease infinite;
    -moz-animation: GradientAnimation 15s ease infinite;
    animation: GradientAnimation 15s ease infinite;
}
body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 16px;
    color: white;
    background: linear-gradient(270deg, #ee4073, #fec883);
    background-size: 400% 400%;
    -webkit-animation: none;
    -moz-animation: none;
    -o-animation: none;
    animation: none;
    -webkit-animation: GradientAnimation 15s ease infinite;
    -moz-animation: GradientAnimation 15s ease infinite;
    animation: GradientAnimation 15s ease infinite;
    overflow: hidden;
}
.container {
    width: 100vw;
    height: 100vh;
    display: table;
}
.row {
    display: table-cell;
    width: 100%;
    height: 100%;
}
.vcenter {
    vertical-align: middle;
}
.ring1 {
    position: absolute;
    left: 50vw;
    background-image: radial-gradient(ellipse farthest-corner at 45px 45px, #0ff 0%, rgba(0, 0, 255, 0) 50%, #00f 95%);
    background-position: center center;
    -webkit-animation: radar 5s ease infinite;
    -moz-animation: radar 5s ease infinite;
    animation: radar 5s ease infinite;
    -webkit-border-radius: 100%;
    -webkit-background-clip: padding-box;
    -moz-border-radius: 100%;
    -moz-background-clip: padding;
    border-radius: 100%;
    background-clip: padding-box;
}
.ring2 {
    position: absolute;
    left: 50vw;
    background-image: radial-gradient(ellipse farthest-corner at 45px 45px, #0ff 0%, rgba(0, 0, 255, 0) 50%, #00f 95%);
    background-position: center center;
    -webkit-animation: radar 5s ease infinite;
    -moz-animation: radar 5s ease infinite;
    animation: radar 5s ease infinite;
    -webkit-border-radius: 100%;
    -webkit-background-clip: padding-box;
    -moz-border-radius: 100%;
    -moz-background-clip: padding;
    border-radius: 100%;
    background-clip: padding-box;
    /* Chrome, Safari, Opera */
    
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s;
}
.ring3 {
    position: absolute;
    left: 50vw;
    background-image: radial-gradient(ellipse farthest-corner at 45px 45px, #0ff 0%, rgba(0, 0, 255, 0) 50%, #00f 95%);
    background-position: center center;
    -webkit-animation: radar 5s ease infinite;
    -moz-animation: radar 5s ease infinite;
    animation: radar 5s ease infinite;
    -webkit-border-radius: 100%;
    -webkit-background-clip: padding-box;
    -moz-border-radius: 100%;
    -moz-background-clip: padding;
    border-radius: 100%;
    background-clip: padding-box;
    /* Chrome, Safari, Opera */
    
    -webkit-animation-delay: 0.6s;
    animation-delay: 0.6s;
}
@-webkit-keyframes GradientAnimation {
    0% {
        background-position: 0% 48%;
    }
    50% {
        background-position: 100% 53%;
    }
    100% {
        background-position: 0% 48%;
    }
}
@-moz-keyframes GradientAnimation {
    0% {
        background-position: 0% 48%;
    }
    50% {
        background-position: 100% 53%;
    }
    100% {
        background-position: 0% 48%;
    }
}
@keyframes GradientAnimation {
    0% {
        background-position: 0% 48%;
    }
    50% {
        background-position: 100% 53%;
    }
    100% {
        background-position: 0% 48%;
    }
}
@keyframes radar {
    1% {
        width: 0vw;
        height: 0vw;
        margin-left: 0vw;
        margin-top: 0vw;
    }
    100% {
        width: 200vw;
        height: 200vw;
        margin-left: -100vw;
        margin-top: -100vw;
    }
}
@-webkit-keyframes radar {
    1% {
        width: 0vw;
        height: 0vw;
        margin-left: 0vw;
        margin-top: 0vw;
    }
    100% {
        width: 200vw;
        height: 200vw;
        margin-left: -100vw;
        margin-top: -100vw;
    }
}

HTML

css3 linear-gradient 和 radial-gradient(ellipse...)用法演示。

css3, ripple

编辑器支持Emmet

快捷键

css3 linear-gradient 和 radial-gradient(ellipse...)用法演示。

css3, ripple

HTML5 CSS3很棒的一款带渐变背景色和涟漪动画的原质化风格按钮

CSS3 酷酷的渐变色动画背景的404字样

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：