Firefox 不会更新对 CSS 动画的更改

【问题标题】：Firefox will not update changes to CSS AnimationFirefox 不会更新对 CSS 动画的更改
【发布时间】：2014-03-30 02:07:45
【问题描述】：

我在一个使用 CSS 动画的网站上工作，但我在使用 Firefox 时遇到了一些问题。
在某些情况下，firefox 似乎没有读取更新的 css 文件，而在其他地方 css 更新。我尝试了一些方法来清除缓存并重新加载以查看 CSS 中的更改是否会反映在网站上。我什至卸载并重新安装了Firefox。这是我遇到的情况。到目前为止，关键帧动画在 chrome 和 safari 中完美运行（避免了 IE 头痛）。我在测试 Firefox 时注意到其中一个文本元素比它应该在的位置高出大约 100 像素。浏览器特定代码中的所有值都是相同的。奇怪的是，如果我尝试使用 firefox 前缀更改任何值，它不会改变。假设原始顶部设置为 10px，我将其更改为 500px，firefox 会将其渲染在与 10px 相同的位置。我认为这可能是 Firefox 未重新加载 css 文件的问题的另一个原因是，我尝试注释掉为文本设置动画的整个部分，并且它仍然会设置动画，就好像我没有将代码注释掉一样。在其他浏览器中，注释动画根本不会动画。我通过将文本颜色更改为红色而不是白色进行了另一项测试，并且该更改实际上已更新。

此外，我使用 javascript 通过删除类并将其替换为反向动画类来反转动画。这些在 chrome 和 safari 中也可以正常工作，但只有一个动画元素反向工作，但不会在 firefox 代码中将动画延迟更改为零。

我可以用一双新鲜的眼睛来看看到底发生了什么。

感谢您的帮助。

这里是 jsfiddle 链接。如果有帮助，我可以添加屏幕截图，但 jsfiddle 可能是最容易看到我在说什么的。 http://jsfiddle.net/JustALittleHeat/A5gMJ/1/

HTML

<body>
<div id= "aboutWrapper">
        <div id= "quoteContainer">
        <div id="quoteButton" class= "quoteButton" onclick="changeClass()"     
onmouseover="mouseOver()" onmouseout="mouseOut()">-</div>
        <h1 id="quotationMarks1" class="quotationMarks1">"</h1>
        <p id ="quote" class ="quote"><em><strong>&nbsp &nbsp &nbsp &nbsp THE BETTER THE   
PEOPLE YOU SURROUND YOURSELF WITH, THE BETTER YOU'RE GOING TO DO, FOR YOURSELF AND THE 
CONSUMER.</strong></em></p><h1 id="quotationMarks2" class="quotationMarks2">"</h1> <h2  
id="cecil" class="cecil">- Cecil Van Tuyl</h2>
    </div>
    <div id="aboutContainer" class="aboutContainer">
        <h1 class="pageParaHeader">About Us</h1>
        <p class="textBody"><strong class="dropCap">V</strong>&nbsp &nbsp &nbsp &nbsp an  
Tuyl Group, Inc. provides management consulting <br> &nbsp &nbsp &nbsp  &nbsp services 
to the largest group of privately held automotive dealerships in the United States. With 
offices in Arizona, Kansas, and Texas, the management consulting group works with 
approximately seventy independently operated dealerships nationwide.<br> <br> &nbsp 
&nbsp &nbsp &nbsp The Van Tuyl family has had a long history with the automotive 
industry, starting with Cecil Van Tuyl and a Kansas City Chevrolet dealership in 1955. 
Joined by his son Larry in 1971, they have built a world class management consulting 
company based on the principles of hiring the right people and giving their dealership 
clients the right tools, training and support they need to succeed.</p>
    </div>
</div>
</body>

CSS 

    /*-------------Style Quote Block. NOT IE VERION-----------------------------*/


#aboutWrapper { position:relative; height:400px; width:100%; max-width:800px; margin-right:auto; margin-left:auto;
}

#quoteContainer {position:absolute;  padding-left:20px; margin-left:auto; margin-right:auto; width:800px; height:200px; 
}

.quoteButton {position:absolute; width:200px; height:30px;top:5px; z-index: 5; cursor:pointer; opacity:0;
}

.quoteButtonMin {position:absolute; width:200px; height:30px;top:5px; z-index: 5; cursor:pointer; opacity:0; color:#069ec7; font-size: 3em; line-height: 15px;

-webkit-animation: buttonMin 1s ease-in-out;
-webkit-animation-fill-mode: forwards;
-moz-animation: buttonMin 1s ease-in-out;
-moz-animation-fill-mode: forwards;
animation: buttonMin 1s ease-in-out; 
animation-fill-mode: forwards;
}



.quoteButtonMin:hover {color:#3ccaf0;}

.quote {position:absolute; width:800px;  color:white; font-size:2em; font-family:"Arial", sans-serif; top:15px; right:0px; 


-webkit-animation: quoteMove 2s ease-in-out;
-webkit-animation-delay:4s; 
-webkit-animation-fill-mode: forwards;
-moz-animation: quoteMove 2s ease-in-out;
-moz-animation-delay:4s; 
-moz-animation-fill-mode: forwards;
animation: quoteMove 2s ease-in-out; 
animation-delay:4s; 
animation-fill-mode: forwards;
}


.quotationMarks1 {position:absolute; color:#069ec7; font-family:Arial, sans-serif; font-size:10em; top:-103px; left:10px;

-webkit-animation: markMove1 2s ease-in-out; 
-webkit-animation-delay:4s; 
-webkit-animation-fill-mode: forwards;
-moz-animation: markMove1 2s ease-in-out; 
-moz-animation-delay:4s; 
-moz-animation-fill-mode: forwards;
animation: markMove1 2s ease-in-out; 
animation-delay:4s; 
animation-fill-mode: forwards;   
}

.quotationMarks2 {position:absolute; color:#069ec7; font-family:Arial, sans-serif; font-size:10em;
left:696px; top:-15px;  

-webkit-animation: markMove2 2s ease-in-out; 
-webkit-animation-delay:4s; 
-webkit-animation-fill-mode: forwards;
-moz-animation: markMove2 2s ease-in-out; 
-moz-animation-delay:4s; 
-moz-animation-fill-mode: forwards;
animation: markMove2 2s ease-in-out; 
animation-delay:4s; 
animation-fill-mode: forwards;    
}

.cecil {position:absolute; width:375px; color:white; font-family:Arial, sans-serif; font-size:3em; top:120px; left:340px;

-webkit-animation: cecilMove 2s ease-in-out; 
-webkit-animation-delay:4s; 
-webkit-animation-fill-mode: forwards;
-moz-animation: cecilMove 2s ease-in-out; 
-moz-animation-delay:4s; 
-moz-animation-fill-mode: forwards;
animation: markMove2 2s ease-in-out; 
animation-delay:4s; 
animation-fill-mode: forwards;  
}

/*--------------------------------------Button Minimize--------------------*/
@-webkit-keyframes buttonMin {
    0% {opacity:0; width:10px;}
    100%{opacity:1; width:10px;}
}

@-moz-keyframes buttonMin {
    0% {opacity:0; width:10px;}
    100%{opacity:1; width:10px;}
}

@keyframes buttonMin {
    0% {opacity:0; width:10px;}
    100%{opacity:1; width:10px;}
}

/*-----------------------------------Quote Animation------------------*/
@-webkit-keyframes quoteMove {
    0% {-webkit-transform:scale(1,1);opacity:1;}
    45% {opacity:1;}
    50% {-webkit-transform:scale(0,0);opacity:0;}
    100% {-webkit-transform:scale(0,0);opacity:0;}
}

@-moz-keyframes quoteMove {
    0% {-moz-transform:scale(1,1);opacity:1;}
    45% {opacity:1;}
    50% {-moz-transform:scale(0,0);opacity:0;}
    100% {-moz-transform:scale(0,0);opacity:0;}
}

@keyframes quoteMove {
    0% {transform:scale(1,1);opacity:1;}
    45% {opacity:1;}
    50% {transform:scale(0,0);opacity:0;}
    100% {transform:scale(0,0);opacity:0;}
}

/*--------------------------Quotation Marks 1------------------------------*/

@-webkit-keyframes markMove1 {
    0% {left:10px; top:103; -webkit-transform: scale(1,1);}
    50% {left:325px;top:-50px;-webkit-transform: scale(1,1);}
    90% {left:-5px;top:-50px;-webkit-transform: scale(0.45,0.45);}
    100% {left:-5px;top:-160px;-webkit-transform: scale(0.45,0.45);}
}

@-moz-keyframes markMove1 {
    0% {left:10px; top:103; -moz-transform: scale(1,1);}
    50% {left:325px;top:-50px;-moz-transform: scale(1,1);}
    90% {left:-5px;top:-50px;-moz-transform: scale(0.45,0.45);}
    100% {left:-5px;top:-160px;-moz-transform: scale(0.45,0.45);}
}

@keyframes markMove1 {
    0% {left:10px; top:103; transform: scale(1,1);}
    50% {left:325px;top:-50px;transform: scale(1,1);}
    90% {left:-5px;top:-50px;transform: scale(0.45,0.45);}
    100% {left:-5px;top:-160px;transform: scale(0.45,0.45);}
}

/*-------------------------Quotation Marks 2----------------------------*/

@-webkit-keyframes markMove2 {
    0% {left:696px; top:-15;-webkit-transform: scale(1,1);}
    50% {left:395px;top:-50px;-webkit-transform: scale(1,1);}
    90% {left:30px;top:-50px;-webkit-transform: scale(0.45,0.45);}
    100% {left:30px;top:-160px;-webkit-transform: scale(0.45,0.45);}
}

@-moz-keyframes markMove2 {
    0% {left:696px; top:-15;-moz-transform: scale(1,1);}
    50% {left:395px;top:-50px;-moz-transform: scale(1,1);}
    90% {left:30px;top:-50px;-moz-transform: scale(0.45,0.45);}
    100% {left:30px;top:-160px;-moz-transform: scale(0.45,0.45);}
}

@keyframes markMove2 {
    0% {left:696px; top:-15; transform: scale(1,1);}
    50% {left:395px;top:-50px; transform: scale(1,1);}
    90% {left:30px;top:-50px; transform: scale(0.45,0.45);}
    100% {left:30px;top:-160px; transform: scale(0.45,0.45);}
}

/*-----------------------------Cecil Move-------------------*/

@-webkit-keyframes cecilMove {
    0% {left:340px; top:120px; -webkit-transform: scale(1,1); }
    25% {left:490px;top:120px; -webkit-transform: scale(1,1);}
    50% {left:490px;top:40px; -webkit-transform: scale(1,1);}
    90% {left:-30px;top:63px; -webkit-transform: scale(0.35,0.35);}
    100% {left:-30px;top:-45px; -webkit-transform: scale(0.35,0.35);}
}


@keyframes cecilMove {
    0% {left:340px; top:120px; transform: scale(1,1); }
    25% {left:490px;top:120px; transform: scale(1,1);}
    50% {left:490px;top:40px; transform: scale(1,1);}
    90% {left:-30px;top:63px; transform: scale(0.35,0.35);}
    100% {left:-30px;top:-45px; transform: scale(0.35,0.35);}
}

@-moz-keyframes cecilMove {
    0% {left:340px; top:120px; -moz-transform: scale(1,1); }
    25% {left:490px;top:120px; -moz-transform: scale(1,1);}
    50% {left:490px;top:40px; -moz-transform: scale(1,1);}
    90% {left:-30px;top:63px; -moz-transform: scale(0.35,0.35);}
    100% {left:-30px;top:-45px; -moz-transform: scale(0.35,0.35);}
}


/*-------------------- Reverse Animation Classes-------------*/

.quoteR {position:absolute; width:800px;  color:white; font-size:2em; font-family:"Arial", sans-serif; top:15px; right:0px; 


-webkit-animation: quoteMoveR 2.5s ease-in-out;
-webkit-animation-fill-mode: forwards;
-webkit-animation-delay: .45s;
-moz-animation: quoteMoveR 2.5s ease-in-out;
-moz-animation-fill-mode: forwards;
-moz-animation-delay: .45s;
animation: quoteMove 2.5s ease-in-out; 
animation-fill-mode: forwards;
animation-delay: .45s;
}


.quoteButtonMinR {position:absolute; width:200px; height:30px;top:5px; z-index: 5; cursor:pointer; opacity:1; color:#069ec7; font-size: 3em; line-height: 15px;

-webkit-animation: buttonMinR 1s ease-in-out;
-webkit-animation-fill-mode: forwards;
-moz-animation: buttonMinR 1s ease-in-out;
-moz-animation-fill-mode: forwards;
animation: buttonMinR 1s ease-in-out; 
animation-fill-mode: forwards;
}

.quotationMarks1R {position:absolute; color:#069ec7; font-family:Arial, sans-serif; font-size:10em; top:-103px; left:10px;

-webkit-animation: markMove1R 2.5s ease-in-out; 
-webkit-animation-fill-mode: forwards;
-moz-animation: markMove1R 2.5s ease-in-out; 
-moz-animation-fill-mode: forwards;
animation: markMove1R 2.5s ease-in-out; 
animation-fill-mode: forwards;   
}

.quotationMarks2R {position:absolute; color:#069ec7; font-family:Arial, sans-serif; font-size:10em;
left:696px; top:-15px;  

-webkit-animation: markMove2R 2.5s ease-in-out; 
-webkit-animation-fill-mode: forwards;
-moz-animation: markMove2R 2.5s ease-in-out; 
-moz-animation-fill-mode: forwards;
animation: markMove2 2.5s ease-in-out; 
animation-fill-mode: forwards;    
}

.cecilR {position:absolute; width:375px; color:white; font-family:Arial, sans-serif; font-size:3em; top:120px; left:340px;

-webkit-animation: cecilMoveR 2.5s ease-in-out; 
-webkit-animation-fill-mode: forwards;
-moz-animation: cecilMoveR 2.5s ease-in-out; 
-moz-animation-fill-mode: forwards;
animation: markMove2 2.5s ease-in-out; 
animation-fill-mode: forwards;  
}

/*-----------------------------Button Animation Reverse--------------------*/
@-webkit-keyframes buttonMinR {
    0%{opacity:1; width:10px;}
    100% {opacity:0; width:10px;}
}

@-moz-keyframes buttonMinR {
    0%{opacity:1; width:10px;}
    100% {opacity:0; width:10px;}
}

@keyframes buttonMinR {
    0%{opacity:1; width:10px;}
    100% {opacity:0; width:10px;}
}

/*--------------------------------Quote Reverse-----------------------------------*/
@-webkit-keyframes quoteMoveR {
    0% {-webkit-transform:scale(0,0);opacity:0;}
    50% {-webkit-transform:scale(0,0);opacity:0;}
    55% {opacity:1;}
    100% {-webkit-transform:scale(1,1);opacity:1;}
}

@-moz-keyframes quoteMoveR {
    0% {-moz-transform:scale(0,0);opacity:0;}
    50% {-moz-transform:scale(0,0);opacity:0;}
    55% {opacity:1;}
    100% {-moz-transform:scale(1,1);opacity:1;}
}

@keyframes quoteMoveR {
    0% {transform:scale(0,0);opacity:0;}
    50% {transform:scale(0,0);opacity:0;}
    55% {opacity:1;}
    100% {transform:scale(1,1);opacity:1;}
}

/*-----------------------------------Quotation Marks 1 Reverse-----------------*/
@-webkit-keyframes markMove1R {
    0% {left:-5px;top:-160px;-webkit-transform: scale(0.45,0.45);}
    10% {left:-5px;top:-50px;-webkit-transform: scale(0.45,0.45);}
    50% {left:325px;top:-50px;-webkit-transform: scale(1,1);}
    100% {left:10px; top:103; -webkit-transform: scale(1,1);}
}

@-moz-keyframes markMove1R {
    0% {left:-5px;top:-160px;-moz-transform: scale(0.45,0.45);}
    10% {left:-5px;top:-50px;-moz-transform: scale(0.45,0.45);}
    50% {left:325px;top:-50px;-moz-transform: scale(1,1);}
    100% {left:10px; top:103; -moz-transform: scale(1,1);}
}

@-keyframes markMove1R {
    0% {left:-5px;top:-160px;transform: scale(0.45,0.45);}
    10% {left:-5px;top:-50px;transform: scale(0.45,0.45);}
    50% {left:325px;top:-50px;transform: scale(1,1);}
    100% {left:10px; top:103;transform: scale(1,1);}
}

/*----------------------------------Quotation Marks 2 Reverse-------------------------------*/
@-webkit-keyframes markMove2R {
    0% {left:30px;top:-160px;-webkit-transform: scale(0.45,0.45);}
    10% {left:30px;top:-50px;-webkit-transform: scale(0.45,0.45);}
    50% {left:395px;top:-50px;-webkit-transform: scale(1,1);}
    100% {left:696px; top:-15;-webkit-transform: scale(1,1);}   
}

@-moz-keyframes markMove2R {
    0% {left:30px;top:-160px;-moz-transform: scale(0.45,0.45);}
    10% {left:30px;top:-50px;-moz-transform: scale(0.45,0.45);}
    50% {left:395px;top:-50px;-moz-transform: scale(1,1);}
    100% {left:696px; top:-15;-moz-transform: scale(1,1);}   
}

@keyframes markMove2R {
    0% {left:30px;top:-160px;transform: scale(0.45,0.45);}
    10% {left:30px;top:-50px;transform: scale(0.45,0.45);}
    50% {left:395px;top:-50px;transform: scale(1,1);}
    100% {left:696px; top:-15;transform: scale(1,1);}   
}

/*-----------------------------Cecil Move Reverse-----------------------------*/
@-webkit-keyframes cecilMoveR {
    0% {left:-30px;top:-45px;-webkit-transform: scale(0.35,0.35);}
    10% {left:-30px;top:63px;-webkit-transform: scale(0.35,0.35);}
    50% {left:490px;top:40px;-webkit-transform: scale(1,1);}
    75% {left:490px;top:120px;-webkit-transform: scale(1,1);}
    100% {left:340px; top:120px;-webkit-transform: scale(1,1); }    
}

@-moz-keyframes cecilMoveR {
    0% {left:-30px;top:-45px;-moz-transform: scale(0.35,0.35);}
    10% {left:-30px;top:63px;-moz-transform: scale(0.35,0.35);}
    50% {left:490px;top:40px;-moz-transform: scale(1,1);}
    75% {left:490px;top:120px;-moz-transform: scale(1,1);}
    100% {left:340px; top:120px;-moz-transform: scale(1,1); }    
}

@keyframes cecilMoveR {
    0% {left:-30px;top:-45px;transform: scale(0.35,0.35);}
    10% {left:-30px;top:63px;transform: scale(0.35,0.35);}
    50% {left:490px;top:40px;transform: scale(1,1);}
    75% {left:490px;top:120px;transform: scale(1,1);}
    100% {left:340px; top:120px;transform: scale(1,1); }    
}



/*-----------About Us IE Version Not setup-----------------------*/

.aboutContainer {position:relative; float:right; margin-right: 2.5%;width:400px; color:#069ec7; opacity:0;

-webkit-animation: aboutShow 2s ease-in-out; 
-webkit-animation-delay:5s; 
-webkit-animation-fill-mode: forwards;
-moz-animation: aboutShow 2s ease-in-out; 
-moz-animation-delay:5s; 
-moz-animation-fill-mode: forwards;
animation: aboutShow 2s ease-in-out; 
animation-delay:4s; 
animation-fill-mode: forwards;
}


.aboutContainerR {position:relative; float:right; margin-right: 2.5%;width:400px; color:#069ec7; opacity:0;

-webkit-animation: aboutShowR 2s ease-in-out; 
-webkit-animation-fill-mode:both;
-moz-animation: aboutShowR 2s ease-in-out; 
-moz-animation-fill-mode:both;
animation: aboutShowR 2s ease-in-out; 
animation-fill-mode: both;
}

.pageParaHeader {font-family: arial; font-size: 3em; color:#069ec7;   
}

.textBody {position: relative; margin-top: -20px; color:white;
}

.dropCap {position:absolute; font-size:2.5em; top:-4px;color:#069ec7;
}

@-webkit-keyframes aboutShow {
    0% {opacity:0;}
    75% {opacity:0;}
    100% {opacity:1;}
}

@-moz-keyframes aboutShow {
    0% {opacity:0;}
    75% {opacity:0;}
    100% {opacity:1;}
}

@keyframes aboutShow {
    0% {opacity:0;}
    75% {opacity:0;}
    100% {opacity:1;}
}

@-webkit-keyframes aboutShowR{
    0% {opacity:1;}
    25% {opacity:0;}
    100% {opacity:0;}
}

@-moz-keyframes aboutShowR{
    0% {opacity:1;}
    25% {opacity:0;}
    100% {opacity:0;}
}


@keyframes aboutShowR{
    0% {opacity:1;}
    25% {opacity:0;}
    100% {opacity:0;}
}

body {background:black;}

Javascript

function changeClass() {


    if (document.getElementById("quotationMarks1").className === "quotationMarks1") 
   {document.getElementById("quotationMarks1").className = "quotationMarks1R";
    document.getElementById("quotationMarks2").className = "quotationMarks2R";
    document.getElementById("quote").className = "quoteR";
    document.getElementById("cecil").className = "cecilR";
    document.getElementById("aboutContainer").className ="aboutContainerR";
    document.getElementById("quoteButton").className ="quoteButtonMin";    
    }

    else {
        document.getElementById("quotationMarks1").className = "quotationMarks1";
        document.getElementById("quotationMarks2").className = "quotationMarks2";
        document.getElementById("quote").className = "quote";
        document.getElementById("cecil").className = "cecil";
        document.getElementById("aboutContainer").className ="aboutContainer";
        document.getElementById("quoteButton").className ="quoteButtonMinR";

        document.getElementById("quotationMarks1").style.webkitAnimationDelay = "0s";
        document.getElementById("quotationMarks2").style.webkitAnimationDelay = "0s";
        document.getElementById("quote").style.webkitAnimationDelay = "0s";
        document.getElementById("cecil").style.webkitAnimationDelay = "0s";
        document.getElementById("aboutContainer").style.webkitAnimationDelay = "0s";

        document.getElementById("quotationMarks1").style.mozAnimationDelay = "0s";
        document.getElementById("quotationMarks2").style.mozAnimationDelay = "0s";
        document.getElementById("quote").style.mozAnimationDelay = "0s";
        document.getElementById("cecil").style.mozAnimationDelay = "0s";
        document.getElementById("aboutContainer").style.mozAnimationDelay = "0s";

        document.getElementById("quotationMarks1").style.AnimationDelay = "0s";
        document.getElementById("quotationMarks2").style.AnimationDelay = "0s";
        document.getElementById("quote").style.AnimationDelay = "0s";
        document.getElementById("cecil").style.AnimationDelay = "0s";
        document.getElementById("aboutContainer").style.AnimationDelay = "0s";


        document.getElementById("quoteButton").className ="quoteButton";  
    }

}

function mouseOver() {
    document.getElementById("quotationMarks1").style.color = "#3ccaf0";
    document.getElementById("quotationMarks2").style.color = "#3ccaf0";
}

function mouseOut() {
    document.getElementById("quotationMarks1").style.color = "#069ec7";
    document.getElementById("quotationMarks2").style.color = "#069ec7";

}

【问题讨论】：

    标签： javascript html css firefox animation


    【解决方案1】：

    您只是忘记将动画名称从 markMove2 更改为 cecilMove

    .cecil { ... animation: cecilkMove2 2s ease-in-out; }

    Demo

    此外，您应该使用 javascript 变量来跟踪您的 DOM 元素，而不是每次都通过它们的 ID 获取它们。它性能更好，更容易维护，也更容易编写

    【讨论】：

    • 感谢您的帮助以及在 javascript 中使用变量而不是获取文档 ID 的提示。
    • 我查看了代码的错误部分。我以为 Firefox 是从其预先固定的动画语法中读取，但它正在读取或应用标准动画语法。
    • javascript 变量似乎不起作用。演示中是否缺少某些内容，因为它应该反转动画并具有鼠标悬停和鼠标移出事件。
    • @justalittleheat 只需将 jsFiddle 左侧的 No wrap - in &lt;head&gt; 更改为 No wrap - in &lt;body&gt;。 jsfiddle.net/Zeaklous/A5gMJ/3
    猜你喜欢
    • 1970-01-01
    • 2015-02-22
    • 2013-08-07
    • 1970-01-01
    • 2014-12-18
    • 2021-03-18
    • 2012-11-10
    • 2019-03-23
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode