CSS3动画 - 图像保持当div的宽度变化
我试图模仿喜欢的网站移动:http://shiz.co/和http://www.maison-vignaux.com/workCSS3动画 - 图像保持当div的宽度变化
图像显示的方式,就好像他们不动,但更多的是获得展示在一个区间。我想要这种类型的动画。现在,我的形象移动,而不是像上面的网站显示更多。
我不知道如何做到这一点。
这里是我的小提琴:https://jsfiddle.net/z7ukk6kb/(无视动画的名称)
编辑:问题是在DIV的背景位置。现在它做我想要的。
<div class="parallax-elem">
<div class="img"></div>
</div>
$('.img').addClass('slide-top');
我的CSS:
.slide-top {
-webkit-animation: slide-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: slide-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@keyframes slide-top {
0% {
width:0;
}
100% {
width:100%;
}
}
.parallax-elem {
overflow:hidden;
position: absolute;
height:600px;
width:100%;
}
.parallax-elem:after {
content:"";
background-color:#eee;
width:100%;
height:100%;
top:0;
left:0;
right:0;
position: absolute;
z-index:10;
}
.img {
background:url('http://media.nj.com/entertainment_impact_dining/photo/coffee-stock-photo-0e8b300f42157b6f.jpg') no-repeat;
background-size: cover;
background-position: center center;
position: relative;
height: 100%;
z-index:11;
width: 100%;
}
尝试从.img
删除background-position
。
由于您已设置background-position: center center
,随着动画期间div
的宽度增加,背景图片会不断调整以保持居中。这是它继续前进的原因。
$('.img').addClass('slide-top');
.slide-top {
animation: slide-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both infinite;
}
@keyframes slide-top {
0% {
width:0;
}
100% {
width:100%;
}
}
body {
max-width:800px;
\t margin:0 auto;
\t position:relative;
}
.parallax-elem {
overflow:hidden;
position: absolute;
height:600px;
width:100%;
}
.parallax-elem:after {
content:"";
background-color:#eee;
width:100%;
height:100%;
top:0;
left:0;
right:0;
position: absolute;
z-index:10;
}
.img {
background:url('http://media.nj.com/entertainment_impact_dining/photo/coffee-stock-photo-0e8b300f42157b6f.jpg') no-repeat;
background-size: cover;
position: relative;
height: 100%;
z-index:11;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parallax-elem">
<div class="img"></div>
</div>
它做到了人,谢谢。 认为这是我的关键帧动画。不会认为这是背景属性 再次感谢! – corporalpoon
@corporalpoon很高兴知道这是有帮助的。 :) –
之所以出现这种情况是因为你使用background-position中心。这正是正在做的事,它将你的形象调整到中心位置。如果您要更改为background-position: left center
,则问题已解决,您可以看到in this fiddle。
您也可以完全删除背景位置,但是您也可能会失去垂直对齐,您可能不希望这样做。
此外,你可以让你的动画轻松许多,你不需要关键帧:
.img{
width: 0%;
background-position: left center;
animation: width 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940);
}
.img.slide-top{
width: 100%;
}
啊,谢谢你!这是一个更清洁。 我希望我知道如何制作非常酷的css3动画网站,比如我发布的动画网站,但我真的不知道从哪里开始。 – corporalpoon
那么,你现在开始做什么;)只是一步一步改进。 – Martijn
非常真实,哈哈。再次感谢,伙计 – corporalpoon
有什么问题吗? – birdspider
我该怎么做?感谢downvote。我只是想学习。我提供了我的代码和当前正在执行的动画。 – corporalpoon
参见[mcve](https://*.com/help/mcve) - 特别是“描述问题”。它不起作用“不是问题陈述,告诉我们期望的行为应该是什么。” – birdspider