使用纯CSS3实现相片在时光流转中褪色的动画特效

Back In Time Vertical 相片从底部逐渐向上移动，同时运用filter: grayscale来改变颜色。

css3, fade, photo

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

@import 'https://fonts.googleapis.com/css?family=Lemonada';
body {
    background-color: rgba(0, 0, 0, 0.8);
}
h1 {
    color: white;
    font-family: "Lemonada";
    text-align: center;
    text-shadow: 1px 5px 15px black;
}
.back-in-time {
    margin: 0 auto;
    border: 10px solid #ccc;
    font-size: 0;
    -webkit-perspective: 500px;
    perspective: 500px;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    width: 300px;
    background-color: #aaa;
    box-shadow: 1px 5px 18px 10px #222;
}
.back-in-time div {
    overflow: hidden;
    position: relative;
    width: 300px;
    height: 200px;
}
.back-in-time div img {
    top: 100%;
    -webkit-animation-name: slide;
    animation-name: slide;
    -webkit-animation-duration: 10s;
    animation-duration: 10s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}
.back-in-time div:first-child {
    -webkit-transform-origin: bottom;
    transform-origin: bottom;
    -webkit-transform: rotateX(-30deg);
    transform: rotateX(-30deg);
}
.back-in-time div:first-child img {
    position: relative;
    -webkit-filter: grayscale(90%);
    filter: grayscale(90%);
    -webkit-animation-delay: 5s;
    animation-delay: 5s;
}
.back-in-time div:nth-child(2) img {
    position: relative;
    -webkit-filter: sepia(80%);
    filter: sepia(80%);
    -webkit-animation-delay: 2.5s;
    animation-delay: 2.5s;
}
.back-in-time div:last-child {
    -webkit-transform-origin: top;
    transform-origin: top;
    -webkit-transform: rotateX(30deg);
    transform: rotateX(30deg);
}
.back-in-time div:last-child img {
    position: relative;
}
@-webkit-keyframes slide {
    to {
        top: -300%;
    }
}
@keyframes slide {
    to {
        top: -300%;
    }
}

HTML

Back In Time Vertical 相片从底部逐渐向上移动，同时运用filter: grayscale来改变颜色。

css3, fade, photo

编辑器支持Emmet

快捷键

Back In Time Vertical 相片从底部逐渐向上移动，同时运用filter: grayscale来改变颜色。

css3, fade, photo

使用CSS3 transform 3d实现的三维轨道图片分割动画特效

使用纯CSS3实现的云雾动画特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：