Question

我的网站是https://www.timetimiri.info/，但是页面顶部的动画存在一些问题。 CSS动画可以在我的桌面上运行，但是当我尝试在iPhone上加载网页时，动画根本不会显示。应当在其中放置动画的地方只是一个空白区域。这是在Safari浏览器和Chrome浏览器中顺便说一句。任何帮助将不胜感激。

HTML（我动画的图像在多个/ br之后）：

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>Tim's Thoughts</title>
<meta charset="UTF-8">
<meta name="description" content="The thoughts of Tim Etimiri.">
<meta name="keywords" content="Tim Etimiri ,thoughts">
<meta name="author" content="Tim Etimiri">
<link rel="shortcut icon" href="darkLord.png" />
<link rel="stylesheet" type="text/css" media="screen" href="style.css">
</head>

<body>
<div>
    <h1>"Life's tragedy is that we get old too soon and wise too late" - 
Benjamin Franklin</h1>
    <h2><u>Property of Tim Etimiri.</u>
    </h2></br></br></br></br></br></br></br></br></br></br>
    <img class="image" src="darkLord.png" alt="Tim's Darkest Sun." 
width="150" height="150">
    <p> "The Dark Lord"</br></br>
        My goal is to produce Great Works.</br></br>
        For what is a more Noble existence?</p>
    <div id="about">
        <p><strong>Find Me:</strong></br>
            -->Twitter: <a 
href="https://www.twitter.com/timetimiri">@timetimiri </a></br>
            -->Discord: Tim Etimiri#1511 </br>
            -->Email: timetimiri@gmail.com </br></p>
    </div>
    <h2><u>Works:</u>
        <p>
            <a href="whatIsIntelligence.html">~What Is Intelligence?</a> 
   </br></br>
            <a href="thePriceOfFreedom.html">~The Price of Freedom</a></br> 
   </br>
            <a href="theNatureOfTheWorldView.html">~The Nature of the World 
View</a>
        </p>
    </h2>
</div>
</body>

</html>

CSS（动画代码在底部）：

*{
margin: 0px;
padding: 0px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 14px;
background-color: #4f575a;
}
p{
margin-left: 80px;
margin-right: 300px;
margin-top: 20px;
color: rgb(216, 231, 245);
}
h2{
color: rgb(3, 104, 192);
font-size: 40px;
}
hr { 
display: block;
margin-top: 2em;
margin-bottom: 2em;
margin-left: auto;
margin-right: auto;
border-style: dashed;
border-width: .5px;
width: 600px;
color: #ffffff;
}
#index strong{
  text-align: center;
  margin: 0px;
  color: rgb(216, 231, 245);
}
#index hr{
display: block;
margin-top: 2em;
margin-bottom: 0.5em;
margin-left: auto;
margin-right: auto;
border-style: dashed;
border-width: .5px;
width: 600px;
color: #ffffff;
}
h1{
  font-size: 17px;
}
#menu a{
color: #ffffff;
text-decoration: none;
font-size: 14px;
padding-top: 19px;
padding-bottom: 22px;
padding-left: 10px;
padding-right: 10px;
margin-left: 800px;
}
u{
color: rgb(216, 231, 245);
font-size: 35px;
}
strong{

color: rgb(216, 231, 245);
}
img{
margin-left: 80px;
margin-top: 15px;
}
#about strong{
margin-left: 0px; 
margin-right: 80px;
margin-top: 20px;
color: rgb(216, 231, 245);
}
a{
color: rgb(142, 233, 240);
}
.image {
position: absolute;
top: 50%;
left: 50%;
width: 150px;
height: 150px;
margin:-264.3px 0 0 -690px;;
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 7s linear infinite;
display: block;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); 
transform:rotate(360deg); } }

感谢您的时间。

〜蒂姆。

Answer 1

尝试调整浏览器窗口的大小，您会看到会发生什么。图像定位在绝对位置，并留有空白，将其删除即可。

Answer 2

此：

   margin:-264.3px 0 0 -690px;

它的编码非常错误，因为您使用左50％和前50％，所以无法正常工作。这在台式机上可行，因为台式机宽约1900像素，一半（50％）为950像素，并且在左边距-690像素处留有空白，因此您可以看到它。但是在手机上，屏幕宽度大约为360px（取决于手机），一半为180px，但在屏幕左侧向其边缘留出-690px。

这意味着您的动画仍然存在，但从窗口屏幕向左推出。

我会说删除该行并向左替换：50％可能是10％

Answer 3

您的代码：

@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); 
transform:rotate(360deg); } }

在@keyframes中删除-webkit-，像这样：

@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { transform: rotate(360deg);
transform:rotate(360deg); } }

CSS动画只能在桌面浏览器上运行，而不能在手机浏览器上运行。有什么办法解决这个问题？

3 个答案: