CSS3 hue-rotate过滤器和背景视频

使用颜色过滤器结合背景视频营造出四季更替季节色彩变换的视觉效果。

css3, filter, video

《three.js使用多个渐变torus模拟光环光晕》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

div {
    position: absolute;
    top: 50%;
    left: 50%;
}
.wrapper {
    margin: -7.98em -20.02em;
    width: 40.04em;
    height: 15.96em;
}
.tiles {
    -webkit-animation: r 9s linear infinite;
    animation: r 9s linear infinite;
}
@-webkit-keyframes r {
    to {
        -webkit-filter: hue-rotate(360deg);
        filter: hue-rotate(360deg);
    }
}
@keyframes r {
    to {
        -webkit-filter: hue-rotate(360deg);
        filter: hue-rotate(360deg);
    }
}
video {
    width: inherit;
    height: inherit;
    -o-object-fit: cover;
    object-fit: cover;
}
.tile {
    width: 7em;
    height: 4.2em;
    opacity: .5;
    background: #59a112;
    -webkit-animation: a 0s ease-in-out infinite alternate;
    animation: a 0s ease-in-out infinite alternate;
}
.tile:nth-of-type(1) {
    margin: -7.14em -19.18em;
    -webkit-animation-duration: 3.95s;
    animation-duration: 3.95s;
    -webkit-animation-delay: -0.8295s;
    animation-delay: -0.8295s;
}
.tile:nth-of-type(2) {
    margin: -7.14em -11.34em;
    -webkit-animation-duration: 2.02s;
    animation-duration: 2.02s;
    -webkit-animation-delay: -1.4746s;
    animation-delay: -1.4746s;
}
.tile:nth-of-type(3) {
    margin: -7.14em -3.5em;
    -webkit-animation-duration: 2.01s;
    animation-duration: 2.01s;
    -webkit-animation-delay: -1.6683s;
    animation-delay: -1.6683s;
}
.tile:nth-of-type(4) {
    margin: -7.14em 4.34em;
    -webkit-animation-duration: 3.8s;
    animation-duration: 3.8s;
    -webkit-animation-delay: -2.09s;
    animation-delay: -2.09s;
}
.tile:nth-of-type(5) {
    margin: -7.14em 12.18em;
    -webkit-animation-duration: 2.92s;
    animation-duration: 2.92s;
    -webkit-animation-delay: -1.0512s;
    animation-delay: -1.0512s;
}
.tile:nth-of-type(6) {
    margin: -2.1em -19.18em;
    -webkit-animation-duration: 3.47s;
    animation-duration: 3.47s;
    -webkit-animation-delay: -2.6719s;
    animation-delay: -2.6719s;
}
.tile:nth-of-type(7) {
    margin: -2.1em -11.34em;
    -webkit-animation-duration: 2.45s;
    animation-duration: 2.45s;
    -webkit-animation-delay: -0.4165s;
    animation-delay: -0.4165s;
}
.tile:nth-of-type(8) {
    margin: -2.1em -3.5em;
    -webkit-animation-duration: 3.27s;
    animation-duration: 3.27s;
    -webkit-animation-delay: -1.2753s;
    animation-delay: -1.2753s;
}
.tile:nth-of-type(9) {
    margin: -2.1em 4.34em;
    -webkit-animation-duration: 2.68s;
    animation-duration: 2.68s;
    -webkit-animation-delay: -2.5728s;
    animation-delay: -2.5728s;
}
.tile:nth-of-type(10) {
    margin: -2.1em 12.18em;
    -webkit-animation-duration: 2.77s;
    animation-duration: 2.77s;
    -webkit-animation-delay: -1.7451s;
    animation-delay: -1.7451s;
}
.tile:nth-of-type(11) {
    margin: 2.94em -19.18em;
    -webkit-animation-duration: 3.41s;
    animation-duration: 3.41s;
    -webkit-animation-delay: -2.8985s;
    animation-delay: -2.8985s;
}
.tile:nth-of-type(12) {
    margin: 2.94em -11.34em;
    -webkit-animation-duration: 2.1s;
    animation-duration: 2.1s;
    -webkit-animation-delay: -0.609s;
    animation-delay: -0.609s;
}
.tile:nth-of-type(13) {
    margin: 2.94em -3.5em;
    -webkit-animation-duration: 2.66s;
    animation-duration: 2.66s;
    -webkit-animation-delay: -0.9044s;
    animation-delay: -0.9044s;
}
.tile:nth-of-type(14) {
    margin: 2.94em 4.34em;
    -webkit-animation-duration: 3.71s;
    animation-duration: 3.71s;
    -webkit-animation-delay: -0.9275s;
    animation-delay: -0.9275s;
}
.tile:nth-of-type(15) {
    margin: 2.94em 12.18em;
    -webkit-animation-duration: 2.54s;
    animation-duration: 2.54s;
    -webkit-animation-delay: -0.1778s;
    animation-delay: -0.1778s;
}
@-webkit-keyframes a {
    to {
        -webkit-filter: brightness(200%) saturate(0);
        filter: brightness(200%) saturate(0);
    }
}
@keyframes a {
    to {
        -webkit-filter: brightness(200%) saturate(0);
        filter: brightness(200%) saturate(0);
    }
}

HTML

使用颜色过滤器结合背景视频营造出四季更替季节色彩变换的视觉效果。

css3, filter, video

编辑器支持Emmet

快捷键

使用颜色过滤器结合背景视频营造出四季更替季节色彩变换的视觉效果。

css3, filter, video

使用CSS3 placeholder-shown过滤器（选择器）实现的浮动输入框标签

CSS3 使用shape-outside属性生成圆形外框效果

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：