Question

我正在尝试重现顶部图片动画

.nico{
    width: 350px;
    height: 200px;
    position:relative;
    overflow: hidden;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet"/>
<div class="nico"><img class="animated slideInUp" src="http://lorempicsum.com/futurama/350/200/1" ></div>

但结果却截然不同

Answer 1

通过使用开发人员工具查看他们网站上的代码（我强烈建议您开始这样做），我能够提取此代码：

＆＃13;

.nico{
    width: 350px;
    height: 200px;
    position:relative;
    overflow: hidden;
}
.is-animated {
    animation-duration: .9s;
    animation-fill-mode: both;
    animation-timing-function: cubic-bezier(.4,0,.2,1);
}
@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translate3d(0,75%,0);
    }
    100% {
        opacity: 1;
        transform: none;
    }
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet"/>
<div class="nico"><img class="is-animated fadeInUp" src="http://lorempicsum.com/futurama/350/200/1" ></div>

＆＃13;

＆＃13;
我还对类进行了一些更改（animated =＆gt; is-animated，slideInUp =＆gt; fadeInUp）

向上滑动动画

1 个答案: