javascript - Css - 添加 <!DOCTYPE html> 让浏览器忽略我的动画-6ren

javascript - Css - 添加 <!DOCTYPE html> 让浏览器忽略我的动画

转载作者：太空宇宙更新时间：2023-11-04 01:15:30

我是一名新设计师，所以总是忘记输入 <!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

我希望有人能帮助我。

最佳答案

添加“px”:

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>

关于javascript - Css - 添加 <!DOCTYPE html> 让浏览器忽略我的动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50248376/

文章推荐： python - 在 MAC 上永久添加到 DYLD_LIBRARY_PATH 会导致 X11 错误

文章推荐： javascript - 如何进行 Monkeypatch Express View 查找？

文章推荐： c - 三元表达式错误

doctype - Doctype 语法的解释
有很多线程解释了选择什么 Doctype，但我找不到任何解释实际语法的线程。举个例子: 特别是: PUBLIC 是否可以替换为其他值，是什么意思？为什么 url 需要用引号括起来？是什么 ”-”
doctype - 没有 DOCTYPE 的 eBay 列表
关闭。这个问题需要debugging details .它目前不接受答案。编辑问题以包含 desired behavior, a specific problem or error, and th
css - doctype 会 100% 杀死但如果 doctype 关闭则不会？
我正在尝试制作 100% 高度的东西，但添加文档类型会破坏它。这在 other questions 上进行了解释. 然而，我发现了一些奇怪的事情——如果我关闭 doctype 标签(我知道你不应该这样
javascript - HTML1527 : DOCTYPE expected. 最短的有效文档类型是 "<!DOCTYPE html>"
美好的一天，我正在开发一个 C# Web 应用程序，一切正常，直到我添加普通的 JavaScript。 html代码如下: JScript.js是放入的 JavaS
javascript - 我可以将具有 HTML 5 Doctype 的页面加载到具有 Frameset Doctype 的页面上的框架中吗？
我有一个主要的框架集页面，它使用 FRAMESET 文档类型..现在它里面有 3 个框架.. 现在对于第 2 帧，我想使用一些 HTML5 代码 ()...所以我想我必须使用 doctype 现在我的
html - 为什么我的网页不能使用 <!DOCTYPE html....> 但它可以使用 <!DOCTYPE xhtml>？
我正在制作一个网页，我即将完成，所以我决定通过一个 html 验证器来验证它，但我的页面出现了一堆错误。我的页面目前适用于 ...但是当我输入我页面的间距中断。示例:工作时的图片代码: 当我添
html - 将 <!DOCTYPE> 更改为 <!DOCTYPE html> 会导致我的包装器无法扩展
我刚刚在 W3C 验证器上检查了我的个人登陆页面以确保它是正确的 HTML5，然后发现我需要而不是通过。但是背景图片不会延伸到底部。我已经尝试了 wrapper 的最小高度，并清除了，但似乎没有
html - <!DOCTYPE html> 未在浏览器中显示，它阻止了 TinyMCE 工作。有什么东西可以阻止 doctype 工作吗？
这是文档类型所在的文件: Taekwendo tinymce.init({ selector: '#art
javascript - Eclipse 中的 <!DOCTYPE html PUBLIC"....."> 和 <!DOCTYPE html>
这是我的问题的 html 代码 Insert title here var arr = [ "A", "B", "C" ]; for (var i = 0; i 在
javascript - Python 抓取具有多个嵌套 <!DOCTYPE html> 的站点(具有多个 <!DOCTYPE html> 声明的站点)
我在抓取一些具有多个声明的网站时遇到了困难。。我正在使用带有 requests 的 Python 2.7.9 和来自 bs4 的 BeautifulSoup。当我执行 requests.get
IIS Web 平台安装程序错误 : 'doctype' is an unexpected token. 预期 token 为 'DOCTYPE' 。 1号线，位置3
我刚刚在 Windows Server 2008 上创建了一个新的 IIS 网站，以便使用它来部署新网站。该网站仍然是空的。如果我尝试在“管理工具”下打开 IIS Web 平台安装程序，则会遇到错
html - 在不使用 HTML 5 标签的情况下使用 HTML 5 Doctype `<!DOCTYPE html>` 是否有任何优点？
是否有使用 HTML 5 文档类型的专家，即使我没有使用任何新的 HTML 5 标签？即使我没有使用任何新的 HTML 5 标签，用 HTML 5 文档类型替换 XHTML 文档类型有什么好处吗？
html - 简单地将网页 doctype HTML 4.01 或 XHTML 1.0 更改为 doctype HTML5 是否安全？
假设我想将旧网站更改为“HTML5”风格。简单地更改标题是否安全 doctype如下？原始文档类型可能是: 或如果改为不可能破坏遗留网页的呈现方式，我认为它是安全的。最佳答案为什么是的，
node.js - 全新 express 项目 doctype 5` is deprecated, you must now use ` doctype html` 上的错误
通过在 windows 命令提示符下运行以下命令创建了一个全新的 express.js 项目 npm install express -g express newproject cd newproje
java - 当功能 "http://apache.org/xml/features/disallow-doctype-decl"设置为 true 时，不允许获取 DOCTYPE
我懂了 DOCTYPE is disallowed when the feature "http://apache.org/xml/features/disallow-doctype-decl" se
html - <!DOCTYPE> 和 <!doctype html> 之间有什么区别(CSS 按百分比设置内部 block 高度并将包含 block 设置为 auto ，有问题)
这个问题在这里已经有了答案: background-color property doesn't work correctly with HTML5 DOCTYPE [duplicate] (1
html - Doctype 忽略了百分比
我在没有使用 Doctype 的情况下构建了我的页面，但是没有它我可以获得我期望的结果。即使用户尝试调整窗口大小时，我也尝试每行列出 4 张图像并填充页面。问题是我最近添加了 Doctype，这里
html - doctype html导致表单输入字段被截断
我注意到我的一个 html 表单存在问题，文本输入字段被截断了。我将其原因缩小到我们在页面顶部使用的指令。当我排除指令时，下面场景中的输入正确呈现，这意味着文本输入字段被完整绘制。但是当我按
html - DOCTYPE 打乱格式
我知道很多人在切换到时遇到类似的问题行，然而，我已经尝试了所有的方法，甚至是经典的 html{height: 100%;} body {min-height: 100%;} 方法，以及其他方法，但
javascript - DocType 声明问题
这个问题在这里已经有了答案: 关闭 10 年前。 Possible Duplicate: How to replace with in an html file 我在我的

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - Css - 添加 <!DOCTYPE html> 让浏览器忽略我的动画