作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试仅使用 CSS 而非 JS 创建横幅。如果我使用诸如 GreenSock 或 Create 之类的 JS 库来设置时间会更容易,但我不知道如何仅使用关键帧来完成。
我尝试设置元素的不透明度以显示下面的元素,但没有成功。
box-sizing: border-box;
margin: 0;
padding: 0;
}
.banner{
position: relative;
width: 100vw;
}
.first {
background-color: black;
position: absolute;
display: flex;
flex-direction: column;
align-items: center;
width: 100vw;
height: 100vh;
}
@keyframes first {
0% {opacity: 0;}
50% {opacity: 1;}
100% {opacity: 0;}
}
.first img {
width: 90%;
position: absolute;
object-fit: contain;
top: 30%;
animation-name: first-screen;
animation-duration: 2s;
animation-timing-function: ease;
}
.bg {
width: 100vw;
height: 100vh;
margin-top: -10%;
overflow: hidden;
object-fit: cover;
object-position: center;
animation-name: bg;
animation-duration: 3s;
animation-delay: 2s;
}
@keyframes bg {
0% {opacity: 0;}
100% {opacity: 1;}
}
.offer{
display: flex;
width: 100vw;
object-fit: contain;
position: fixed;
bottom:0
}
.copy {
position: absolute;
display: flex;
flex-direction: column;
align-items: center;
width: 100vw;
height: 100vh;
animation-name: copy;
animation-duration: 3s;
animation-delay: 2s;
}
@keyframes copy {
0% {opacity: 0;}
50% {opacity: 1;}
100% {opacity: 0;}
}
.headline {
width: 70%;
position: absolute;
object-fit: contain;
top: 10%;
}
.subheadline {
width: 70%;
position: absolute;
object-fit: contain;
top: 22%;
}
我需要第一个屏幕淡入,该屏幕需要显示两秒然后淡出,然后背景会立即淡入并持续三秒钟,同时副本也会以不同的速度淡入。在这种情况下,除了背景之外,我的所有元素最终都显示在动画结束时。
这是 html:
<div class="first-screen"><img src="img/1st_frame.jpg"/></div>
<div class="copy">
<img src="img/headline.png" class="headline"/>
<img src="img/subheadline.png" class="subheadline" />
</div>
<img src="img/offer.png" class="offer" />
<img src="img/bg.jpg" class="bg"/>
最佳答案
我通过为所有动画设置相同的持续时间然后使用百分比来显示和隐藏元素来修复它,但仍然有一些元素应该同时显示和淡出并且具有不同的时间,即使 CSS关键帧和属性是相同的。 bg 和标题应该同时淡出,而不是只有标题淡出。有谁知道为什么吗?
html {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.interstitial {
position: relative;
width: 100vw;
}
.first {
background-color: black;
position: absolute;
display: flex;
flex-direction: column;
align-items: center;
width: 100vw;
height: 100vh;
}
.first img {
width: 90%;
position: absolute;
object-fit: contain;
top: 30%;
animation-name: first-screen;
animation-duration: 5s;
animation-timing-function: ease-in;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
}
@keyframes first {
0% {
opacity: 0.5;
}
20% {
opacity: 1;
}
40% {
opacity: 0
}
100% {
opacity: 0;
}
}
.bg {
width: 100vw;
height: 100vh;
margin-top: -20%;
overflow: hidden;
object-fit: cover;
object-position: center;
animation-name: bg;
animation-duration: 5s;
animation-timing-function: ease;
animation-iteration-count: infinite;
animation-fill-mode: forwards;
z-index: 0
}
@keyframes bg {
0% {
opacity: 0;
}
40% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.offer {
display: flex;
width: 100vw;
object-fit: contain;
position: fixed;
bottom: 0;
z-index: 999;
}
.copy {
position: absolute;
display: flex;
flex-direction: column;
align-items: center;
width: 100vw;
height: 100vh;
animation-name: headlines;
animation-duration: 5s;
animation-timing-function: ease;
animation-iteration-count: infinite;
animation-fill-mode: forwards;
}
@keyframes headlines {
0% {
opacity: 0;
}
40% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.headline {
width: 70%;
position: absolute;
object-fit: contain;
top: 10%;
}
.subheadline {
width: 70%;
position: absolute;
object-fit: contain;
top: 22%;
}
关于css - 我如何只使用 CSS 为横幅制作动画,时间轴搞砸了,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56401757/
我是一名优秀的程序员,十分优秀!