css -webkit-animation偏离中心位置：相对的

a14dhokn 于 2023-03-09 发布在其他

关注(0)|答案(1)|浏览(149)

我有一个简单的例子，用 -webkit-animation 将图像从屏幕的一端移动到另一端，后面有一个背景图像。从技术上讲，它工作得很好，只是偏离了中心。元素不是从屏幕的一边开始，而是从中间开始，在返回之前离开屏幕。奇怪的是，如果我使用 *position：绝对 *，它工作得非常好，但显然这打破了背景和间距。

#ship {
  position: relative;
  -webkit-animation: linear infinite;
  -webkit-animation-name: ship1;
  -webkit-animation-duration: 60s;
  z-index: 1;
}
@-webkit-keyframes ship1 {
  0% {
    right: 0;
  }
  48% {
    -webkit-transform: rotateY(0deg); 
  }
  50% { 
    right: calc(100% - 139px);
    -webkit-transform: rotateY(180deg); 
  }
  98% {
    -webkit-transform: rotateY(180deg); 
  }
  100% {
    right: 0;    
     -webkit-transform: rotateY(0deg);
  }
}

#fish1 {
  position: relative;
  -webkit-animation: linear infinite;
  -webkit-animation-name: run;
  -webkit-animation-duration: 15s;
  padding: 10px;
  z-index: 1;
}
@-webkit-keyframes run {
  0% {
    right: 0;
  }
  48% {
    -webkit-transform: rotateY(0deg); 
  }
  50% { 
    right: calc(100% - 100px);
    -webkit-transform: rotateY(180deg); 
  }
  98% {
    -webkit-transform: rotateY(180deg); 
  }
  100% {
    right: 0;    
     -webkit-transform: rotateY(0deg);
  }
}

/* The Modal (background) */
        .modal {
            display: none; /* Hidden by default */
            position: fixed; /* Stay in place */
            z-index: 1; /* Sit on top */
  top: 100px;
  left: 0;
            width: 100%; /* Full width */
            height: 100%; /* Full height */
            overflow: auto; /* Enable scroll if needed */
            background-color: rgb(0,0,0); /* Fallback color */
            background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
        }

.myBtn_multi {
  border: none;
  padding: 0;
  background: none;
}

        /* Modal Content */
        .modal-content {
            background-color: #000000;
            margin: auto;
            padding: 20px;
            border: 1px solid #888;
            width: 400px;
        }

        /* The Close Button */
        .close {
            color: #ffffff;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }

        .close:hover,
        .close:focus {
            color: #000;
            text-decoration: none;
            cursor: pointer;
        }

.center-screen {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 95vh;
}

<!DOCTYPE html>
<html>
  <head>
    
  </head>

<body style="background-color:black;">  
  
     <center><p style="background-image: url('https://salamandersden.neocities.org/hehe.gif'); box-sizing: border-box; width: 100%; height: 100%; text-align:center; margin-bottom:0;">
    ⠀
    <img id="ship" src="https://salamandersden.neocities.org/ship.gif" width=139px>
       
    </p></center>   

<center><p style="background-image: url('https://salamandersden.neocities.org/bublez.gif'); box-sizing: border-box; width: 100%; height: 100%; text-align:center; margin:0; padding-top:0;">
    <!-- Trigger/Open The Modal -->
  
<button id="fish1" class="myBtn_multi"><img src="https://salamandersden.neocities.org/cropfish.gif" width=143px></button><br>
  
 <script src="./fish.js"></script>
</center>

  </body>
</html>

我该如何将其居中呢？我包括了我的模态css，以防这是问题所在。

css

来源：https://stackoverflow.com/questions/75678830/webkit-animation-is-off-center-with-position-relative

1条答案

按热度按时间

hwamh0ep1#

只需在内联样式中将text-align: center更改为text-align: right。

#ship {
  position: relative;
  -webkit-animation: linear infinite;
  -webkit-animation-name: ship1;
  -webkit-animation-duration: 60s;
  z-index: 1;
}

@-webkit-keyframes ship1 {
  0% {
    right: 0;
  }
  48% {
    -webkit-transform: rotateY(0deg);
  }
  50% {
    right: calc(100% - 139px);
    -webkit-transform: rotateY(180deg);
  }
  98% {
    -webkit-transform: rotateY(180deg);
  }
  100% {
    right: 0;
    -webkit-transform: rotateY(0deg);
  }
}

#fish1 {
  position: relative;
  -webkit-animation: linear infinite;
  -webkit-animation-name: run;
  -webkit-animation-duration: 15s;
  padding: 10px;
  z-index: 1;
}

@-webkit-keyframes run {
  0% {
    right: 0;
  }
  48% {
    -webkit-transform: rotateY(0deg);
  }
  50% {
    right: calc(100% - 100px);
    -webkit-transform: rotateY(180deg);
  }
  98% {
    -webkit-transform: rotateY(180deg);
  }
  100% {
    right: 0;
    -webkit-transform: rotateY(0deg);
  }
}

/* The Modal (background) */

.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  top: 100px;
  left: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
}

.myBtn_multi {
  border: none;
  padding: 0;
  background: none;
}

/* Modal Content */

.modal-content {
  background-color: #000000;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 400px;
}

/* The Close Button */

.close {
  color: #ffffff;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.center-screen {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 95vh;
}

<body style="background-color:black;">

  <p style="background-image: url('https://salamandersden.neocities.org/hehe.gif'); box-sizing: border-box; width: 100%; text-align: right; margin-bottom:0;">
    <img id="ship" src="https://salamandersden.neocities.org/ship.gif" width=139px>
  </p>
  <p style="background-image: url('https://salamandersden.neocities.org/bublez.gif'); box-sizing: border-box; width: 100%; text-align:right; margin:0; padding-top:0;">
    <!-- Trigger/Open The Modal -->

    <button id="fish1" class="myBtn_multi"><img src="https://salamandersden.neocities.org/cropfish.gif" width=143px></button><br>

    <script src="./fish.js"></script>
  </p>
</body>

赞(0）回复(0）举报 2023-03-09

我来回答

css -webkit-animation偏离中心位置：相对的

1条答案

相关问题

热门标签

最新问答