Fatal编程技术网
  • javascript/
  • Javascript Css-添加<；！DOCTYPE html>；使浏览器忽略我的动画

Javascript Css-添加<；！DOCTYPE html>；使浏览器忽略我的动画

javascript html css

Javascript Css-添加<；！DOCTYPE html>；使浏览器忽略我的动画,javascript,html,css,Javascript,Html,Css,我是一个新的设计师，所以总是忘记先放一个，昨天我刚刚完成了一个带有一些效果和动画的加载页面，但我意识到我没有放，所以我放了它 问题是，在放之前，所有的动画都是正常的，但当我把它放在那里时，一些动画根本不起作用 HTML: JS: 因此，在放置DOCTYPE之前，它是这样的： 在放置DOCTYPE之后，它会执行以下操作： 我希望有人能帮助我。加上“px”： 像这样： const logo=document.getElementById（“logo”）； const text=document

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

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

HTML:

JS:

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

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

我希望有人能帮助我。

加上“px”：

像这样：

const logo=document.getElementById（“logo”）；
const text=document.getElementById（“文本”）；
常量p1=document.getElementById（“p1”）；
constp2=document.getElementById（“p2”）；
常量p3=document.getElementById（“p3”）；
常量页脚=document.getElementById（“页脚”）；
const border=document.getElementById（“border”）；
const head=document.getElementById（“head”）；
var x=0；
var y=0；
函数up（）{
如果（x==220）{
左（）；
}否则{
x=x+5；
logo.style.marginTop=（480-x）+“px”；
border.style.marginTop=（477-x）+“px”；
设置超时（up，1）；
}
}
函数左（）{
如果（y==160）{
text.style.visibility=“可见”；
text.style.animation=“淡出2秒轻松”；
设置超时（加载，1000）；
setTimeout（函数显示（）{
head.style.visibility=“可见”；
head.style.animation=“淡出3s轻松”；
}, 1500);
}否则{
y++
logo.style.marginLeft=（360-y）+“px”；
border.style.marginLeft=（356-y）+“px”；
设置超时（左，1）；
}
}
函数加载（）{
var z=1200；
setTimeout（函数（）{
footer.style.visibility=“可见”；
footer.style.animation=“淡出1s轻松”；
p3.style.visibility=“隐藏”；
p1.style.visibility=“可见”；
p1.style.animation=“淡出1s轻松”；
setTimeout（函数（）{
p1.style.visibility=“隐藏”；
p2.style.visibility=“可见”；
p2.style.animation=“淡出1ss轻松”；
setTimeout（函数（）{
p2.style.visibility=“隐藏”；
p3.style.visibility=“可见”；
p3.style.animation=“淡出1s轻松”；
}，z/3）；
}，z/3）；
}，z/3）；
设置超时（加载，z）；
}
函数uniCharCode（事件）{
var char=event.which | | event.keyCode；
如果（字符==13）{
document.getElementById（“bodi”）.style.animation=“fadeouta 2s ease”；
setTimeout（函数（）{
window.open（“index.html”，“_self”）
}, 1000);
}
}
up（）

*{
背景：#333；
}
身体{
宽度：970px；
高度：630px；
右边距：自动；
左边距：自动；
}
#边界{
位置：绝对位置；
宽度：213px；
高度：122px；
-webkit剪辑路径：多边形（75%0%、100%50%、75%100%、0%100%、25%50%、0%0%）；
利润率：480px0356px；
过渡：1s；
z指数：9；
背景色：白色；
}
#标志{
位置：绝对位置；
宽度：207px；
高度：116px；
-webkit剪辑路径：多边形（75%0%、100%50%、75%100%、0%100%、25%50%、0%0%）；
利润率：480x360px；
过渡：1s；
z指数：10；
}
#正文{
位置：绝对位置；
利润率：290像素0440像素；
可见性：隐藏；
}
p{
显示：内联；
字体大小：50px；
字体系列：“Exo 2”，无衬线；
字体大小：粗体；
转化：1s；
文本阴影：-1px 2px 2px#100；
}
#文本1{
颜色：#EC4758；
}
#文本2{
颜色：白色；
}
@关键帧淡出{
从{
不透明度：0；
}
到{
不透明度：1；
}
}
#p1{
左边距：5px；
颜色：#F1E5E7；
可见性：隐藏；
}
#p2{
左边距：5px；
颜色：#FF966F；
可见性：隐藏；
}
#p3{
左边距：5px；
颜色：#7EB233；
可见性：隐藏；
}
人力资源线{
位置：绝对位置；
高度：6px；
宽度：650px；
背景：url（../img/line.png）repeat-x0；
边界：0；
利润率：480px 0 150px；
z指数：10；
}
#页脚{
可见性：隐藏；
过渡：1s；
}
#足迹{
位置：绝对位置；
文本对齐：居中；
利润率：510px0385px；
字体大小：20px；
字体系列：“Ubuntu”，无衬线；
颜色：白色；
文本阴影：-1px 0黑色，0 1px黑色，1px 0黑色，0-1px黑色；
字体大小：粗体；
}
#头{
利润率：160px0320px；
位置：绝对位置；
字体大小：30px；
颜色：白色；
可见性：隐藏；
}
@关键帧衰减{
从{
不透明度：1；
}
到{
不透明度：0；
}
}



正在加载。。。
按回车键继续！
法尔库

操作系统









Falqu0S 2018©版权所有。
归功于Ilyes Medjedoub。

添加“px”：

像这样：



const logo=document.getElementById（“logo”）；
const text=document.getElementById（“文本”）；
常量p1=document.getElementById（“p1”）；
constp2=document.getElementById（“p2”）；
常量p3=document.getElementById（“p3”）；
常量页脚=document.getElementById（“页脚”）；
const border=document.getElementById（“border”）；
const head=document.getElementById（“head”）；
var x=0；
var y=0；
函数up（）{
如果（x==220）{
左（）；
}否则{
x=x+5；
logo.style.marginTop=（480-x）+“px”；
border.style.marginTop=（477-x）+“px”；
设置超时（up，1）；
}
}
函数左（）{
如果（y==160）{
text.style.visibility=“可见”；
text.style.animation=“淡出2秒轻松”；
设置超时（加载，1000）；
setTimeout（函数显示（）{
head.style.visibility=“可见”；
head.style.animation=“淡出3s轻松”；
}, 1500);
}否则{
y++
logo.style.marginLeft=（360-y）+“px”；
border.style.marginLeft=（356-y）+“px”；
设置超时（左，1）；
}
}
函数加载（）{
var z=1200；
setTimeout（函数（）{
footer.style.visibility=“可见”；
footer.style.animation=“淡出1s轻松”；
p3.style.visibility=“隐藏”；
p1.styl

<!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>



* {
    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;}
}



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();



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

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