css - 如何使动画相对于父元素而不是主体移动?
问题描述
我想在我的主页中使用这个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;
}
但是当我尝试实现它时,就会发生这种情况。
红色方块似乎相对于整个身体而不是父容器移动。我该如何解决?我已经尝试过让父母和孩子的位置相对,但它似乎没有用。
解决方案
红色方块只是漂浮在整个地方的原因是您已将容器元素设置为position: relative;
但从未将任何方块设置为position: absolute;
. 通过将正方形设置为绝对位置,您在它们上所做的一切现在都将相对于它们的容器。
我所做的是全部设置.set div:nth-child(n)
为position: absolute;
. 然后我去给了main
一个白色的背景,这样红色的方块就可以落后了。我还给出了nav
相对位置,以便我可以给它一个比红色方块更高的 z-index,因此方块从导航后面而不是前面开始。
我还将容器的高度设置为 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; */
}
推荐阅读
- android - FIleObserver android 10 问题
- laravel - laravel 同一张桌子上的联合不起作用
- flutter - 错误:参数类型“未来”
' 不能分配给参数类型 'Widget' - jquery - 在引导模式中提交表单时,如何从 Kendo Multiselect 中获取值?
- r - (R) 制作表格时,不按字母顺序,而是按原顺序
- python - 在 django rest 框架中使用 POST 方法发送信息的问题
- java - 如何使用在另一个片段中创建的对象更新数组列表?
- json - 将节点 Filebeat 摄取到 Elasticsearch
- java - 将 orika-mapper 升级到最新 [1.5.4] 后发生空指针异常,同时通过传递 mappingContext 映射对象列表
- .net-core - Serilog。如何过滤 RequestLoggin 以将这些日志存储在不同的接收器上