时间戳

首页 > 解决方案 > Css - 添加使浏览器忽略我的动画

javascript - Css - 添加使浏览器忽略我的动画

问题描述

我是一个新设计师所以总是忘记放<!DOCTYPE html>第一个，昨天我刚刚完成了一个带有一些效果和动画的加载页面，但我意识到我没有放<!DOCTYPE html>所以我放了它。

问题是在放之前所有动画都是正常的，但是当我放在那里时，一些动画根本不起作用

HTML：

<!DOCTYPE html>
<html lang="fr">
    <head>
        <link rel="stylesheet" href="../css/load.css">
        <link href="https://fonts.googleapis.com/css?family=Exo+2" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <title> FalquOS: Loading ... </title>
    </head>
    <body onkeypress="uniCharCode(event)" id="bodi">
        <div id="head">
            <span> Press <p style="color: turquoise;font-size:35px;">Enter</p> to continue !</span>
        </div>
        <div id="body">
            <img id="logo" alt="image" src="../img/img.jpg">
            <div id="border"></div>
            <div id="text">
                <p id="text1">Falqu</p>
                <p id="text2">OS</p>
                <p id="p1">.</p>
                <p id="p2">.</p>
                <p id="p3">.</p>
            </div>
        </div>
        <div id="footer">
            <hr class="line">
            <span id="footext">Falqu0S 2018 ©.<br>All copyright reserved.<br>Credit to Ilyes Medjedoub.</span>
        </div>
        <script type="text/javascript" src="../js/load.js"></script>
    </body>
</html>

CSS：

* {
    background: #333;
}
body {
    width: 970px;
    height: 630px;
    margin-right: auto;
    margin-left: auto;
}
#border{
    position: absolute;
    width: 213px;
    height: 122px;
    -webkit-clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
    margin: 480px 0 0 356px;
    transition: 1s;
    z-index: 9;
    background-color: white;
}
#logo{
    position: absolute;
    width: 207px;
    height: 116px;
    -webkit-clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
    margin: 480px 0 0 360px;
    transition: 1s;
    z-index: 10;

}
#text {
    position: absolute;
    margin: 290px 0 0 440px;
    visibility: hidden;
}
p {
    display: inline;
    font-size: 50px;
    font-family: 'Exo 2', sans-serif;
    font-weight: bold;
    transform: 1s;
    text-shadow: -1px 2px 2px #100;
}
#text1 {
    color: #EC4758;
}
#text2{
    color: white;
}
@keyframes fadeout {
    from {opacity: 0;}
    to {opacity: 1;}
}
#p1 {
    margin-left: 5px;
    color: #F1E5E7;
    visibility: hidden;
}
#p2 {
    margin-left: 5px;
    color: #FF966F;
    visibility: hidden;
}
#p3 {
    margin-left: 5px;
    color: #7EB233;
    visibility: hidden;
}
hr.line {
    position: absolute;
    height: 6px;
    width: 650px;
    background: url(../img/line.png) repeat-x 0 0;
    border: 0;
    margin: 480px 0 0 150px;
    z-index: 10;
}
#footer{
    visibility: hidden;
    transition: 1s;
}
#footext{
    position: absolute;
    text-align: center;
    margin: 510px 0 0 385px;
    font-size: 20px;
    font-family: 'Ubuntu', sans-serif;
    color: white;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    font-weight: bold;
}
#head {
    margin: 160px 0 0 320px;
    position: absolute;
    font-size: 30px;
    color: white;
    visibility: hidden;
}
@keyframes fadeouta {
    from {opacity: 1;}
    to {opacity: 0;}
}

JS：

const logo = document.getElementById("logo");
const text = document.getElementById("text");
const p1 = document.getElementById("p1");
const p2 = document.getElementById("p2");
const p3 = document.getElementById("p3");
const footer = document.getElementById("footer");
const border = document.getElementById("border");
const head = document.getElementById("head");

var x = 0;
var y = 0;


function up() {
    if(x == 220){
        left();
    } else {
    x = x + 5;
    logo.style.marginTop = 480 - x;
    border.style.marginTop = 477 - x;
    setTimeout(up, 1);
    }
}
function left() {
    if(y == 160){
        text.style.visibility = "visible";
        text.style.animation = "fadeout 2s ease";
        setTimeout(loading, 1000);
        setTimeout(function show(){
            head.style.visibility = "visible";
            head.style.animation = "fadeout 3s ease";
        }, 1500);
    } else {
        y++
        logo.style.marginLeft = 360 - y;
        border.style.marginLeft = 356 - y;
        setTimeout(left, 1);
    }
}
function loading() {
    var z = 1200;
    setTimeout(function(){
        footer.style.visibility = "visible";
        footer.style.animation = "fadeout 1s ease";
        p3.style.visibility = "hidden";
        p1.style.visibility = "visible";
        p1.style.animation = "fadeout 1s ease";     
        setTimeout(function(){
            p1.style.visibility = "hidden";
          p2.style.visibility = "visible";
            p2.style.animation = "fadeout 1ss ease";
        setTimeout(function(){
            p2.style.visibility = "hidden";
            p3.style.visibility = "visible";
            p3.style.animation = "fadeout 1s ease";
        }, z/3);
    }, z/3);
    }, z/3);
    setTimeout(loading, z);
}
function uniCharCode(event) {
    var char = event.which || event.keyCode;
    if(char == 13){
        document.getElementById("bodi").style.animation = "fadeouta 2s ease";
        setTimeout(function(){window.open("index.html", "_self")}, 1000);
    }
}


up();

因此，在放置 DOCTYPE 之前，它是这样的：

https://gyazo.com/de4e0eb4de4994804ca41fe0cb837062

在放置 DOCTYPE 之后，它会执行以下操作：

https://gyazo.com/d140f5608d8627c29099a5d837faee3a

我希望有人能帮助我。

标签： javascripthtmlcss

解决方案

添加“像素”：

logo.style.marginTop = (480 - x)+"px";
border.style.marginTop = (477 - x)+"px";

logo.style.marginLeft = (360 - y)+"px";
border.style.marginLeft = (356 - y)+"px";

像这样：

const logo = document.getElementById("logo");
const text = document.getElementById("text");
const p1 = document.getElementById("p1");
const p2 = document.getElementById("p2");
const p3 = document.getElementById("p3");
const footer = document.getElementById("footer");
const border = document.getElementById("border");
const head = document.getElementById("head");

var x = 0;
var y = 0;


function up() {
  if (x == 220) {
    left();
  } else {
    x = x + 5;
    logo.style.marginTop = (480 - x)+"px";
    border.style.marginTop = (477 - x)+"px";
    setTimeout(up, 1);
  }
}

function left() {
  if (y == 160) {
    text.style.visibility = "visible";
    text.style.animation = "fadeout 2s ease";
    setTimeout(loading, 1000);
    setTimeout(function show() {
      head.style.visibility = "visible";
      head.style.animation = "fadeout 3s ease";
    }, 1500);
  } else {
    y++
    logo.style.marginLeft = (360 - y)+"px";
    border.style.marginLeft = (356 - y)+"px";
    setTimeout(left, 1);
  }
}

function loading() {
  var z = 1200;
  setTimeout(function() {
    footer.style.visibility = "visible";
    footer.style.animation = "fadeout 1s ease";
    p3.style.visibility = "hidden";
    p1.style.visibility = "visible";
    p1.style.animation = "fadeout 1s ease";
    setTimeout(function() {
      p1.style.visibility = "hidden";
      p2.style.visibility = "visible";
      p2.style.animation = "fadeout 1ss ease";
      setTimeout(function() {
        p2.style.visibility = "hidden";
        p3.style.visibility = "visible";
        p3.style.animation = "fadeout 1s ease";
      }, z / 3);
    }, z / 3);
  }, z / 3);
  setTimeout(loading, z);
}

function uniCharCode(event) {
  var char = event.which || event.keyCode;
  if (char == 13) {
    document.getElementById("bodi").style.animation = "fadeouta 2s ease";
    setTimeout(function() {
      window.open("index.html", "_self")
    }, 1000);
  }
}


up();
* {
  background: #333;
}

body {
  width: 970px;
  height: 630px;
  margin-right: auto;
  margin-left: auto;
}

#border {
  position: absolute;
  width: 213px;
  height: 122px;
  -webkit-clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
  margin: 480px 0 0 356px;
  transition: 1s;
  z-index: 9;
  background-color: white;
}

#logo {
  position: absolute;
  width: 207px;
  height: 116px;
  -webkit-clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
  margin: 480px 0 0 360px;
  transition: 1s;
  z-index: 10;
}

#text {
  position: absolute;
  margin: 290px 0 0 440px;
  visibility: hidden;
}

p {
  display: inline;
  font-size: 50px;
  font-family: 'Exo 2', sans-serif;
  font-weight: bold;
  transform: 1s;
  text-shadow: -1px 2px 2px #100;
}

#text1 {
  color: #EC4758;
}

#text2 {
  color: white;
}

@keyframes fadeout {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

#p1 {
  margin-left: 5px;
  color: #F1E5E7;
  visibility: hidden;
}

#p2 {
  margin-left: 5px;
  color: #FF966F;
  visibility: hidden;
}

#p3 {
  margin-left: 5px;
  color: #7EB233;
  visibility: hidden;
}

hr.line {
  position: absolute;
  height: 6px;
  width: 650px;
  background: url(../img/line.png) repeat-x 0 0;
  border: 0;
  margin: 480px 0 0 150px;
  z-index: 10;
}

#footer {
  visibility: hidden;
  transition: 1s;
}

#footext {
  position: absolute;
  text-align: center;
  margin: 510px 0 0 385px;
  font-size: 20px;
  font-family: 'Ubuntu', sans-serif;
  color: white;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
  font-weight: bold;
}

#head {
  margin: 160px 0 0 320px;
  position: absolute;
  font-size: 30px;
  color: white;
  visibility: hidden;
}

@keyframes fadeouta {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
<link href="https://fonts.googleapis.com/css?family=Exo+2" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<script type="text/javascript" src="https://code.jquery.com/jquery-1.7.1.min.js"></script>
<title> FalquOS: Loading ... </title>

<body onkeypress="uniCharCode(event)" id="bodi">
  <div id="head">
    <span> Press <p style="color: turquoise;font-size:35px;">Enter</p> to continue !</span>
  </div>
  <div id="body">
    <img id="logo" alt="image" src="../img/img.jpg">
    <div id="border"></div>
    <div id="text">
      <p id="text1">Falqu</p>
      <p id="text2">OS</p>
      <p id="p1">.</p>
      <p id="p2">.</p>
      <p id="p3">.</p>
    </div>
  </div>
  <div id="footer">
    <hr class="line">
    <span id="footext">Falqu0S 2018 ©.<br>All copyright reserved.<br>Credit to Ilyes Medjedoub.</span>
  </div>

推荐阅读