網頁動畫制作（CSS+JS）
第1期： 手把手教你制作網易郵箱注冊頁面
第2期： 網頁動畫制作（CSS+JS）
第3期：12306頁面制作
鄙人不才，第一次寫這篇博文時將動態網頁與網頁動態效果這兩個概念混淆，感謝大佬指點。
文章目錄
- 網頁動畫制作（CSS+JS）
- 前言
- 一、基礎知識（CSS+JS）
- 二、制作步驟
- 1.建立框架
- 2.豐富內容
- 3.修改樣式(CSS)
- 4.添加動態效果(JS)
- 總結
前言
這一期我們要仿照制作的網站：新動態官網
兩個要實現的目標動態效果:
1. 鼠標經過時，圖片遮罩層樣式的改變（包括按鈕）：
2. 鼠標經過時下方內容的切換：
以下是本篇文章正文內容
一、基礎知識（CSS+JS）
注：僅供參考，可直接跳過。
1.如何插入JS
方法一：內嵌式
<head><script type="text/javascript"></script>
</head>
PS:JS作為一種腳本語言可以放在html頁面中任何位置，但進行頁面顯示初始化的js必須放在head里面
方法二：外聯式
<script src="script.js">
</script>
2.一點語法
JS:
詳細教程/基礎知識
<html><head><script type="text/javascript">function fun() {alert("調用函數");}</script></head><body><form><input type="button" value="點擊" onclick="fun()" /> </form></body>
</html>
- 輸出內容：document.write(字符串或變量)
<script type="text/javascript">var char1 = "A";var char2 = "BCD";document.write(char1+char2+"<br>");
</script>
消息對話框:
- 警告：alert(字符串或變量);
- 確認：confirm(對話框中要顯示的文本);//返回值為布爾類型(true/false)
eg. ??confirm(“是否打開？”);
- 提問：prompt(str1, str2);
str1: 要顯示在消息對話框中的文本，不可修改
str2：文本框中的內容，可以修改
eg.???prompt(“confirm web”,“http：//www.imooc.com/”);
窗口的打開與關閉:
- 打開：window.open([URL], [窗口名稱], [參數字符串]);
URL：可選參數，在窗口中要顯示網頁的網址或路徑。如果省略這個參數，或者它的值是空字符串，那么窗口就不顯示任何文檔。
窗口名稱：可選參數，被打開窗口的名稱。
1.該名稱由字母、數字和下劃線字符組成。
2."_top"、"_blank"、"_self"具有特殊意義的名稱。
_blank：在新窗口顯示目標網頁
_self：在當前窗口顯示目標網頁
_top：框架網頁中在上部窗口中顯示目標網頁
3.相同 name 的窗口只能創建一個，要想創建多個窗口則 name 不能相同。
4.name 不能包含有空格。
參數字符串：可選參數，設置窗口參數，各參數用逗號隔開。
參數表:
<script type="text/javascript">window.open('https://blog.csdn.net/weixin_53312629?spm=1011.2124.3001.5343','_blank','width=300,height=200,menubar=no,toolbar=no, status=no,scrollbars=yes')
</script>
- 關閉：
window.close(); //關閉本窗口
或
<窗口對象>.close(); //關閉指定的窗口
例如:關閉新建的窗口。
<script type="text/javascript">var mywin=window.open('https://www.csdn.net'); mywin.close();
</script>
注意:上面代碼在打開新窗口的同時，關閉該窗口，看不到被打開的窗口。
- 通過ID獲取元素：document.getElementById(“id”) ;//帶入ID即可
- innerHTML 屬性：用于獲取或替換 HTML 元素的內容。
語法:
Object.innerHTML
eg.
<!DOCTYPE HTML>
<html><head><title> innerHTML
</title></head><body><p id="con">Hello World!
</p><script>var mycon=document.getElementById("con") ;document.write("p標簽原始內容:"+mycon.innerHTML+" <br>") ;mycon. innerHTML ="New text!"; document. write("p標簽修改后內容:"+mycon.innerHTML) ;</script></body>
</html>
運行結果：
????Hello World!
????p標簽原始內容:Hello World!
????p標簽修改后內容:New text!
- 改變 HTML 樣式 ：Object.style.property=new style;
基本屬性表（property）:
- 顯示和隱藏（display屬性） ：Object.style.display = value;
value取值:
- 控制類名（className 屬性）：object.className = classname；//className 屬性設置或返回元素的class 屬性。
CSS:
- z-index:-1——元素位于文字下方;
- z-index: 1——元素位于文字上方;
- rgb() 函數——使用紅( R)、綠(G)、藍(B)三個顏色的疊加來生成各式各樣的顏色。
RGB 即紅色、綠色、藍色（英語：Red, Green, Blue）。
紅色（R）0 到 255 間的整數，代表顏色中的紅色成分。
綠色（G）0 到 255 間的整數，代表顏色中的綠色成分。
藍色（B）0 到 255 間的整數，代表顏色中的藍色成分。
-
clear屬性——指定段落的左側或右側不允許浮動的元素;
-
transition 屬性——設置元素當過渡效果;
-
四個簡寫屬性為：
- transition-property
- transition-duration
- transition-timing-function
- transition-delay
-
語法
transition: property duration timing-function delay;
-
注意： 始終指定transition-duration屬性，否則持續時間為0，transition不會有任何效果。
值描述語法
| transition-property | 指定CSS屬性的name，transition效果 | transition-property: none/all/ property; |
| transition-duration | transition效果需要指定多少秒或毫秒才能完成 | transition-duration: time; |
| transition-timing-function | 指定transition效果的轉速曲線 | transition-timing-function: linear/ease/ease-in/ease-out/ease-in-out/cubic-bezier(n,n,n,n); |
| transition-delay | 定義transition效果開始的時候 | transition-delay: time; |
#mermaid-svg-LJA7uY3AIjdFcGXm .label{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);fill:#333;color:#333}#mermaid-svg-LJA7uY3AIjdFcGXm .label text{fill:#333}#mermaid-svg-LJA7uY3AIjdFcGXm .node rect,#mermaid-svg-LJA7uY3AIjdFcGXm .node circle,#mermaid-svg-LJA7uY3AIjdFcGXm .node ellipse,#mermaid-svg-LJA7uY3AIjdFcGXm .node polygon,#mermaid-svg-LJA7uY3AIjdFcGXm .node path{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-LJA7uY3AIjdFcGXm .node .label{text-align:center;fill:#333}#mermaid-svg-LJA7uY3AIjdFcGXm .node.clickable{cursor:pointer}#mermaid-svg-LJA7uY3AIjdFcGXm .arrowheadPath{fill:#333}#mermaid-svg-LJA7uY3AIjdFcGXm .edgePath .path{stroke:#333;stroke-width:1.5px}#mermaid-svg-LJA7uY3AIjdFcGXm .flowchart-link{stroke:#333;fill:none}#mermaid-svg-LJA7uY3AIjdFcGXm .edgeLabel{background-color:#e8e8e8;text-align:center}#mermaid-svg-LJA7uY3AIjdFcGXm .edgeLabel rect{opacity:0.9}#mermaid-svg-LJA7uY3AIjdFcGXm .edgeLabel span{color:#333}#mermaid-svg-LJA7uY3AIjdFcGXm .cluster rect{fill:#ffffde;stroke:#aa3;stroke-width:1px}#mermaid-svg-LJA7uY3AIjdFcGXm .cluster text{fill:#333}#mermaid-svg-LJA7uY3AIjdFcGXm div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);font-size:12px;background:#ffffde;border:1px solid #aa3;border-radius:2px;pointer-events:none;z-index:100}#mermaid-svg-LJA7uY3AIjdFcGXm .actor{stroke:#ccf;fill:#ECECFF}#mermaid-svg-LJA7uY3AIjdFcGXm text.actor>tspan{fill:#000;stroke:none}#mermaid-svg-LJA7uY3AIjdFcGXm .actor-line{stroke:grey}#mermaid-svg-LJA7uY3AIjdFcGXm .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333}#mermaid-svg-LJA7uY3AIjdFcGXm .messageLine1{stroke-width:1.5;stroke-dasharray:2, 2;stroke:#333}#mermaid-svg-LJA7uY3AIjdFcGXm #arrowhead path{fill:#333;stroke:#333}#mermaid-svg-LJA7uY3AIjdFcGXm .sequenceNumber{fill:#fff}#mermaid-svg-LJA7uY3AIjdFcGXm #sequencenumber{fill:#333}#mermaid-svg-LJA7uY3AIjdFcGXm #crosshead path{fill:#333;stroke:#333}#mermaid-svg-LJA7uY3AIjdFcGXm .messageText{fill:#333;stroke:#333}#mermaid-svg-LJA7uY3AIjdFcGXm .labelBox{stroke:#ccf;fill:#ECECFF}#mermaid-svg-LJA7uY3AIjdFcGXm .labelText,#mermaid-svg-LJA7uY3AIjdFcGXm .labelText>tspan{fill:#000;stroke:none}#mermaid-svg-LJA7uY3AIjdFcGXm .loopText,#mermaid-svg-LJA7uY3AIjdFcGXm .loopText>tspan{fill:#000;stroke:none}#mermaid-svg-LJA7uY3AIjdFcGXm .loopLine{stroke-width:2px;stroke-dasharray:2, 2;stroke:#ccf;fill:#ccf}#mermaid-svg-LJA7uY3AIjdFcGXm .note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-LJA7uY3AIjdFcGXm .noteText,#mermaid-svg-LJA7uY3AIjdFcGXm .noteText>tspan{fill:#000;stroke:none}#mermaid-svg-LJA7uY3AIjdFcGXm .activation0{fill:#f4f4f4;stroke:#666}#mermaid-svg-LJA7uY3AIjdFcGXm .activation1{fill:#f4f4f4;stroke:#666}#mermaid-svg-LJA7uY3AIjdFcGXm .activation2{fill:#f4f4f4;stroke:#666}#mermaid-svg-LJA7uY3AIjdFcGXm .mermaid-main-font{font-family:"trebuchet ms", verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-LJA7uY3AIjdFcGXm .section{stroke:none;opacity:0.2}#mermaid-svg-LJA7uY3AIjdFcGXm .section0{fill:rgba(102,102,255,0.49)}#mermaid-svg-LJA7uY3AIjdFcGXm .section2{fill:#fff400}#mermaid-svg-LJA7uY3AIjdFcGXm .section1,#mermaid-svg-LJA7uY3AIjdFcGXm .section3{fill:#fff;opacity:0.2}#mermaid-svg-LJA7uY3AIjdFcGXm .sectionTitle0{fill:#333}#mermaid-svg-LJA7uY3AIjdFcGXm .sectionTitle1{fill:#333}#mermaid-svg-LJA7uY3AIjdFcGXm .sectionTitle2{fill:#333}#mermaid-svg-LJA7uY3AIjdFcGXm .sectionTitle3{fill:#333}#mermaid-svg-LJA7uY3AIjdFcGXm .sectionTitle{text-anchor:start;font-size:11px;text-height:14px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-LJA7uY3AIjdFcGXm .grid .tick{stroke:#d3d3d3;opacity:0.8;shape-rendering:crispEdges}#mermaid-svg-LJA7uY3AIjdFcGXm .grid .tick text{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-LJA7uY3AIjdFcGXm .grid path{stroke-width:0}#mermaid-svg-LJA7uY3AIjdFcGXm .today{fill:none;stroke:red;stroke-width:2px}#mermaid-svg-LJA7uY3AIjdFcGXm .task{stroke-width:2}#mermaid-svg-LJA7uY3AIjdFcGXm .taskText{text-anchor:middle;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-LJA7uY3AIjdFcGXm .taskText:not([font-size]){font-size:11px}#mermaid-svg-LJA7uY3AIjdFcGXm .taskTextOutsideRight{fill:#000;text-anchor:start;font-size:11px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-LJA7uY3AIjdFcGXm .taskTextOutsideLeft{fill:#000;text-anchor:end;font-size:11px}#mermaid-svg-LJA7uY3AIjdFcGXm .task.clickable{cursor:pointer}#mermaid-svg-LJA7uY3AIjdFcGXm .taskText.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-LJA7uY3AIjdFcGXm .taskTextOutsideLeft.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-LJA7uY3AIjdFcGXm .taskTextOutsideRight.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-LJA7uY3AIjdFcGXm .taskText0,#mermaid-svg-LJA7uY3AIjdFcGXm .taskText1,#mermaid-svg-LJA7uY3AIjdFcGXm .taskText2,#mermaid-svg-LJA7uY3AIjdFcGXm .taskText3{fill:#fff}#mermaid-svg-LJA7uY3AIjdFcGXm .task0,#mermaid-svg-LJA7uY3AIjdFcGXm .task1,#mermaid-svg-LJA7uY3AIjdFcGXm .task2,#mermaid-svg-LJA7uY3AIjdFcGXm .task3{fill:#8a90dd;stroke:#534fbc}#mermaid-svg-LJA7uY3AIjdFcGXm .taskTextOutside0,#mermaid-svg-LJA7uY3AIjdFcGXm .taskTextOutside2{fill:#000}#mermaid-svg-LJA7uY3AIjdFcGXm .taskTextOutside1,#mermaid-svg-LJA7uY3AIjdFcGXm .taskTextOutside3{fill:#000}#mermaid-svg-LJA7uY3AIjdFcGXm .active0,#mermaid-svg-LJA7uY3AIjdFcGXm .active1,#mermaid-svg-LJA7uY3AIjdFcGXm .active2,#mermaid-svg-LJA7uY3AIjdFcGXm .active3{fill:#bfc7ff;stroke:#534fbc}#mermaid-svg-LJA7uY3AIjdFcGXm .activeText0,#mermaid-svg-LJA7uY3AIjdFcGXm .activeText1,#mermaid-svg-LJA7uY3AIjdFcGXm .activeText2,#mermaid-svg-LJA7uY3AIjdFcGXm .activeText3{fill:#000 !important}#mermaid-svg-LJA7uY3AIjdFcGXm .done0,#mermaid-svg-LJA7uY3AIjdFcGXm .done1,#mermaid-svg-LJA7uY3AIjdFcGXm .done2,#mermaid-svg-LJA7uY3AIjdFcGXm .done3{stroke:grey;fill:#d3d3d3;stroke-width:2}#mermaid-svg-LJA7uY3AIjdFcGXm .doneText0,#mermaid-svg-LJA7uY3AIjdFcGXm .doneText1,#mermaid-svg-LJA7uY3AIjdFcGXm .doneText2,#mermaid-svg-LJA7uY3AIjdFcGXm .doneText3{fill:#000 !important}#mermaid-svg-LJA7uY3AIjdFcGXm .crit0,#mermaid-svg-LJA7uY3AIjdFcGXm .crit1,#mermaid-svg-LJA7uY3AIjdFcGXm .crit2,#mermaid-svg-LJA7uY3AIjdFcGXm .crit3{stroke:#f88;fill:red;stroke-width:2}#mermaid-svg-LJA7uY3AIjdFcGXm .activeCrit0,#mermaid-svg-LJA7uY3AIjdFcGXm .activeCrit1,#mermaid-svg-LJA7uY3AIjdFcGXm .activeCrit2,#mermaid-svg-LJA7uY3AIjdFcGXm .activeCrit3{stroke:#f88;fill:#bfc7ff;stroke-width:2}#mermaid-svg-LJA7uY3AIjdFcGXm .doneCrit0,#mermaid-svg-LJA7uY3AIjdFcGXm .doneCrit1,#mermaid-svg-LJA7uY3AIjdFcGXm .doneCrit2,#mermaid-svg-LJA7uY3AIjdFcGXm .doneCrit3{stroke:#f88;fill:#d3d3d3;stroke-width:2;cursor:pointer;shape-rendering:crispEdges}#mermaid-svg-LJA7uY3AIjdFcGXm .milestone{transform:rotate(45deg) scale(0.8, 0.8)}#mermaid-svg-LJA7uY3AIjdFcGXm .milestoneText{font-style:italic}#mermaid-svg-LJA7uY3AIjdFcGXm .doneCritText0,#mermaid-svg-LJA7uY3AIjdFcGXm .doneCritText1,#mermaid-svg-LJA7uY3AIjdFcGXm .doneCritText2,#mermaid-svg-LJA7uY3AIjdFcGXm .doneCritText3{fill:#000 !important}#mermaid-svg-LJA7uY3AIjdFcGXm .activeCritText0,#mermaid-svg-LJA7uY3AIjdFcGXm .activeCritText1,#mermaid-svg-LJA7uY3AIjdFcGXm .activeCritText2,#mermaid-svg-LJA7uY3AIjdFcGXm .activeCritText3{fill:#000 !important}#mermaid-svg-LJA7uY3AIjdFcGXm .titleText{text-anchor:middle;font-size:18px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-LJA7uY3AIjdFcGXm g.classGroup text{fill:#9370db;stroke:none;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);font-size:10px}#mermaid-svg-LJA7uY3AIjdFcGXm g.classGroup text .title{font-weight:bolder}#mermaid-svg-LJA7uY3AIjdFcGXm g.clickable{cursor:pointer}#mermaid-svg-LJA7uY3AIjdFcGXm g.classGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-LJA7uY3AIjdFcGXm g.classGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-LJA7uY3AIjdFcGXm .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5}#mermaid-svg-LJA7uY3AIjdFcGXm .classLabel .label{fill:#9370db;font-size:10px}#mermaid-svg-LJA7uY3AIjdFcGXm .relation{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-LJA7uY3AIjdFcGXm .dashed-line{stroke-dasharray:3}#mermaid-svg-LJA7uY3AIjdFcGXm #compositionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-LJA7uY3AIjdFcGXm #compositionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-LJA7uY3AIjdFcGXm #aggregationStart{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-LJA7uY3AIjdFcGXm #aggregationEnd{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-LJA7uY3AIjdFcGXm #dependencyStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-LJA7uY3AIjdFcGXm #dependencyEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-LJA7uY3AIjdFcGXm #extensionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-LJA7uY3AIjdFcGXm #extensionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-LJA7uY3AIjdFcGXm .commit-id,#mermaid-svg-LJA7uY3AIjdFcGXm .commit-msg,#mermaid-svg-LJA7uY3AIjdFcGXm .branch-label{fill:lightgrey;color:lightgrey;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-LJA7uY3AIjdFcGXm .pieTitleText{text-anchor:middle;font-size:25px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-LJA7uY3AIjdFcGXm .slice{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-LJA7uY3AIjdFcGXm g.stateGroup text{fill:#9370db;stroke:none;font-size:10px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-LJA7uY3AIjdFcGXm g.stateGroup text{fill:#9370db;fill:#333;stroke:none;font-size:10px}#mermaid-svg-LJA7uY3AIjdFcGXm g.statediagram-cluster .cluster-label text{fill:#333}#mermaid-svg-LJA7uY3AIjdFcGXm g.stateGroup .state-title{font-weight:bolder;fill:#000}#mermaid-svg-LJA7uY3AIjdFcGXm g.stateGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-LJA7uY3AIjdFcGXm g.stateGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-LJA7uY3AIjdFcGXm .transition{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-LJA7uY3AIjdFcGXm .stateGroup .composit{fill:white;border-bottom:1px}#mermaid-svg-LJA7uY3AIjdFcGXm .stateGroup .alt-composit{fill:#e0e0e0;border-bottom:1px}#mermaid-svg-LJA7uY3AIjdFcGXm .state-note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-LJA7uY3AIjdFcGXm .state-note text{fill:black;stroke:none;font-size:10px}#mermaid-svg-LJA7uY3AIjdFcGXm .stateLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.7}#mermaid-svg-LJA7uY3AIjdFcGXm .edgeLabel text{fill:#333}#mermaid-svg-LJA7uY3AIjdFcGXm .stateLabel text{fill:#000;font-size:10px;font-weight:bold;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-LJA7uY3AIjdFcGXm .node circle.state-start{fill:black;stroke:black}#mermaid-svg-LJA7uY3AIjdFcGXm .node circle.state-end{fill:black;stroke:white;stroke-width:1.5}#mermaid-svg-LJA7uY3AIjdFcGXm #statediagram-barbEnd{fill:#9370db}#mermaid-svg-LJA7uY3AIjdFcGXm .statediagram-cluster rect{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-LJA7uY3AIjdFcGXm .statediagram-cluster rect.outer{rx:5px;ry:5px}#mermaid-svg-LJA7uY3AIjdFcGXm .statediagram-state .divider{stroke:#9370db}#mermaid-svg-LJA7uY3AIjdFcGXm .statediagram-state .title-state{rx:5px;ry:5px}#mermaid-svg-LJA7uY3AIjdFcGXm .statediagram-cluster.statediagram-cluster .inner{fill:white}#mermaid-svg-LJA7uY3AIjdFcGXm .statediagram-cluster.statediagram-cluster-alt .inner{fill:#e0e0e0}#mermaid-svg-LJA7uY3AIjdFcGXm .statediagram-cluster .inner{rx:0;ry:0}#mermaid-svg-LJA7uY3AIjdFcGXm .statediagram-state rect.basic{rx:5px;ry:5px}#mermaid-svg-LJA7uY3AIjdFcGXm .statediagram-state rect.divider{stroke-dasharray:10,10;fill:#efefef}#mermaid-svg-LJA7uY3AIjdFcGXm .note-edge{stroke-dasharray:5}#mermaid-svg-LJA7uY3AIjdFcGXm .statediagram-note rect{fill:#fff5ad;stroke:#aa3;stroke-width:1px;rx:0;ry:0}:root{--mermaid-font-family: '"trebuchet ms", verdana, arial';--mermaid-font-family: "Comic Sans MS", "Comic Sans", cursive}#mermaid-svg-LJA7uY3AIjdFcGXm .error-icon{fill:#522}#mermaid-svg-LJA7uY3AIjdFcGXm .error-text{fill:#522;stroke:#522}#mermaid-svg-LJA7uY3AIjdFcGXm .edge-thickness-normal{stroke-width:2px}#mermaid-svg-LJA7uY3AIjdFcGXm .edge-thickness-thick{stroke-width:3.5px}#mermaid-svg-LJA7uY3AIjdFcGXm .edge-pattern-solid{stroke-dasharray:0}#mermaid-svg-LJA7uY3AIjdFcGXm .edge-pattern-dashed{stroke-dasharray:3}#mermaid-svg-LJA7uY3AIjdFcGXm .edge-pattern-dotted{stroke-dasharray:2}#mermaid-svg-LJA7uY3AIjdFcGXm .marker{fill:#333}#mermaid-svg-LJA7uY3AIjdFcGXm .marker.cross{stroke:#333}:root { --mermaid-font-family: "trebuchet ms", verdana, arial;}#mermaid-svg-LJA7uY3AIjdFcGXm {color: rgba(0, 0, 0, 0.75);font: ;}
transition-propertynoneallproperty沒有屬性會獲得過渡效果所有屬性都將獲得過渡效果定義應用過渡效果的 CSS 屬性名稱列表,列表以逗號分隔
#mermaid-svg-cqlwfsxe8yVXdr88 .label{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);fill:#333;color:#333}#mermaid-svg-cqlwfsxe8yVXdr88 .label text{fill:#333}#mermaid-svg-cqlwfsxe8yVXdr88 .node rect,#mermaid-svg-cqlwfsxe8yVXdr88 .node circle,#mermaid-svg-cqlwfsxe8yVXdr88 .node ellipse,#mermaid-svg-cqlwfsxe8yVXdr88 .node polygon,#mermaid-svg-cqlwfsxe8yVXdr88 .node path{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-cqlwfsxe8yVXdr88 .node .label{text-align:center;fill:#333}#mermaid-svg-cqlwfsxe8yVXdr88 .node.clickable{cursor:pointer}#mermaid-svg-cqlwfsxe8yVXdr88 .arrowheadPath{fill:#333}#mermaid-svg-cqlwfsxe8yVXdr88 .edgePath .path{stroke:#333;stroke-width:1.5px}#mermaid-svg-cqlwfsxe8yVXdr88 .flowchart-link{stroke:#333;fill:none}#mermaid-svg-cqlwfsxe8yVXdr88 .edgeLabel{background-color:#e8e8e8;text-align:center}#mermaid-svg-cqlwfsxe8yVXdr88 .edgeLabel rect{opacity:0.9}#mermaid-svg-cqlwfsxe8yVXdr88 .edgeLabel span{color:#333}#mermaid-svg-cqlwfsxe8yVXdr88 .cluster rect{fill:#ffffde;stroke:#aa3;stroke-width:1px}#mermaid-svg-cqlwfsxe8yVXdr88 .cluster text{fill:#333}#mermaid-svg-cqlwfsxe8yVXdr88 div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);font-size:12px;background:#ffffde;border:1px solid #aa3;border-radius:2px;pointer-events:none;z-index:100}#mermaid-svg-cqlwfsxe8yVXdr88 .actor{stroke:#ccf;fill:#ECECFF}#mermaid-svg-cqlwfsxe8yVXdr88 text.actor>tspan{fill:#000;stroke:none}#mermaid-svg-cqlwfsxe8yVXdr88 .actor-line{stroke:grey}#mermaid-svg-cqlwfsxe8yVXdr88 .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333}#mermaid-svg-cqlwfsxe8yVXdr88 .messageLine1{stroke-width:1.5;stroke-dasharray:2, 2;stroke:#333}#mermaid-svg-cqlwfsxe8yVXdr88 #arrowhead path{fill:#333;stroke:#333}#mermaid-svg-cqlwfsxe8yVXdr88 .sequenceNumber{fill:#fff}#mermaid-svg-cqlwfsxe8yVXdr88 #sequencenumber{fill:#333}#mermaid-svg-cqlwfsxe8yVXdr88 #crosshead path{fill:#333;stroke:#333}#mermaid-svg-cqlwfsxe8yVXdr88 .messageText{fill:#333;stroke:#333}#mermaid-svg-cqlwfsxe8yVXdr88 .labelBox{stroke:#ccf;fill:#ECECFF}#mermaid-svg-cqlwfsxe8yVXdr88 .labelText,#mermaid-svg-cqlwfsxe8yVXdr88 .labelText>tspan{fill:#000;stroke:none}#mermaid-svg-cqlwfsxe8yVXdr88 .loopText,#mermaid-svg-cqlwfsxe8yVXdr88 .loopText>tspan{fill:#000;stroke:none}#mermaid-svg-cqlwfsxe8yVXdr88 .loopLine{stroke-width:2px;stroke-dasharray:2, 2;stroke:#ccf;fill:#ccf}#mermaid-svg-cqlwfsxe8yVXdr88 .note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-cqlwfsxe8yVXdr88 .noteText,#mermaid-svg-cqlwfsxe8yVXdr88 .noteText>tspan{fill:#000;stroke:none}#mermaid-svg-cqlwfsxe8yVXdr88 .activation0{fill:#f4f4f4;stroke:#666}#mermaid-svg-cqlwfsxe8yVXdr88 .activation1{fill:#f4f4f4;stroke:#666}#mermaid-svg-cqlwfsxe8yVXdr88 .activation2{fill:#f4f4f4;stroke:#666}#mermaid-svg-cqlwfsxe8yVXdr88 .mermaid-main-font{font-family:"trebuchet ms", verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-cqlwfsxe8yVXdr88 .section{stroke:none;opacity:0.2}#mermaid-svg-cqlwfsxe8yVXdr88 .section0{fill:rgba(102,102,255,0.49)}#mermaid-svg-cqlwfsxe8yVXdr88 .section2{fill:#fff400}#mermaid-svg-cqlwfsxe8yVXdr88 .section1,#mermaid-svg-cqlwfsxe8yVXdr88 .section3{fill:#fff;opacity:0.2}#mermaid-svg-cqlwfsxe8yVXdr88 .sectionTitle0{fill:#333}#mermaid-svg-cqlwfsxe8yVXdr88 .sectionTitle1{fill:#333}#mermaid-svg-cqlwfsxe8yVXdr88 .sectionTitle2{fill:#333}#mermaid-svg-cqlwfsxe8yVXdr88 .sectionTitle3{fill:#333}#mermaid-svg-cqlwfsxe8yVXdr88 .sectionTitle{text-anchor:start;font-size:11px;text-height:14px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-cqlwfsxe8yVXdr88 .grid .tick{stroke:#d3d3d3;opacity:0.8;shape-rendering:crispEdges}#mermaid-svg-cqlwfsxe8yVXdr88 .grid .tick text{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-cqlwfsxe8yVXdr88 .grid path{stroke-width:0}#mermaid-svg-cqlwfsxe8yVXdr88 .today{fill:none;stroke:red;stroke-width:2px}#mermaid-svg-cqlwfsxe8yVXdr88 .task{stroke-width:2}#mermaid-svg-cqlwfsxe8yVXdr88 .taskText{text-anchor:middle;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-cqlwfsxe8yVXdr88 .taskText:not([font-size]){font-size:11px}#mermaid-svg-cqlwfsxe8yVXdr88 .taskTextOutsideRight{fill:#000;text-anchor:start;font-size:11px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-cqlwfsxe8yVXdr88 .taskTextOutsideLeft{fill:#000;text-anchor:end;font-size:11px}#mermaid-svg-cqlwfsxe8yVXdr88 .task.clickable{cursor:pointer}#mermaid-svg-cqlwfsxe8yVXdr88 .taskText.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-cqlwfsxe8yVXdr88 .taskTextOutsideLeft.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-cqlwfsxe8yVXdr88 .taskTextOutsideRight.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-cqlwfsxe8yVXdr88 .taskText0,#mermaid-svg-cqlwfsxe8yVXdr88 .taskText1,#mermaid-svg-cqlwfsxe8yVXdr88 .taskText2,#mermaid-svg-cqlwfsxe8yVXdr88 .taskText3{fill:#fff}#mermaid-svg-cqlwfsxe8yVXdr88 .task0,#mermaid-svg-cqlwfsxe8yVXdr88 .task1,#mermaid-svg-cqlwfsxe8yVXdr88 .task2,#mermaid-svg-cqlwfsxe8yVXdr88 .task3{fill:#8a90dd;stroke:#534fbc}#mermaid-svg-cqlwfsxe8yVXdr88 .taskTextOutside0,#mermaid-svg-cqlwfsxe8yVXdr88 .taskTextOutside2{fill:#000}#mermaid-svg-cqlwfsxe8yVXdr88 .taskTextOutside1,#mermaid-svg-cqlwfsxe8yVXdr88 .taskTextOutside3{fill:#000}#mermaid-svg-cqlwfsxe8yVXdr88 .active0,#mermaid-svg-cqlwfsxe8yVXdr88 .active1,#mermaid-svg-cqlwfsxe8yVXdr88 .active2,#mermaid-svg-cqlwfsxe8yVXdr88 .active3{fill:#bfc7ff;stroke:#534fbc}#mermaid-svg-cqlwfsxe8yVXdr88 .activeText0,#mermaid-svg-cqlwfsxe8yVXdr88 .activeText1,#mermaid-svg-cqlwfsxe8yVXdr88 .activeText2,#mermaid-svg-cqlwfsxe8yVXdr88 .activeText3{fill:#000 !important}#mermaid-svg-cqlwfsxe8yVXdr88 .done0,#mermaid-svg-cqlwfsxe8yVXdr88 .done1,#mermaid-svg-cqlwfsxe8yVXdr88 .done2,#mermaid-svg-cqlwfsxe8yVXdr88 .done3{stroke:grey;fill:#d3d3d3;stroke-width:2}#mermaid-svg-cqlwfsxe8yVXdr88 .doneText0,#mermaid-svg-cqlwfsxe8yVXdr88 .doneText1,#mermaid-svg-cqlwfsxe8yVXdr88 .doneText2,#mermaid-svg-cqlwfsxe8yVXdr88 .doneText3{fill:#000 !important}#mermaid-svg-cqlwfsxe8yVXdr88 .crit0,#mermaid-svg-cqlwfsxe8yVXdr88 .crit1,#mermaid-svg-cqlwfsxe8yVXdr88 .crit2,#mermaid-svg-cqlwfsxe8yVXdr88 .crit3{stroke:#f88;fill:red;stroke-width:2}#mermaid-svg-cqlwfsxe8yVXdr88 .activeCrit0,#mermaid-svg-cqlwfsxe8yVXdr88 .activeCrit1,#mermaid-svg-cqlwfsxe8yVXdr88 .activeCrit2,#mermaid-svg-cqlwfsxe8yVXdr88 .activeCrit3{stroke:#f88;fill:#bfc7ff;stroke-width:2}#mermaid-svg-cqlwfsxe8yVXdr88 .doneCrit0,#mermaid-svg-cqlwfsxe8yVXdr88 .doneCrit1,#mermaid-svg-cqlwfsxe8yVXdr88 .doneCrit2,#mermaid-svg-cqlwfsxe8yVXdr88 .doneCrit3{stroke:#f88;fill:#d3d3d3;stroke-width:2;cursor:pointer;shape-rendering:crispEdges}#mermaid-svg-cqlwfsxe8yVXdr88 .milestone{transform:rotate(45deg) scale(0.8, 0.8)}#mermaid-svg-cqlwfsxe8yVXdr88 .milestoneText{font-style:italic}#mermaid-svg-cqlwfsxe8yVXdr88 .doneCritText0,#mermaid-svg-cqlwfsxe8yVXdr88 .doneCritText1,#mermaid-svg-cqlwfsxe8yVXdr88 .doneCritText2,#mermaid-svg-cqlwfsxe8yVXdr88 .doneCritText3{fill:#000 !important}#mermaid-svg-cqlwfsxe8yVXdr88 .activeCritText0,#mermaid-svg-cqlwfsxe8yVXdr88 .activeCritText1,#mermaid-svg-cqlwfsxe8yVXdr88 .activeCritText2,#mermaid-svg-cqlwfsxe8yVXdr88 .activeCritText3{fill:#000 !important}#mermaid-svg-cqlwfsxe8yVXdr88 .titleText{text-anchor:middle;font-size:18px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-cqlwfsxe8yVXdr88 g.classGroup text{fill:#9370db;stroke:none;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);font-size:10px}#mermaid-svg-cqlwfsxe8yVXdr88 g.classGroup text .title{font-weight:bolder}#mermaid-svg-cqlwfsxe8yVXdr88 g.clickable{cursor:pointer}#mermaid-svg-cqlwfsxe8yVXdr88 g.classGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-cqlwfsxe8yVXdr88 g.classGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-cqlwfsxe8yVXdr88 .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5}#mermaid-svg-cqlwfsxe8yVXdr88 .classLabel .label{fill:#9370db;font-size:10px}#mermaid-svg-cqlwfsxe8yVXdr88 .relation{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-cqlwfsxe8yVXdr88 .dashed-line{stroke-dasharray:3}#mermaid-svg-cqlwfsxe8yVXdr88 #compositionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-cqlwfsxe8yVXdr88 #compositionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-cqlwfsxe8yVXdr88 #aggregationStart{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-cqlwfsxe8yVXdr88 #aggregationEnd{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-cqlwfsxe8yVXdr88 #dependencyStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-cqlwfsxe8yVXdr88 #dependencyEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-cqlwfsxe8yVXdr88 #extensionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-cqlwfsxe8yVXdr88 #extensionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-cqlwfsxe8yVXdr88 .commit-id,#mermaid-svg-cqlwfsxe8yVXdr88 .commit-msg,#mermaid-svg-cqlwfsxe8yVXdr88 .branch-label{fill:lightgrey;color:lightgrey;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-cqlwfsxe8yVXdr88 .pieTitleText{text-anchor:middle;font-size:25px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-cqlwfsxe8yVXdr88 .slice{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-cqlwfsxe8yVXdr88 g.stateGroup text{fill:#9370db;stroke:none;font-size:10px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-cqlwfsxe8yVXdr88 g.stateGroup text{fill:#9370db;fill:#333;stroke:none;font-size:10px}#mermaid-svg-cqlwfsxe8yVXdr88 g.statediagram-cluster .cluster-label text{fill:#333}#mermaid-svg-cqlwfsxe8yVXdr88 g.stateGroup .state-title{font-weight:bolder;fill:#000}#mermaid-svg-cqlwfsxe8yVXdr88 g.stateGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-cqlwfsxe8yVXdr88 g.stateGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-cqlwfsxe8yVXdr88 .transition{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-cqlwfsxe8yVXdr88 .stateGroup .composit{fill:white;border-bottom:1px}#mermaid-svg-cqlwfsxe8yVXdr88 .stateGroup .alt-composit{fill:#e0e0e0;border-bottom:1px}#mermaid-svg-cqlwfsxe8yVXdr88 .state-note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-cqlwfsxe8yVXdr88 .state-note text{fill:black;stroke:none;font-size:10px}#mermaid-svg-cqlwfsxe8yVXdr88 .stateLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.7}#mermaid-svg-cqlwfsxe8yVXdr88 .edgeLabel text{fill:#333}#mermaid-svg-cqlwfsxe8yVXdr88 .stateLabel text{fill:#000;font-size:10px;font-weight:bold;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-cqlwfsxe8yVXdr88 .node circle.state-start{fill:black;stroke:black}#mermaid-svg-cqlwfsxe8yVXdr88 .node circle.state-end{fill:black;stroke:white;stroke-width:1.5}#mermaid-svg-cqlwfsxe8yVXdr88 #statediagram-barbEnd{fill:#9370db}#mermaid-svg-cqlwfsxe8yVXdr88 .statediagram-cluster rect{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-cqlwfsxe8yVXdr88 .statediagram-cluster rect.outer{rx:5px;ry:5px}#mermaid-svg-cqlwfsxe8yVXdr88 .statediagram-state .divider{stroke:#9370db}#mermaid-svg-cqlwfsxe8yVXdr88 .statediagram-state .title-state{rx:5px;ry:5px}#mermaid-svg-cqlwfsxe8yVXdr88 .statediagram-cluster.statediagram-cluster .inner{fill:white}#mermaid-svg-cqlwfsxe8yVXdr88 .statediagram-cluster.statediagram-cluster-alt .inner{fill:#e0e0e0}#mermaid-svg-cqlwfsxe8yVXdr88 .statediagram-cluster .inner{rx:0;ry:0}#mermaid-svg-cqlwfsxe8yVXdr88 .statediagram-state rect.basic{rx:5px;ry:5px}#mermaid-svg-cqlwfsxe8yVXdr88 .statediagram-state rect.divider{stroke-dasharray:10,10;fill:#efefef}#mermaid-svg-cqlwfsxe8yVXdr88 .note-edge{stroke-dasharray:5}#mermaid-svg-cqlwfsxe8yVXdr88 .statediagram-note rect{fill:#fff5ad;stroke:#aa3;stroke-width:1px;rx:0;ry:0}:root{--mermaid-font-family: '"trebuchet ms", verdana, arial';--mermaid-font-family: "Comic Sans MS", "Comic Sans", cursive}#mermaid-svg-cqlwfsxe8yVXdr88 .error-icon{fill:#522}#mermaid-svg-cqlwfsxe8yVXdr88 .error-text{fill:#522;stroke:#522}#mermaid-svg-cqlwfsxe8yVXdr88 .edge-thickness-normal{stroke-width:2px}#mermaid-svg-cqlwfsxe8yVXdr88 .edge-thickness-thick{stroke-width:3.5px}#mermaid-svg-cqlwfsxe8yVXdr88 .edge-pattern-solid{stroke-dasharray:0}#mermaid-svg-cqlwfsxe8yVXdr88 .edge-pattern-dashed{stroke-dasharray:3}#mermaid-svg-cqlwfsxe8yVXdr88 .edge-pattern-dotted{stroke-dasharray:2}#mermaid-svg-cqlwfsxe8yVXdr88 .marker{fill:#333}#mermaid-svg-cqlwfsxe8yVXdr88 .marker.cross{stroke:#333}:root { --mermaid-font-family: "trebuchet ms", verdana, arial;}#mermaid-svg-cqlwfsxe8yVXdr88 {color: rgba(0, 0, 0, 0.75);font: ;}
transition-durationtime規定完成過渡效果需要花費的時間/以秒或毫秒計/默認值是0,意味著不會有效果
#mermaid-svg-aKAGwkLsGmG72WcK .label{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);fill:#333;color:#333}#mermaid-svg-aKAGwkLsGmG72WcK .label text{fill:#333}#mermaid-svg-aKAGwkLsGmG72WcK .node rect,#mermaid-svg-aKAGwkLsGmG72WcK .node circle,#mermaid-svg-aKAGwkLsGmG72WcK .node ellipse,#mermaid-svg-aKAGwkLsGmG72WcK .node polygon,#mermaid-svg-aKAGwkLsGmG72WcK .node path{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-aKAGwkLsGmG72WcK .node .label{text-align:center;fill:#333}#mermaid-svg-aKAGwkLsGmG72WcK .node.clickable{cursor:pointer}#mermaid-svg-aKAGwkLsGmG72WcK .arrowheadPath{fill:#333}#mermaid-svg-aKAGwkLsGmG72WcK .edgePath .path{stroke:#333;stroke-width:1.5px}#mermaid-svg-aKAGwkLsGmG72WcK .flowchart-link{stroke:#333;fill:none}#mermaid-svg-aKAGwkLsGmG72WcK .edgeLabel{background-color:#e8e8e8;text-align:center}#mermaid-svg-aKAGwkLsGmG72WcK .edgeLabel rect{opacity:0.9}#mermaid-svg-aKAGwkLsGmG72WcK .edgeLabel span{color:#333}#mermaid-svg-aKAGwkLsGmG72WcK .cluster rect{fill:#ffffde;stroke:#aa3;stroke-width:1px}#mermaid-svg-aKAGwkLsGmG72WcK .cluster text{fill:#333}#mermaid-svg-aKAGwkLsGmG72WcK div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);font-size:12px;background:#ffffde;border:1px solid #aa3;border-radius:2px;pointer-events:none;z-index:100}#mermaid-svg-aKAGwkLsGmG72WcK .actor{stroke:#ccf;fill:#ECECFF}#mermaid-svg-aKAGwkLsGmG72WcK text.actor>tspan{fill:#000;stroke:none}#mermaid-svg-aKAGwkLsGmG72WcK .actor-line{stroke:grey}#mermaid-svg-aKAGwkLsGmG72WcK .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333}#mermaid-svg-aKAGwkLsGmG72WcK .messageLine1{stroke-width:1.5;stroke-dasharray:2, 2;stroke:#333}#mermaid-svg-aKAGwkLsGmG72WcK #arrowhead path{fill:#333;stroke:#333}#mermaid-svg-aKAGwkLsGmG72WcK .sequenceNumber{fill:#fff}#mermaid-svg-aKAGwkLsGmG72WcK #sequencenumber{fill:#333}#mermaid-svg-aKAGwkLsGmG72WcK #crosshead path{fill:#333;stroke:#333}#mermaid-svg-aKAGwkLsGmG72WcK .messageText{fill:#333;stroke:#333}#mermaid-svg-aKAGwkLsGmG72WcK .labelBox{stroke:#ccf;fill:#ECECFF}#mermaid-svg-aKAGwkLsGmG72WcK .labelText,#mermaid-svg-aKAGwkLsGmG72WcK .labelText>tspan{fill:#000;stroke:none}#mermaid-svg-aKAGwkLsGmG72WcK .loopText,#mermaid-svg-aKAGwkLsGmG72WcK .loopText>tspan{fill:#000;stroke:none}#mermaid-svg-aKAGwkLsGmG72WcK .loopLine{stroke-width:2px;stroke-dasharray:2, 2;stroke:#ccf;fill:#ccf}#mermaid-svg-aKAGwkLsGmG72WcK .note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-aKAGwkLsGmG72WcK .noteText,#mermaid-svg-aKAGwkLsGmG72WcK .noteText>tspan{fill:#000;stroke:none}#mermaid-svg-aKAGwkLsGmG72WcK .activation0{fill:#f4f4f4;stroke:#666}#mermaid-svg-aKAGwkLsGmG72WcK .activation1{fill:#f4f4f4;stroke:#666}#mermaid-svg-aKAGwkLsGmG72WcK .activation2{fill:#f4f4f4;stroke:#666}#mermaid-svg-aKAGwkLsGmG72WcK .mermaid-main-font{font-family:"trebuchet ms", verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-aKAGwkLsGmG72WcK .section{stroke:none;opacity:0.2}#mermaid-svg-aKAGwkLsGmG72WcK .section0{fill:rgba(102,102,255,0.49)}#mermaid-svg-aKAGwkLsGmG72WcK .section2{fill:#fff400}#mermaid-svg-aKAGwkLsGmG72WcK .section1,#mermaid-svg-aKAGwkLsGmG72WcK .section3{fill:#fff;opacity:0.2}#mermaid-svg-aKAGwkLsGmG72WcK .sectionTitle0{fill:#333}#mermaid-svg-aKAGwkLsGmG72WcK .sectionTitle1{fill:#333}#mermaid-svg-aKAGwkLsGmG72WcK .sectionTitle2{fill:#333}#mermaid-svg-aKAGwkLsGmG72WcK .sectionTitle3{fill:#333}#mermaid-svg-aKAGwkLsGmG72WcK .sectionTitle{text-anchor:start;font-size:11px;text-height:14px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-aKAGwkLsGmG72WcK .grid .tick{stroke:#d3d3d3;opacity:0.8;shape-rendering:crispEdges}#mermaid-svg-aKAGwkLsGmG72WcK .grid .tick text{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-aKAGwkLsGmG72WcK .grid path{stroke-width:0}#mermaid-svg-aKAGwkLsGmG72WcK .today{fill:none;stroke:red;stroke-width:2px}#mermaid-svg-aKAGwkLsGmG72WcK .task{stroke-width:2}#mermaid-svg-aKAGwkLsGmG72WcK .taskText{text-anchor:middle;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-aKAGwkLsGmG72WcK .taskText:not([font-size]){font-size:11px}#mermaid-svg-aKAGwkLsGmG72WcK .taskTextOutsideRight{fill:#000;text-anchor:start;font-size:11px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-aKAGwkLsGmG72WcK .taskTextOutsideLeft{fill:#000;text-anchor:end;font-size:11px}#mermaid-svg-aKAGwkLsGmG72WcK .task.clickable{cursor:pointer}#mermaid-svg-aKAGwkLsGmG72WcK .taskText.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-aKAGwkLsGmG72WcK .taskTextOutsideLeft.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-aKAGwkLsGmG72WcK .taskTextOutsideRight.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-aKAGwkLsGmG72WcK .taskText0,#mermaid-svg-aKAGwkLsGmG72WcK .taskText1,#mermaid-svg-aKAGwkLsGmG72WcK .taskText2,#mermaid-svg-aKAGwkLsGmG72WcK .taskText3{fill:#fff}#mermaid-svg-aKAGwkLsGmG72WcK .task0,#mermaid-svg-aKAGwkLsGmG72WcK .task1,#mermaid-svg-aKAGwkLsGmG72WcK .task2,#mermaid-svg-aKAGwkLsGmG72WcK .task3{fill:#8a90dd;stroke:#534fbc}#mermaid-svg-aKAGwkLsGmG72WcK .taskTextOutside0,#mermaid-svg-aKAGwkLsGmG72WcK .taskTextOutside2{fill:#000}#mermaid-svg-aKAGwkLsGmG72WcK .taskTextOutside1,#mermaid-svg-aKAGwkLsGmG72WcK .taskTextOutside3{fill:#000}#mermaid-svg-aKAGwkLsGmG72WcK .active0,#mermaid-svg-aKAGwkLsGmG72WcK .active1,#mermaid-svg-aKAGwkLsGmG72WcK .active2,#mermaid-svg-aKAGwkLsGmG72WcK .active3{fill:#bfc7ff;stroke:#534fbc}#mermaid-svg-aKAGwkLsGmG72WcK .activeText0,#mermaid-svg-aKAGwkLsGmG72WcK .activeText1,#mermaid-svg-aKAGwkLsGmG72WcK .activeText2,#mermaid-svg-aKAGwkLsGmG72WcK .activeText3{fill:#000 !important}#mermaid-svg-aKAGwkLsGmG72WcK .done0,#mermaid-svg-aKAGwkLsGmG72WcK .done1,#mermaid-svg-aKAGwkLsGmG72WcK .done2,#mermaid-svg-aKAGwkLsGmG72WcK .done3{stroke:grey;fill:#d3d3d3;stroke-width:2}#mermaid-svg-aKAGwkLsGmG72WcK .doneText0,#mermaid-svg-aKAGwkLsGmG72WcK .doneText1,#mermaid-svg-aKAGwkLsGmG72WcK .doneText2,#mermaid-svg-aKAGwkLsGmG72WcK .doneText3{fill:#000 !important}#mermaid-svg-aKAGwkLsGmG72WcK .crit0,#mermaid-svg-aKAGwkLsGmG72WcK .crit1,#mermaid-svg-aKAGwkLsGmG72WcK .crit2,#mermaid-svg-aKAGwkLsGmG72WcK .crit3{stroke:#f88;fill:red;stroke-width:2}#mermaid-svg-aKAGwkLsGmG72WcK .activeCrit0,#mermaid-svg-aKAGwkLsGmG72WcK .activeCrit1,#mermaid-svg-aKAGwkLsGmG72WcK .activeCrit2,#mermaid-svg-aKAGwkLsGmG72WcK .activeCrit3{stroke:#f88;fill:#bfc7ff;stroke-width:2}#mermaid-svg-aKAGwkLsGmG72WcK .doneCrit0,#mermaid-svg-aKAGwkLsGmG72WcK .doneCrit1,#mermaid-svg-aKAGwkLsGmG72WcK .doneCrit2,#mermaid-svg-aKAGwkLsGmG72WcK .doneCrit3{stroke:#f88;fill:#d3d3d3;stroke-width:2;cursor:pointer;shape-rendering:crispEdges}#mermaid-svg-aKAGwkLsGmG72WcK .milestone{transform:rotate(45deg) scale(0.8, 0.8)}#mermaid-svg-aKAGwkLsGmG72WcK .milestoneText{font-style:italic}#mermaid-svg-aKAGwkLsGmG72WcK .doneCritText0,#mermaid-svg-aKAGwkLsGmG72WcK .doneCritText1,#mermaid-svg-aKAGwkLsGmG72WcK .doneCritText2,#mermaid-svg-aKAGwkLsGmG72WcK .doneCritText3{fill:#000 !important}#mermaid-svg-aKAGwkLsGmG72WcK .activeCritText0,#mermaid-svg-aKAGwkLsGmG72WcK .activeCritText1,#mermaid-svg-aKAGwkLsGmG72WcK .activeCritText2,#mermaid-svg-aKAGwkLsGmG72WcK .activeCritText3{fill:#000 !important}#mermaid-svg-aKAGwkLsGmG72WcK .titleText{text-anchor:middle;font-size:18px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-aKAGwkLsGmG72WcK g.classGroup text{fill:#9370db;stroke:none;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);font-size:10px}#mermaid-svg-aKAGwkLsGmG72WcK g.classGroup text .title{font-weight:bolder}#mermaid-svg-aKAGwkLsGmG72WcK g.clickable{cursor:pointer}#mermaid-svg-aKAGwkLsGmG72WcK g.classGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-aKAGwkLsGmG72WcK g.classGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-aKAGwkLsGmG72WcK .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5}#mermaid-svg-aKAGwkLsGmG72WcK .classLabel .label{fill:#9370db;font-size:10px}#mermaid-svg-aKAGwkLsGmG72WcK .relation{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-aKAGwkLsGmG72WcK .dashed-line{stroke-dasharray:3}#mermaid-svg-aKAGwkLsGmG72WcK #compositionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-aKAGwkLsGmG72WcK #compositionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-aKAGwkLsGmG72WcK #aggregationStart{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-aKAGwkLsGmG72WcK #aggregationEnd{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-aKAGwkLsGmG72WcK #dependencyStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-aKAGwkLsGmG72WcK #dependencyEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-aKAGwkLsGmG72WcK #extensionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-aKAGwkLsGmG72WcK #extensionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-aKAGwkLsGmG72WcK .commit-id,#mermaid-svg-aKAGwkLsGmG72WcK .commit-msg,#mermaid-svg-aKAGwkLsGmG72WcK .branch-label{fill:lightgrey;color:lightgrey;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-aKAGwkLsGmG72WcK .pieTitleText{text-anchor:middle;font-size:25px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-aKAGwkLsGmG72WcK .slice{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-aKAGwkLsGmG72WcK g.stateGroup text{fill:#9370db;stroke:none;font-size:10px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-aKAGwkLsGmG72WcK g.stateGroup text{fill:#9370db;fill:#333;stroke:none;font-size:10px}#mermaid-svg-aKAGwkLsGmG72WcK g.statediagram-cluster .cluster-label text{fill:#333}#mermaid-svg-aKAGwkLsGmG72WcK g.stateGroup .state-title{font-weight:bolder;fill:#000}#mermaid-svg-aKAGwkLsGmG72WcK g.stateGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-aKAGwkLsGmG72WcK g.stateGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-aKAGwkLsGmG72WcK .transition{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-aKAGwkLsGmG72WcK .stateGroup .composit{fill:white;border-bottom:1px}#mermaid-svg-aKAGwkLsGmG72WcK .stateGroup .alt-composit{fill:#e0e0e0;border-bottom:1px}#mermaid-svg-aKAGwkLsGmG72WcK .state-note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-aKAGwkLsGmG72WcK .state-note text{fill:black;stroke:none;font-size:10px}#mermaid-svg-aKAGwkLsGmG72WcK .stateLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.7}#mermaid-svg-aKAGwkLsGmG72WcK .edgeLabel text{fill:#333}#mermaid-svg-aKAGwkLsGmG72WcK .stateLabel text{fill:#000;font-size:10px;font-weight:bold;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-aKAGwkLsGmG72WcK .node circle.state-start{fill:black;stroke:black}#mermaid-svg-aKAGwkLsGmG72WcK .node circle.state-end{fill:black;stroke:white;stroke-width:1.5}#mermaid-svg-aKAGwkLsGmG72WcK #statediagram-barbEnd{fill:#9370db}#mermaid-svg-aKAGwkLsGmG72WcK .statediagram-cluster rect{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-aKAGwkLsGmG72WcK .statediagram-cluster rect.outer{rx:5px;ry:5px}#mermaid-svg-aKAGwkLsGmG72WcK .statediagram-state .divider{stroke:#9370db}#mermaid-svg-aKAGwkLsGmG72WcK .statediagram-state .title-state{rx:5px;ry:5px}#mermaid-svg-aKAGwkLsGmG72WcK .statediagram-cluster.statediagram-cluster .inner{fill:white}#mermaid-svg-aKAGwkLsGmG72WcK .statediagram-cluster.statediagram-cluster-alt .inner{fill:#e0e0e0}#mermaid-svg-aKAGwkLsGmG72WcK .statediagram-cluster .inner{rx:0;ry:0}#mermaid-svg-aKAGwkLsGmG72WcK .statediagram-state rect.basic{rx:5px;ry:5px}#mermaid-svg-aKAGwkLsGmG72WcK .statediagram-state rect.divider{stroke-dasharray:10,10;fill:#efefef}#mermaid-svg-aKAGwkLsGmG72WcK .note-edge{stroke-dasharray:5}#mermaid-svg-aKAGwkLsGmG72WcK .statediagram-note rect{fill:#fff5ad;stroke:#aa3;stroke-width:1px;rx:0;ry:0}:root{--mermaid-font-family: '"trebuchet ms", verdana, arial';--mermaid-font-family: "Comic Sans MS", "Comic Sans", cursive}#mermaid-svg-aKAGwkLsGmG72WcK .error-icon{fill:#522}#mermaid-svg-aKAGwkLsGmG72WcK .error-text{fill:#522;stroke:#522}#mermaid-svg-aKAGwkLsGmG72WcK .edge-thickness-normal{stroke-width:2px}#mermaid-svg-aKAGwkLsGmG72WcK .edge-thickness-thick{stroke-width:3.5px}#mermaid-svg-aKAGwkLsGmG72WcK .edge-pattern-solid{stroke-dasharray:0}#mermaid-svg-aKAGwkLsGmG72WcK .edge-pattern-dashed{stroke-dasharray:3}#mermaid-svg-aKAGwkLsGmG72WcK .edge-pattern-dotted{stroke-dasharray:2}#mermaid-svg-aKAGwkLsGmG72WcK .marker{fill:#333}#mermaid-svg-aKAGwkLsGmG72WcK .marker.cross{stroke:#333}:root { --mermaid-font-family: "trebuchet ms", verdana, arial;}#mermaid-svg-aKAGwkLsGmG72WcK {color: rgba(0, 0, 0, 0.75);font: ;}
transition-timing-functionlineareaseease-inease-outease-in-outcubic-bezier/n,n,n,n/規定以相同速度開始至結束的過渡效果/等于 cubic-bezier/0,0,1,1//規定慢速開始,然后變快,然后慢速結束的過渡效果/cubic-bezier/0.25,0.1,0.25,1//規定以慢速開始的過渡效果/等于 cubic-bezier/0.42,0,1,1//規定以慢速結束的過渡效果/等于 cubic-bezier/0,0,0.58,1//規定以慢速開始和結束的過渡效果/等于 cubic-bezier/0.42,0,0.58,1//在 cubic-bezier 函數中定義自己的值.可能的值是 0 至 1 之間的數值
#mermaid-svg-lmylvxV20XEaMqHT .label{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);fill:#333;color:#333}#mermaid-svg-lmylvxV20XEaMqHT .label text{fill:#333}#mermaid-svg-lmylvxV20XEaMqHT .node rect,#mermaid-svg-lmylvxV20XEaMqHT .node circle,#mermaid-svg-lmylvxV20XEaMqHT .node ellipse,#mermaid-svg-lmylvxV20XEaMqHT .node polygon,#mermaid-svg-lmylvxV20XEaMqHT .node path{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-lmylvxV20XEaMqHT .node .label{text-align:center;fill:#333}#mermaid-svg-lmylvxV20XEaMqHT .node.clickable{cursor:pointer}#mermaid-svg-lmylvxV20XEaMqHT .arrowheadPath{fill:#333}#mermaid-svg-lmylvxV20XEaMqHT .edgePath .path{stroke:#333;stroke-width:1.5px}#mermaid-svg-lmylvxV20XEaMqHT .flowchart-link{stroke:#333;fill:none}#mermaid-svg-lmylvxV20XEaMqHT .edgeLabel{background-color:#e8e8e8;text-align:center}#mermaid-svg-lmylvxV20XEaMqHT .edgeLabel rect{opacity:0.9}#mermaid-svg-lmylvxV20XEaMqHT .edgeLabel span{color:#333}#mermaid-svg-lmylvxV20XEaMqHT .cluster rect{fill:#ffffde;stroke:#aa3;stroke-width:1px}#mermaid-svg-lmylvxV20XEaMqHT .cluster text{fill:#333}#mermaid-svg-lmylvxV20XEaMqHT div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);font-size:12px;background:#ffffde;border:1px solid #aa3;border-radius:2px;pointer-events:none;z-index:100}#mermaid-svg-lmylvxV20XEaMqHT .actor{stroke:#ccf;fill:#ECECFF}#mermaid-svg-lmylvxV20XEaMqHT text.actor>tspan{fill:#000;stroke:none}#mermaid-svg-lmylvxV20XEaMqHT .actor-line{stroke:grey}#mermaid-svg-lmylvxV20XEaMqHT .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333}#mermaid-svg-lmylvxV20XEaMqHT .messageLine1{stroke-width:1.5;stroke-dasharray:2, 2;stroke:#333}#mermaid-svg-lmylvxV20XEaMqHT #arrowhead path{fill:#333;stroke:#333}#mermaid-svg-lmylvxV20XEaMqHT .sequenceNumber{fill:#fff}#mermaid-svg-lmylvxV20XEaMqHT #sequencenumber{fill:#333}#mermaid-svg-lmylvxV20XEaMqHT #crosshead path{fill:#333;stroke:#333}#mermaid-svg-lmylvxV20XEaMqHT .messageText{fill:#333;stroke:#333}#mermaid-svg-lmylvxV20XEaMqHT .labelBox{stroke:#ccf;fill:#ECECFF}#mermaid-svg-lmylvxV20XEaMqHT .labelText,#mermaid-svg-lmylvxV20XEaMqHT .labelText>tspan{fill:#000;stroke:none}#mermaid-svg-lmylvxV20XEaMqHT .loopText,#mermaid-svg-lmylvxV20XEaMqHT .loopText>tspan{fill:#000;stroke:none}#mermaid-svg-lmylvxV20XEaMqHT .loopLine{stroke-width:2px;stroke-dasharray:2, 2;stroke:#ccf;fill:#ccf}#mermaid-svg-lmylvxV20XEaMqHT .note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-lmylvxV20XEaMqHT .noteText,#mermaid-svg-lmylvxV20XEaMqHT .noteText>tspan{fill:#000;stroke:none}#mermaid-svg-lmylvxV20XEaMqHT .activation0{fill:#f4f4f4;stroke:#666}#mermaid-svg-lmylvxV20XEaMqHT .activation1{fill:#f4f4f4;stroke:#666}#mermaid-svg-lmylvxV20XEaMqHT .activation2{fill:#f4f4f4;stroke:#666}#mermaid-svg-lmylvxV20XEaMqHT .mermaid-main-font{font-family:"trebuchet ms", verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-lmylvxV20XEaMqHT .section{stroke:none;opacity:0.2}#mermaid-svg-lmylvxV20XEaMqHT .section0{fill:rgba(102,102,255,0.49)}#mermaid-svg-lmylvxV20XEaMqHT .section2{fill:#fff400}#mermaid-svg-lmylvxV20XEaMqHT .section1,#mermaid-svg-lmylvxV20XEaMqHT .section3{fill:#fff;opacity:0.2}#mermaid-svg-lmylvxV20XEaMqHT .sectionTitle0{fill:#333}#mermaid-svg-lmylvxV20XEaMqHT .sectionTitle1{fill:#333}#mermaid-svg-lmylvxV20XEaMqHT .sectionTitle2{fill:#333}#mermaid-svg-lmylvxV20XEaMqHT .sectionTitle3{fill:#333}#mermaid-svg-lmylvxV20XEaMqHT .sectionTitle{text-anchor:start;font-size:11px;text-height:14px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-lmylvxV20XEaMqHT .grid .tick{stroke:#d3d3d3;opacity:0.8;shape-rendering:crispEdges}#mermaid-svg-lmylvxV20XEaMqHT .grid .tick text{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-lmylvxV20XEaMqHT .grid path{stroke-width:0}#mermaid-svg-lmylvxV20XEaMqHT .today{fill:none;stroke:red;stroke-width:2px}#mermaid-svg-lmylvxV20XEaMqHT .task{stroke-width:2}#mermaid-svg-lmylvxV20XEaMqHT .taskText{text-anchor:middle;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-lmylvxV20XEaMqHT .taskText:not([font-size]){font-size:11px}#mermaid-svg-lmylvxV20XEaMqHT .taskTextOutsideRight{fill:#000;text-anchor:start;font-size:11px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-lmylvxV20XEaMqHT .taskTextOutsideLeft{fill:#000;text-anchor:end;font-size:11px}#mermaid-svg-lmylvxV20XEaMqHT .task.clickable{cursor:pointer}#mermaid-svg-lmylvxV20XEaMqHT .taskText.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-lmylvxV20XEaMqHT .taskTextOutsideLeft.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-lmylvxV20XEaMqHT .taskTextOutsideRight.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-lmylvxV20XEaMqHT .taskText0,#mermaid-svg-lmylvxV20XEaMqHT .taskText1,#mermaid-svg-lmylvxV20XEaMqHT .taskText2,#mermaid-svg-lmylvxV20XEaMqHT .taskText3{fill:#fff}#mermaid-svg-lmylvxV20XEaMqHT .task0,#mermaid-svg-lmylvxV20XEaMqHT .task1,#mermaid-svg-lmylvxV20XEaMqHT .task2,#mermaid-svg-lmylvxV20XEaMqHT .task3{fill:#8a90dd;stroke:#534fbc}#mermaid-svg-lmylvxV20XEaMqHT .taskTextOutside0,#mermaid-svg-lmylvxV20XEaMqHT .taskTextOutside2{fill:#000}#mermaid-svg-lmylvxV20XEaMqHT .taskTextOutside1,#mermaid-svg-lmylvxV20XEaMqHT .taskTextOutside3{fill:#000}#mermaid-svg-lmylvxV20XEaMqHT .active0,#mermaid-svg-lmylvxV20XEaMqHT .active1,#mermaid-svg-lmylvxV20XEaMqHT .active2,#mermaid-svg-lmylvxV20XEaMqHT .active3{fill:#bfc7ff;stroke:#534fbc}#mermaid-svg-lmylvxV20XEaMqHT .activeText0,#mermaid-svg-lmylvxV20XEaMqHT .activeText1,#mermaid-svg-lmylvxV20XEaMqHT .activeText2,#mermaid-svg-lmylvxV20XEaMqHT .activeText3{fill:#000 !important}#mermaid-svg-lmylvxV20XEaMqHT .done0,#mermaid-svg-lmylvxV20XEaMqHT .done1,#mermaid-svg-lmylvxV20XEaMqHT .done2,#mermaid-svg-lmylvxV20XEaMqHT .done3{stroke:grey;fill:#d3d3d3;stroke-width:2}#mermaid-svg-lmylvxV20XEaMqHT .doneText0,#mermaid-svg-lmylvxV20XEaMqHT .doneText1,#mermaid-svg-lmylvxV20XEaMqHT .doneText2,#mermaid-svg-lmylvxV20XEaMqHT .doneText3{fill:#000 !important}#mermaid-svg-lmylvxV20XEaMqHT .crit0,#mermaid-svg-lmylvxV20XEaMqHT .crit1,#mermaid-svg-lmylvxV20XEaMqHT .crit2,#mermaid-svg-lmylvxV20XEaMqHT .crit3{stroke:#f88;fill:red;stroke-width:2}#mermaid-svg-lmylvxV20XEaMqHT .activeCrit0,#mermaid-svg-lmylvxV20XEaMqHT .activeCrit1,#mermaid-svg-lmylvxV20XEaMqHT .activeCrit2,#mermaid-svg-lmylvxV20XEaMqHT .activeCrit3{stroke:#f88;fill:#bfc7ff;stroke-width:2}#mermaid-svg-lmylvxV20XEaMqHT .doneCrit0,#mermaid-svg-lmylvxV20XEaMqHT .doneCrit1,#mermaid-svg-lmylvxV20XEaMqHT .doneCrit2,#mermaid-svg-lmylvxV20XEaMqHT .doneCrit3{stroke:#f88;fill:#d3d3d3;stroke-width:2;cursor:pointer;shape-rendering:crispEdges}#mermaid-svg-lmylvxV20XEaMqHT .milestone{transform:rotate(45deg) scale(0.8, 0.8)}#mermaid-svg-lmylvxV20XEaMqHT .milestoneText{font-style:italic}#mermaid-svg-lmylvxV20XEaMqHT .doneCritText0,#mermaid-svg-lmylvxV20XEaMqHT .doneCritText1,#mermaid-svg-lmylvxV20XEaMqHT .doneCritText2,#mermaid-svg-lmylvxV20XEaMqHT .doneCritText3{fill:#000 !important}#mermaid-svg-lmylvxV20XEaMqHT .activeCritText0,#mermaid-svg-lmylvxV20XEaMqHT .activeCritText1,#mermaid-svg-lmylvxV20XEaMqHT .activeCritText2,#mermaid-svg-lmylvxV20XEaMqHT .activeCritText3{fill:#000 !important}#mermaid-svg-lmylvxV20XEaMqHT .titleText{text-anchor:middle;font-size:18px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-lmylvxV20XEaMqHT g.classGroup text{fill:#9370db;stroke:none;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);font-size:10px}#mermaid-svg-lmylvxV20XEaMqHT g.classGroup text .title{font-weight:bolder}#mermaid-svg-lmylvxV20XEaMqHT g.clickable{cursor:pointer}#mermaid-svg-lmylvxV20XEaMqHT g.classGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-lmylvxV20XEaMqHT g.classGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-lmylvxV20XEaMqHT .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5}#mermaid-svg-lmylvxV20XEaMqHT .classLabel .label{fill:#9370db;font-size:10px}#mermaid-svg-lmylvxV20XEaMqHT .relation{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-lmylvxV20XEaMqHT .dashed-line{stroke-dasharray:3}#mermaid-svg-lmylvxV20XEaMqHT #compositionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-lmylvxV20XEaMqHT #compositionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-lmylvxV20XEaMqHT #aggregationStart{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-lmylvxV20XEaMqHT #aggregationEnd{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-lmylvxV20XEaMqHT #dependencyStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-lmylvxV20XEaMqHT #dependencyEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-lmylvxV20XEaMqHT #extensionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-lmylvxV20XEaMqHT #extensionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-lmylvxV20XEaMqHT .commit-id,#mermaid-svg-lmylvxV20XEaMqHT .commit-msg,#mermaid-svg-lmylvxV20XEaMqHT .branch-label{fill:lightgrey;color:lightgrey;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-lmylvxV20XEaMqHT .pieTitleText{text-anchor:middle;font-size:25px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-lmylvxV20XEaMqHT .slice{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-lmylvxV20XEaMqHT g.stateGroup text{fill:#9370db;stroke:none;font-size:10px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-lmylvxV20XEaMqHT g.stateGroup text{fill:#9370db;fill:#333;stroke:none;font-size:10px}#mermaid-svg-lmylvxV20XEaMqHT g.statediagram-cluster .cluster-label text{fill:#333}#mermaid-svg-lmylvxV20XEaMqHT g.stateGroup .state-title{font-weight:bolder;fill:#000}#mermaid-svg-lmylvxV20XEaMqHT g.stateGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-lmylvxV20XEaMqHT g.stateGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-lmylvxV20XEaMqHT .transition{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-lmylvxV20XEaMqHT .stateGroup .composit{fill:white;border-bottom:1px}#mermaid-svg-lmylvxV20XEaMqHT .stateGroup .alt-composit{fill:#e0e0e0;border-bottom:1px}#mermaid-svg-lmylvxV20XEaMqHT .state-note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-lmylvxV20XEaMqHT .state-note text{fill:black;stroke:none;font-size:10px}#mermaid-svg-lmylvxV20XEaMqHT .stateLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.7}#mermaid-svg-lmylvxV20XEaMqHT .edgeLabel text{fill:#333}#mermaid-svg-lmylvxV20XEaMqHT .stateLabel text{fill:#000;font-size:10px;font-weight:bold;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-lmylvxV20XEaMqHT .node circle.state-start{fill:black;stroke:black}#mermaid-svg-lmylvxV20XEaMqHT .node circle.state-end{fill:black;stroke:white;stroke-width:1.5}#mermaid-svg-lmylvxV20XEaMqHT #statediagram-barbEnd{fill:#9370db}#mermaid-svg-lmylvxV20XEaMqHT .statediagram-cluster rect{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-lmylvxV20XEaMqHT .statediagram-cluster rect.outer{rx:5px;ry:5px}#mermaid-svg-lmylvxV20XEaMqHT .statediagram-state .divider{stroke:#9370db}#mermaid-svg-lmylvxV20XEaMqHT .statediagram-state .title-state{rx:5px;ry:5px}#mermaid-svg-lmylvxV20XEaMqHT .statediagram-cluster.statediagram-cluster .inner{fill:white}#mermaid-svg-lmylvxV20XEaMqHT .statediagram-cluster.statediagram-cluster-alt .inner{fill:#e0e0e0}#mermaid-svg-lmylvxV20XEaMqHT .statediagram-cluster .inner{rx:0;ry:0}#mermaid-svg-lmylvxV20XEaMqHT .statediagram-state rect.basic{rx:5px;ry:5px}#mermaid-svg-lmylvxV20XEaMqHT .statediagram-state rect.divider{stroke-dasharray:10,10;fill:#efefef}#mermaid-svg-lmylvxV20XEaMqHT .note-edge{stroke-dasharray:5}#mermaid-svg-lmylvxV20XEaMqHT .statediagram-note rect{fill:#fff5ad;stroke:#aa3;stroke-width:1px;rx:0;ry:0}:root{--mermaid-font-family: '"trebuchet ms", verdana, arial';--mermaid-font-family: "Comic Sans MS", "Comic Sans", cursive}#mermaid-svg-lmylvxV20XEaMqHT .error-icon{fill:#522}#mermaid-svg-lmylvxV20XEaMqHT .error-text{fill:#522;stroke:#522}#mermaid-svg-lmylvxV20XEaMqHT .edge-thickness-normal{stroke-width:2px}#mermaid-svg-lmylvxV20XEaMqHT .edge-thickness-thick{stroke-width:3.5px}#mermaid-svg-lmylvxV20XEaMqHT .edge-pattern-solid{stroke-dasharray:0}#mermaid-svg-lmylvxV20XEaMqHT .edge-pattern-dashed{stroke-dasharray:3}#mermaid-svg-lmylvxV20XEaMqHT .edge-pattern-dotted{stroke-dasharray:2}#mermaid-svg-lmylvxV20XEaMqHT .marker{fill:#333}#mermaid-svg-lmylvxV20XEaMqHT .marker.cross{stroke:#333}:root { --mermaid-font-family: "trebuchet ms", verdana, arial;}#mermaid-svg-lmylvxV20XEaMqHT {color: rgba(0, 0, 0, 0.75);font: ;}
transition-delaytime指定秒或毫秒數之前要等待切換效果開始
- box-sizing 屬性——允許你以某種方式定義某些元素，以適應指定區域;
語法
box-sizing: content-box|border-box|inherit:
值說明
| content-box | 這是 CSS2.1 指定的寬度和高度的行為。指定元素的寬度和高度（最小/最大屬性）適用于box的寬度和高度。元素的填充和邊框布局和繪制指定寬度和高度除外 |
| border-box | 指定寬度和高度（最小/最大屬性）確定元素邊框。也就是說，對元素指定寬度和高度包括了 padding 和 border 。通過從已設定的寬度和高度分別減去邊框和內邊距才能得到內容的寬度和高度。 |
| inherit | 指定 box-sizing 屬性的值，應該從父元素繼承 |
- onmousemove 屬性——在鼠標指針移動到元素時觸發;
- cursor屬性——定義了鼠標指針放在一個元素邊界范圍內時所用的光標形狀;
- overflow屬性——指定如果內容溢出一個元素的框，會發生什么;
- cubic-bezier() 函數——定義了一個貝塞爾曲線(Cubic Bezier)
- cubic-bezier() 可用于 animation-timing-function 和 transition-timing-function 屬性;
cubic-bezier(x1,y1,x2,y2)
值描述
| x1,y1,x2,y2 | 必需。數字值，x1 和 x2 需要是 0 到 1 的數字。 |
3.一點符號
PS：部分素材源自慕課(imooc)課程：JavaScript入門篇以及菜鳥教程。
二、制作步驟
1.建立框架
觀察原網站特點，劃分好區域，建立基本的分區框架
代碼如下：
<!DOCTYPE HTML>
<html><head><link href="index02.css" rel="stylesheet" type="text/css" /><script type="text/javascript"></script></head><body><div class="head1"></div><div class="box1"></div><div class="box2"></div><div class="box3"></div><div class="box4"></div><div class="box5"></div><div class="box6"></div></body>
</html>
2.豐富內容
向框架中加入基本的元素
代碼如下：
<!DOCTYPE HTML>
<html><head><title>新動態官網
</title><link href="index02.css" rel="stylesheet" type="text/css" /><script type="text/javascript"></script></head><body><div class="head1"><div class="logo" ><img class="logoo" src="圖片/logo_nav.png" style="margin-top: 5px;"></div><div class="text1"><span id=text2>首頁
</span> 產品介紹
公司服務
解決方案
公司新聞
關于我們
加入我們
</div></div><div class="box1" style="top: 0px;"><img src="圖片/20180905110437.jpg" style="width: 100%; left: 0px;"></div><div class="box2"><div id="lunbo2"><div id="play2"><ul id="ul2" style="width: 2376.5px; left: 0px;"><li style="width: 400px;"><img src="圖片/timg2018.jpg" ><div class="mask"><div class="mask_content"><div class="imgDiv"><div style="background-image: url(圖片/arrow.png);background-size: 50px ; background-repeat: no-repeat;"></div></div><div class="lineDiv"><div></div></div><div class="titleDiv"><h2>FaaS超融合即服務
</h2></div><div class="jieshaoDiv"><p>用于企業級IT架構新機型的FaaS超融合閃存系統，是和Power系列完美搭配的加速引擎，能夠充分發揮小型機的整體優勢，促進數據整合和業務集成，是企業創新業務的當然之選。
</p></div><div class="buttonDiv"><button>查看詳情
</button></div></div></div></li><li style="width: 400px;"><img src="圖片/20180816093802.jpg" ><div class="mask"><div class="mask_content"><div class="imgDiv"><div style="background-image: url(圖片/print.png);background-size: 50px ; background-repeat: no-repeat;"></div></div><div class="lineDiv"><div></div></div><div class="titleDiv"><h2>NPFS超融合系統軟件
</h2></div><div class="jieshaoDiv"><p>自主研發的跨節點集群管理軟件，可通過基于萬兆網或者IB網絡將多個節點的存儲進行共享和鏡像，其中一個節點的完全故障不會導致集群數據丟失。
</p></div><div class="buttonDiv"><button>查看詳情
</button></div></div></div></li><li style="width: 400px;"><img src="圖片/20180815163331.jpg" ><div class="mask"><div class="mask_content"><div class="imgDiv"><div style="background-image: url(圖片/cloud.png); background-size: 50px ;background-repeat: no-repeat;"></div></div><div class="lineDiv"><div></div></div><div class="titleDiv"><h2>FUSION POWER超融合一體機
</h2></div><div class="jieshaoDiv"><p>全球首款基于POWER平臺的超融合一體機服務器，用于滿足高頻高并發的數據讀寫性能需求，包括大數據實時分析、多數據庫的整合、大并發的用戶訪問、延遲敏感的交易系統等多種應用場景。
</p></div><div class="buttonDiv"><button>查看詳情
</button></div></div></div></li></ul><div id="left"><img src="圖片/left.png"></div><div id="right"><img src="圖片/right.png"></div></div></div></div><div class="box3"><div id="head2"><h3>為什么選擇我們
</h3><ul><li class="text2" id="li1" >數據中心
</li><li class="text2" id="li2" >云計算
</li><li class="text2" id="li3" > 大數據
</li><li class="text2" id="li4" >人工智能
</li><div id='blue_Line'></div></ul></div><div class="SC2" id="s001"><div class="left1"><img src="圖片/youshi1.png" ></div><div class="right1"><span>基于業務驅動的超融合架構，為客戶構建高性能、高擴展性、高可靠性和高安全性的數據中心，持續為客戶創造價值。
</span><span>規劃——我們的五年增長模型基于您的策略需求。
<br>設計——確保您的數據中心滿足您獨特的業務需求，并為業務發展提供平臺。
<br>構建——在幾乎各個階段獲取全方位的解決方案，無論多復雜的作業都能輕松應對。
<br></span></div></div><div class="SC2" id="s002"><div class="left1"><img src="圖片/youshi4.png" ></div><div class="right1"><span>具有基于 OpenStack 的云管理和開源自動化功能，不僅可以使客戶加快面向云的 IT 基礎架構轉變過程，同時還能在過渡期間實現巨大的靈活性。
</span><span>開放技術——基于開放技術，確保互操作性和靈活性。
<br>混合集成——利用集成的混合云，釋放現有數據潛力。
<br>易于訪問的數據和分析——利用功能強大的高級分析計算功能，獲得深入洞察。
</span></div></div><div class="SC2" id="s003"><div class="left1"><img src="圖片/youshi3.png" ></div><div class="right1"><span>在數據集市以及實時的分析展現層面使用超融合技術，彌補了Hadoop的不足，并在分布式文件系統架構上與Hadoop實現了完美的契合。
</span><span>數據科學——從大量結構化和非結構化數據中發現業務真相。
<br>高級分析——從企業內外各種來源、所有類型的數據中發掘商機。
<br>Hadoop與Spark——通過整合 Hadoop和Spark分析平臺，大大降低風險，保護您的投資。
<br>數據集成與治理——探索、豐富、集成并管理數據的生命周期。
</span></div></div><div class="SC2" id="s004"><div class="left1"><img src="圖片/145e-fyqefvx3183385.jpg" ></div><div class="right1"><span>基于內存運算，搭載解決方案NA內存數據庫軟件，支持平滑擴展，實現ERP、數據倉庫等關鍵業務應用加速。
</span><span>人工智能從誕生以來，理論和技術日益成熟，應用領域也不斷擴大，可以設想，未來人工智能帶來的科技產品，將會是人類智慧的“容器”。人工智能可以對人的意識、思維的信息過程的模擬。人工智能不是人的智能，但能像人那樣思考、也可能超過人的智能。
</span></div></div></div><div class="box4"><p>典型客戶和合作伙伴
</p><ul><li><img src="圖片/pic1.jpg" style="width: 35%; margin-top: 30px;margin-left: 40px;"></li><li><img src="圖片/pic2.png" style="width: 35%; margin-top: 28px;margin-left: 10px;"></li><li><img src="圖片/pic3.png" style="margin-top: 30px;width: 60%;margin-left: -40px;"></li><li><img src="圖片/pic4.jpg" style="margin-top: 50px;width: 60%;margin-left: -30px;"></li><li><img src="圖片/pic7.jpg" style="width: 100%;margin-top: 10px;margin-left: -30px;"></li><li><img src="圖片/pic6.png" style="margin-top: 40px;"></li><li><img src="圖片/pic5.jpg" style="margin-top: 32px;width: 35%;margin-left: 10px;"></li><li><img src="圖片/pic8.jpg" style="margin-top: 50px;margin-left: -28px;"></li><li><img src="圖片/pic9.png" style="margin-top: 25px;margin-left: -10px;"></li><li><img src="圖片/pic10.png" style="margin-top: 50px;width: 100%;margin-left: -30px;"></li><div style="clear: both;height:100px;"></div></ul></div><div class="box5"><p class="title01">客戶案例
</p><ul class="list01"><li><div class="new-img"><img src="圖片/zjyd.jpg"></div><h2 class="new-title">運營商 —— 替代高端存儲
</h2><p class="new-content">通過測試對比POWER570+IBM DS8300高端存儲，采用ORACLE ORION進行文件系統壓力測試。使用POWER超融合 技術后，IOPS性能提升了96倍 ，帶寬提升19倍 ， 延遲降低了47倍。
</p></li><li><div class="new-img"><img src="圖片/zjnx.jpg"></div><h2 class="new-title">省農信 —— 批處理業務
</h2><p class="new-content">通過在客戶原有IBM P740小型機上安裝FaaS，實現超融合。在不改變應用系統情況下，將系統批處理時間縮短至56分鐘。系統性能比使用傳統存儲提升了4倍以上，I/O使用率低于40%。如果進一步提升CPU能力，可以將全年經營分析報表系統批處理在1小時內完成。
</p></li><li><div class="new-img"><img src="圖片/bank.jpg"></div><h2 class="new-title">城商行 —— 高速備份
</h2><p class="new-content">用POWER超融合技術提升客戶數據庫備份能力。通過在客戶小型機IBM POWER 740上安裝FaaS，實現POWER超融后，進行數據庫備份測試。備份用時僅6分鐘，較原 SVC+V7000存儲備份縮短了逾 20倍 。
</p></li><li><div class="new-img"><img src="圖片/wl.jpg"></div><h2 class="new-title">某國際物流超融合一體機
</h2><p class="new-content">某國際物流生產中心使用2節點FusionPower超融合一體機，每節點采用Power740+處理器16C，FaaS配置6片PowerFlash。使用NPFS配置共享節點，建立HACMP雙機熱備，2節點間使用萬兆以太網互聯。
</p></li><div style="clear:both;"></div></ul></div><div class="box6"><div class="footer"><p id="lastE">南京新動態信息科技有限公司
?版權所有
</p></div></div></body>
</html>
3.修改樣式(CSS)
外部建立一個css文件
代碼如下：
* {padding: 0
;margin: 0
;
}
ul,li,img {list-style: none
;
}
img {border: 0
;padding: 0
;margin: 0
;
}
.head1{background: rgba(29, 30, 30, .7
);position:fixed
;width: 100%
;height:90px
;top:0
;margin: 0 auto
;display: block
;z-index: 1
;
}
.logo{display: inline
;width: 90%
;height: 100%
;position: relative
;left:180px
;top:20px
;
}
.logoo{height: 40px
;width: 180px
;
}
.text1{line-height: 50px
;font-size: 16px
;color: #fff
;z-index: 100
;display: inline
;position: relative
;left:500px
;top:8px
;
}
#text2{color: royalblue
;font-size: 20px
;font-weight: bold
;display: inline
;
}
.box6{height: 80px
;width: 100%
;background: #1d1e1e
;
}
.footer{height: 80px
;
}
#lastE{line-height: 55px
;color: #a7a7a7
;font-size: 18px
;text-align: center
;
}
.box2 {height: 400px
;width: 100%
;margin: 0 auto
;background: rgb(54, 58, 62
);margin-top: -4px
;
}
#lunbo2 {height: 100%
;max-width: 1200px
;margin: auto
;
}
#left,#right {width: 50px
;height: 400px
;background-color: #666
;opacity: 0.4
;position: absolute
;right: 0
;cursor: pointer
;display: none
;
}
#play2:hover #left,
#play2:hover #right {display: block
;
}
#left {left: 0
;
}
#left img,
#right img {width: 30px
;height: 50px
;margin-left: 10px
;margin-top: 180px
;
}
#right img {margin-left: 10px
;
}
#play2 {width: 100%
;height: 400px
;position: relative
;overflow: hidden
;
}
#play2 #ul2 {position: absolute
;width: 100%
;
}
#play2 #ul2 li {float: left
;width: 33.33%
;position: relative
;
}
#ul2 li .mask {cursor: pointer
;position: absolute
;top: 0
;bottom: 0
;left: 0
;right: 0
;transition: all .4s
cubic-bezier(.4, 0, .2, 1
);
}
#ul2 li .mask .mask_content {position: absolute
;top: 100px
;bottom: 0
;left: 0
;right: 0
;transition: all .3s ease-out
;
}
.imgDiv {width: 100%
;height: 100px
;text-align: center
;
}
.imgDiv div {background-image: url("圖片/arrow.png");height: 60px
;width: 50px
;margin: auto
}
.lineDiv {width: 100%
;height: 40px
;text-align: center
;transition: all .3s
;overflow: hidden
;
}
.lineDiv div {background-color: #fff
;width: 20px
;height: 2px
;margin: auto
;
}
.titleDiv {width: 100%
;text-align: center
;
}
.titleDiv h2 {color: #fff
;font-weight: lighter
;
}
.jieshaoDiv {margin-top: 40px
;color: #fff
;text-align: left
;
}
.jieshaoDiv {opacity: 0
;width: 80%
;margin-left: 10%
;transition: all .4s
cubic-bezier(.4, 0, .2, 1
);
}
.buttonDiv {width: 100%
;text-align: center
;margin-top: 30px
;opacity: 0
;
}
.buttonDiv button {background-color: rgba(255, 255, 255, 0
);color: #fff
;outline: 0
;width: 100px
;height: 40px
;border: 1px solid #fff
;border-radius: 2px
;cursor: pointer
;
}
.buttonDiv button:hover {background-color: rgba(255, 255, 255, 1
);color: rgba(65, 105, 225, 1
)
}
#ul2 li .mask:hover {background-color: rgba(65, 105, 225, .6
)
}
#ul2 li .mask:hover .lineDiv {height: 0px
;
}
#ul2 li .mask:hover .jieshaoDiv {margin-top: 20px
;opacity: 1
;filter: alpha(opacity=100
);
}
#ul2 li .mask:hover .buttonDiv {opacity: 1
;filter: alpha(opacity=100
);
}
#ul2 li .mask:hover .mask_content {top: 50px
;
}
#play2 #ul2 li img {width: 100%
;height: 400px
;
}
#select {width: 100%
;height: 500px
;background: rgb(244, 244, 244
);
}
.SC2 {width: 100%
;height: 430px
;position: relative
;left: 0
;top: 0
;background-color: #E6E6E6
;
}
.SC2 img {display: block
;float: left
;position: relative
;left: 150px
;margin: 20px
;width: 40%
;
}
.SC2 span {color: #333
;display: block
;width: 90%
;float: left
;margin-top: 50px
;line-height: 30px
;position: relative
;left:-100px
;
}
#head2 {width: 100%
;height: 100px
;background: #282c2f
;
}
#blue_Line {position: relative
;left:64px
;bottom: -96px
;width: 100px
;height: 4px
;background-color: #4278BE
;transition: 1s
;
}
#head2 h3 {color: #fff
;line-height: 100px
;margin-left: 10px
;display: inline-block
;font-size: 2rem
;font-weight: bold
;position: relative
;left:160px
;}
#head2 ul {float: right
;position: relative
;width: 60%
}
#head2 ul #li1{color: #4278BE
;
}
#head2 ul li {float: left
;color: white
;font-size: 16px
;line-height: 100px
;width: 25%
;cursor: pointer
;text-align: center
;
}
#s002,#s003,#s004{display: none
;
}
.SC2 .left1,
.SC2 .right1 {width: 50%
;box-sizing: border-box
;float: left
;
}
.SC2 .left1 img {width: calc(100% - 20px
);width: 60%
;height: 60%
;padding: 10px
;
}
.box4 {max-width: 1200px
;margin: auto
;background: #FFF
;margin-top: 30px
;
}
.box4 p {margin: 0
;padding: 0
;color: #4376bc!important
;line-height: 150px
;font-size: 2.5rem
;text-align: center
;
}
.box4 ul {width: 100%
;margin-left: 5px
;
}
.box4 ul li {float: left
;width: 20%
;height: 120px
;margin-top: 10px
;
}
.box4 ul li img {margin-top: 10%
;margin-left: 10%
;width: 50%
;
}
.box5{background: rgb(244, 244, 244
);
}
.box5 .list01 {width: 100%
;max-width: 1200px
;margin: auto
;margin-left: 65px
;
}
.box5 .list01 li {float: left
;position: relative
;width: 40%
;height: 300px
;background: white
;margin: 20px 5%
;
}
.box5 .list01 li .new-img {border: 5px dashed white
;padding: 7px
;width: 187px
;position: absolute
;top: 40px
;left: -60px
;background: #fff
;
}
.box5 .list01 li .new-img img {width: 100%
;height: 100%
;
}
.box5 .list01 li .new-title {padding-top: 10px
;color: #1E90FF
;width: 50%
;margin-left: 160px
;font-size: 18px
;font-weight: bold
;
}
.box5 .list01 li .new-content {width: 60%
;margin: 30px 0 0 160px
;line-height: 25px
;color: #333333
;
}
.title01 {font-size: 2.5rem
;color: #1E90FF
;padding: 50px 0
;color: #4376bc!important
;text-align: center
;
}
4.添加動態效果(JS)
在頭部編寫兩個函數
代碼如下：
<script type="text/javascript">function moveLine(now){now = 64 + (now-1) * 230;document.getElementById("blue_Line").style.left = now + "px";}function ChangeDiv(divId,divName) { for(i=1;i<=4;i++){if(i!=divId)document.getElementById(divName+i).style.display="none"; }document.getElementById(divName+divId).style.display="block"; if(divId!=1){document.getElementById("li1").style.color= "white"; document.getElementById("li"+ divId).style.color= "#4278BE"; }elsedocument.getElementById("li1").style.color= "#4278BE"; }</script>
并在相應的位置調用
<li class="text2" id="li1" onMouseMove="JavaScript:ChangeDiv('1','s00'),moveLine('1')">數據中心
</li>
<li class="text2" id="li2" onMouseMove="JavaScript:ChangeDiv('2','s00'),moveLine('2')">云計算
</li>
<li class="text2" id="li3" onMouseMove="JavaScript:ChangeDiv('3','s00'),moveLine('3')">大數據
</li>
<li class="text2" id="li4" onMouseMove="JavaScript:ChangeDiv('4','s00'),moveLine('4')">人工智能
</li>
總結
????????這次在寫博客方面比上次有了點經驗，在學習JS的時候邊學邊記筆記，基礎知識模塊比上次要充實了一點；但是在實踐制作方面部分浮動定位的布局以及flex彈性布局這樣的布局方式仍然運用的不是很熟練，很多地方的元素還是暴力定位qwq，繼續努力吧！
????????這次在制作過程中對JS和CSS有了的理解與體會，JS的“+”以及“.”的使用以及CSS中id的字母大小寫（其實是做好樣式之后元素沒變化，找了半天才發現是大小寫的問題“blue_Line”和“blue_line”:-））
總結
以上是生活随笔為你收集整理的第2期：网页动画制作（CSS+JS）的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
