[英]How do I prevent keyframes from pushing my text in CSS?
我目前希望我網頁的頂部有一個縮小的圖像。 但是,這會推送我擁有的所有文本,包括按鈕和我的 header。我的背景圖像正在按照我想要的方式移動,但我的 header 和按鈕也在移動,我根本不希望它們移動。
<div className="static-slider-head banner2">
<Container>
<Row className="">
<Col lg="6" md="6" className="align-self-center intro">
<h1 className="title">
Welcome
</h1>
<h4 className="subtitle font-light">
Filler Text
</h4>
<a
href="/"
className="btn btn-danger m-r-20 btn-md m-t-10 "
>
Filler Text
</a>
<a
href="/"
className="btn btn-success m-r-20 btn-md m-t-10 " target="_blank"
>
Filler Text <i className="fa fa-instagram"></i>
</a>
</Col>
<Col lg="6" md="6">
</Col>
</Row>
</Container>
</div>
.static-slider-head {
min-height: 36.25rem;
display: flex;
flex-direction: column;
justify-content: center;
overflow: auto;
background-size: cover;
background-position: center center;
display: table;
width: 100%;
padding: 0;
background:linear-gradient(to bottom, rgba(0,0,0,0) 20%, rgba(0,0,0,1)), url('../../public/top2.png') center center no-repeat;
background-color: #e5e5e5;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
animation: scale 10s;
animation-fill-mode: forwards;
transform-origin: bottom right;
overflow: hidden;
.title {
color: $white;
font-weight: 700;
font-size: 70px;
line-height: 100px;
}
.subtitle {
color: $white;
line-height: 30px;
}
}
@keyframes scale {
0% {
transform: scale(1);
}
100% {
transform: scale(1.1);
}
}
我的文本和 header 都向左移動。 我要他們不動。 我只希望圖像移動。
所以我要做的是讓帶有圖像的 div 做比例只是它自己的 div,而不是作為父 div。 然后我會將所有內容(減去static-slider-head
div)包裝到一個容器中,然后將所有這些內容包裝到一個主包裝器中。
然后,您可以將此代碼添加到您的 CSS,這將 position 根據主包裝器 div 而不是正在擴展的 div 來顯示您的文本。
.container {
position: absolute;
top: 0;
left: 0;
}
.mainwrap {
position: relative;
}
這是一個工作示例:
.static-slider-head { min-height: 36.25rem; display: flex; flex-direction: column; justify-content: center; overflow: auto; background-size: cover; background-position: center center; width: 100%; padding: 0; background:linear-gradient(to bottom, rgba(0,0,0,0) 20%, rgba(0,0,0,1)), url('../../public/top2.png') center center no-repeat; background-color: #e5e5e5; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; -o-background-size: cover; animation: scale 10s; animation-fill-mode: forwards; transform-origin: bottom right; overflow: hidden; .title { color: $white; font-weight: 700; font-size: 70px; line-height: 100px; }.subtitle { color: $white; line-height: 30px; } }.container { position: absolute; top: 0; left: 0; }.mainwrap { position: relative; } @keyframes scale { 0% { transform: scale(1); } 100% { transform: scale(1.1); } }
<div class="mainwrap"> <div class="static-slider-head banner2"></div> <div class="container"> <Container> <Row class=""> <Col lg="6" md="6" class="align-self-center intro"> <h1 class="title"> Welcome </h1> <h4 class="subtitle font-light"> Filler Text </h4> <a href="/" class="btn btn-danger mr-20 btn-md mt-10 " > Filler Text </a> <a href="/" class="btn btn-success mr-20 btn-md mt-10 " target="_blank" > Filler Text <i class="fa fa-instagram"></i> </a> </Col> <Col lg="6" md="6"> </Col> </Row> </Container> </div> </div>
可能是這樣的可能是一種方法:在@keyframes
animation 中使用background-size
css 屬性。
@keyframes zooming { 0% { background-size: 100% 100%; } 50% { background-size: 300% 300%; } 100% { background-size: 100% 100%; } }.header-with-bg-animation { background-image: url('https://images.unsplash.com/photo-1668462503626-1309916ca702?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2970&q=80'); animation-name: zooming; animation-duration: 4s; animation-iteration-count: infinite; background-repeat: none; background-position: center; width: 100%; height: 200px; }.header-content { color: #FFF; text-align: center; padding: 40px 20px 20px 20px; }.header-content *{ background: rgba(0, 0, 0, .45); }
<div class="header-with-bg-animation"> <div class="header-content"> <h3>Title</h3> <p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown...</p> <a>Click me +1</a> </div> </div>
我使用了以下內容並且能夠縮小並保持縮小而不重復。 這個解決方案還幫助我不需要修改位置,也不需要修復樣式。
.static-slider-head {
min-height: 36.25rem;
display: flex;
background-color: #D8BAE6;
background:linear-gradient(to bottom, rgba(0,0,0,0) 20%, rgba(0,0,0,1)), url('../../public/top2.png') center center no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
background-size: 110%;
background-position: center center;
animation: shrink 2s alternate;
.title {
color: $white;
font-weight: 700;
font-size: 42px;
line-height: 54px;
}
.subtitle {
color: $white;
line-height: 30px;
}
}
@keyframes shrink {
0% {
background-size: 100%;
}
100% {
background-size: 110%;
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.