我想从上到下方向传输我的图像。现在是从左下到上过渡。
HTML
<header>
<img src="http://res.cloudinary.com/paresh/image/upload/v1464936481/imgpsh_fullsize_aab4vm.png"><br/>
<img src="http://res.cloudinary.com/paresh/image/upload/v1464936481/imgpsh_fullsize_aab4vm.png"><br/>
<img src="http://res.cloudinary.com/paresh/image/upload/v1464936481/imgpsh_fullsize_aab4vm.png"></header>
JS
$(window).scroll(function() {
if ($(this).scrollTop() > 1){
$('header').addClass("sticky");
}
else{
$('header').removeClass("sticky");
}
});
CSS
header{
position: fixed;
width: 100%;
text-align: center;
font-size: 72px;
line-height: 108px;
color: #fff;
font-family: 'PT Sans', sans-serif;
opacity : 0;
}
header.sticky {
font-size: 24px;
line-height: 48px;
text-align: left;
padding-left: 20px;
transition: all 0.6s ease;
opacity : 1;
animation-direction: normal;
}
body{
height:1000px
}
最佳答案
添加 padding-left: 20px;
到 header
就像在 header.sticky
上一样。要从上到下设置动画,请将 bottom:0;
添加到 header
。
代码(https://jsfiddle.net/6kbcp54m/1/):
$(window).scroll(function() {
if ($(this).scrollTop() > 1){
$('header').addClass("sticky");
}
else{
$('header').removeClass("sticky");
}
});
header {
position: fixed;
width: 100%;
text-align: center;
font-size: 72px;
line-height: 108px;
color: #fff;
font-family: 'PT Sans', sans-serif;
opacity : 0;
padding-left: 20px;
bottom:0;
}
header.sticky {
font-size: 24px;
line-height: 48px;
text-align: left;
padding-left: 20px;
transition: all 0.6s ease;
opacity : 1;
animation-direction: normal;
}
body {
height:1000px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<img src="http://res.cloudinary.com/paresh/image/upload/v1464936481/imgpsh_fullsize_aab4vm.png"><br/>
<img src="http://res.cloudinary.com/paresh/image/upload/v1464936481/imgpsh_fullsize_aab4vm.png"><br/>
<img src="http://res.cloudinary.com/paresh/image/upload/v1464936481/imgpsh_fullsize_aab4vm.png">
</header>
关于html - 在CSS中从上到下过渡图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37607888/