如何解决如何使动画相对于父元素而不是身体移动?
我要使用this CSS动画作为主页的一部分。
body{
margin: 0;
padding: 0;
overflow: hidden;
}
.flower-section{
position: absolute;
width: 100%;
height: 100%;
background: radial-gradient(#333,#000);
}
.set{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1;
}
.set div{
position: absolute;
display: block;
}
.set div img{
background-color: red;
padding: 1rem;
}
.set div:nth-child(1){
left: 5%;
animation: animate 15s linear infinite;
animation-delay: -7s;
}
.set div:nth-child(2){
left: 15%;
animation: animate 20s linear infinite;
animation-delay: -5s;
}
.set div:nth-child(3){
left: 25%;
animation: animate 25s linear infinite;
}
.set div:nth-child(4){
left: 35%;
animation: animate 15s linear infinite;
}
.set div:nth-child(5){
left: 50%;
animation: animate 18s linear infinite;
animation-delay: -10s;
}
.set div:nth-child(6){
left: 65%;
animation: animate 12s linear infinite;
animation-delay: -8s;
}
.set div:nth-child(7){
left: 75%;
animation: animate 14s linear infinite;
}
.set div:nth-child(8){
left: 85%;
animation: animate 15s linear infinite;
animation-delay: -7s;
}
.set div:nth-child(9){
left: 95%;
animation: animate 19s linear infinite;
}
@keyframes animate{
0%{
top: -10%;
opacity: 0;
transform: translateX(20px) rotate(0deg);
}
10%{
opacity: 1;
}
20%{
transform: translateX(-20px) rotate(45deg);
}
40%{
transform: translateX(-20px) rotate(90deg);
}
60%{
transform: translateX(20px) rotate(135deg);
}
80%{
transform: translateX(-20px) rotate(180deg);
}
100%{
top:110%;
transform: translateX(-20px) rotate(225deg);
}
}
.set2{
transform: scale(1.5) rotateY(180deg);
filter: blur(2px);
z-index: 0;
}
.set3{
transform: scale(0.8) rotateX(180deg);
filter: blur(4px);
z-index: 0;
}
.flower-title{
position: absolute;
top: 50%;
transform: translateY(-50% );
width: 100%;
text-align: center;
color: #fff;
margin: 0;
padding: 0;
font-size: 5em;
font-family: sans-serif;
z-index: 1;
}
但是当我尝试实现它时,this发生了。
红色方块似乎相对于整个身体而不是父容器在移动。我该如何解决? 我已经尝试过使父母和孩子的位置相对,但是似乎没有用。
解决方法
红色正方形刚刚在整个位置浮动的原因是您已将容器元素设置为position: relative;
,但从未将任何正方形设置为position: absolute;
。通过将正方形设置为绝对位置,您在它们上所做的所有操作现在都将相对于其容器。
我所做的是将所有.set div:nth-child(n)
设置为position: absolute;
。然后,我给main
赋予了白色背景,以便红色方块能够落在后面。我还给了nav
一个相对位置,以便给它一个比红色正方形更高的z索引,因此这些正方形从导航开始而不是在内部开始。
我还要将容器的高度设置为固定的600px高度,并将其设置为100%,因为以%为单位的高度是相对单位,因此高度取决于父元素的高度。
这是我如何达到您所期望的结果:
body{
margin: 0;
padding: 0;
}
main {
background: white;
}
nav {
position: relative;
z-index: 99;
}
.flower-section{
position: relative;
height: 600px;
background: radial-gradient(#333,#000);
/* overflow: hidden; */
}
.set{
position: relative;
width: 100%;
height: 100%;
top: 0;
left: 0;
/* z-index: 1; */
}
.set div{
position: relative;
display: block;
}
.set div img{
background-color: red;
padding: 1rem;
}
.set div:nth-child(1){
position: absolute;
left: 5%;
animation: animate 15s linear infinite;
animation-delay: -7s;
}
.set div:nth-child(2){
position: absolute;
left: 15%;
animation: animate 20s linear infinite;
animation-delay: -5s;
}
.set div:nth-child(3){
position: absolute;
left: 25%;
animation: animate 25s linear infinite;
}
.set div:nth-child(4){
position: absolute;
left: 35%;
animation: animate 15s linear infinite;
}
.set div:nth-child(5){
position: absolute;
left: 50%;
animation: animate 18s linear infinite;
animation-delay: -10s;
}
.set div:nth-child(6){
position: absolute;
left: 65%;
animation: animate 12s linear infinite;
animation-delay: -8s;
}
.set div:nth-child(7){
position: absolute;
left: 75%;
animation: animate 14s linear infinite;
}
.set div:nth-child(8){
position: absolute;
left: 85%;
animation: animate 15s linear infinite;
animation-delay: -7s;
}
.set div:nth-child(9){
position: absolute;
left: 95%;
animation: animate 19s linear infinite;
}
@keyframes animate{
0%{
top: -10%;
opacity: 0;
transform: translateX(20px) rotate(0deg);
}
10%{
opacity: 1;
}
20%{
transform: translateX(-20px) rotate(45deg);
}
40%{
transform: translateX(-20px) rotate(90deg);
}
60%{
transform: translateX(20px) rotate(135deg);
}
80%{
transform: translateX(-20px) rotate(180deg);
}
100%{
top:110%;
transform: translateX(-20px) rotate(225deg);
}
}
.set2{
position: absolute;
transform: scale(1.5) rotateY(180deg);
filter: blur(2px);
/* z-index: 0; */
}
.set3{
position: absolute;
transform: scale(0.8) rotateX(180deg);
filter: blur(4px);
/* z-index: 0; */
}
.flower-title{
position: absolute;
top: 50%;
transform: translateY(-50% );
width: 100%;
text-align: center;
color: #fff;
margin: 0;
padding: 0;
font-size: 5em;
font-family: sans-serif;
/* z-index: 1; */
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。