网页动画制作（CSS+JS）

第1期： 手把手教你制作网易邮箱注册页面
第2期： 网页动画制作（CSS+JS）
第3期：12306页面制作

鄙人不才，第一次写这篇博文时将动态网页与网页动态效果这两个概念混淆，感谢大佬指点。

文章目录

  • 网页动画制作（CSS+JS）
  • 前言
  • 一、基础知识（CSS+JS）
    • 1.如何插入JS
    • 2.一点语法
    • 3.一点符号
  • 二、制作步骤
    • 1.建立框架
    • 2.丰富内容
    • 3.修改样式(CSS)
    • 4.添加动态效果(JS)
  • 总结

前言

这一期我们要仿照制作的网站：新动态官网
两个要实现的目标动态效果:
1. 鼠标经过时，图片遮罩层样式的改变（包括按钮）：

2. 鼠标经过时下方内容的切换：

以下是本篇文章正文内容

一、基础知识（CSS+JS）

注：仅供参考，可直接跳过。

1.如何插入JS

方法一：内嵌式

<head><script type="text/javascript">/*这里是固定写法*//*这里是JS代码*/</script>
</head>

PS:JS作为一种脚本语言可以放在html页面中任何位置，但进行页面显示初始化的js必须放在head里面
方法二：外联式

<script src="script.js">
</script>

2.一点语法

JS:
详细教程/基础知识

  • 定义变量：var 变量名;
  • 函数的定义与调用
<html><head><script type="text/javascript">function fun() //定义函数,function不可省{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中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!"; //修改P元素内容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-property
none
all
property
没有属性会获得过渡效果
所有属性都将获得过渡效果
定义应用过渡效果的 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-duration
time
规定完成过渡效果需要花费的时间/以秒或毫秒计/默认值是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-function
linear
ease
ease-in
ease-out
ease-in-out
cubic-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-delay
time
指定秒或毫秒数之前要等待切换效果开始
  • 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.一点符号

  • 换行符——< br >

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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;产品介绍 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;公司服务&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 解决方案 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;公司新闻&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;关于我们&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;加入我们</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">南京新动态信息科技有限公司&nbsp;©版权所有</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*/
/*尾部样式*/
.box6{height: 80px;width: 100%;background: #1d1e1e;
}
.footer{height: 80px;
}
#lastE{line-height: 55px;color: #a7a7a7;font-size: 18px;text-align: center;
}
/*box2*/
.box2 {height: 400px;/*max-width: 1200px;*/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;
}
/*box3*/
#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;
}
/*#head2 ul li:hover {color: #4278BE;
}*/
#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*/
.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*/
.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">/*now --当前光标位置；*/function moveLine(now){now = 64 + (now-1) * 230;document.getElementById("blue_Line").style.left = now + "px";}/*divID --当前DIV的ID号；divName --要改变的这一组DIV的命名前缀*/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）相关推荐

  1. 有趣的HTML实例（十四） 窗边风景动画（css+js）

    不要憎恨你的敌人,那会影响你的判断力. --<教父> 目录 一.前言 二.往期作品回顾 三.作品介绍 四.本期代码介绍 五.效果显示 六.编码实现 index.html style.css ...

  2. 韩顺平轻松搞定网页设计(html+css+js),韩顺平轻松搞定网页设计方案(html+css+js)之javascript现场授课笔记(完整版).doc...

    2011韩顺平轻松搞定网页设计(html+css+js)之 javascript现场授课笔记(完整版) 视频18整和19的前半部分不用看 Javascript的基本介绍 JS是用于WEB开发的脚本语言 ...

  3. 动画图标，如何实现页面中图标小动画，动画按钮 CSS JS

    动画图标,如何实现页面中图标小动画,动画按钮 CSS JS 本文提到的例子的在线演示: https://kylebing.cn/test/scss/ 最近在看线上服务器的时候,无意间发现一个好玩的东西 ...

  4. html百度首页制作视频,韩顺平 轻松搞定网页设计 html+css+js

    韩顺平老师的教程影响着一代又一代的学子们,他的视频教程确实做的很经典,不论是java.php还是网页设计,都有出彩的地方.这里,小编给大家分享韩顺平老师的轻松搞定网页设计教程,绝对完整,全部存于百度网 ...

  5. html涟漪动画效果,CSS+JS实现水滴涟漪动画按钮效果的示例代码

    代码如下所示: Document .btn{ display: block; width: 300px; height: 100px; margin: 50px; outline: 0; overfl ...

  6. 网页作业HTML+CSS+JS大作业——汽车租赁(47页) 加特效 web期末作业设计网页_汽车大学生网页设计作业成品

    HTML+CSS+JS大作业--汽车租赁(47页) 加特效 web期末作业设计网页_汽车大学生网页设计作业成品 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. ...

  7. 【HTML5期末大作业】制作一个简单HTML我的公益校园安全网页（HTML+CSS+JS）

    源码获取 文末联系

  8. 【HTML5期末大作业】制作一个简单HTML我的班级网页（HTML+CSS+JS

    源码获取 文末联系

  9. 如何制作web期末网页设计 HTML+CSS+JS茶叶文化网站制作

  10. web程序员的正确表白方式 制作粉色少女系列 生日快乐祝福网页（HTML+CSS+JS）

    ​​​ H5 手机端 一,登录页面 (可自定义文字+图片+音乐) 二,生日蛋糕页面(可自定义文字+音乐) 三.浪漫表白页面 (可自定义图片+文字+音乐) ​ 在线演示地址 https://ruanji ...

最新文章

  1. 单据自动转换并审核的方法示例
  2. [转]Visual Assist X设置
  3. 【C 语言】数组作为参数退化为指针问题 ( 问题描述 | 从编译器角度分析该问题 | 出于提高 C 语言执行效率角度考虑 | 数组作为参数的推荐方案 )
  4. 利用jQuery实现的Ajax 验证用户名是否存在
  5. C语言，向函数传递一维数组，计算最高分，平均分，人数（要求输入负值时输入结束，且不能超过40人）
  6. 副法线和正切是什么?
  7. 人类的悲欢虽不相通，但电脑情感分析模型读得懂
  8. 数仓开发神器--DBeaver
  9. excel导入成html页面上的表格
  10. 7.运输层---UDP
  11. 如何设置网件gs108e_NETGEAR 美国网件 GS108E 交换机 开箱及单线复用教程
  12. 设置input框只能输入6位为数字的支付密码
  13. SD卡与TF卡的区别是什么？哪个更耐用?
  14. 手游运营数据分析指标百科全说
  15. dsg_20 kibana
  16. Spring Security小例子
  17. 路由dns劫持，路由器DNS劫持简单实现和防范分析
  18. 清华大学计算机王佳希,北大清华2012年拟录取保送生名单及简析（北京市）
  19. 基于租房数据进行数据分析
  20. Python爬虫+夜神模拟器+Fiddler抓取手机APP数据接口 -- 图文教程（霸霸看了都说好）

热门文章

  1. 手机影音第十七天，实现歌词同步
  2. sqlserver修改主键id自增
  3. ​TCP和UDP的135、137、138、139、445端口的作用?​
  4. 如何创建CGColorRef在view.layer.borderColor上使用
  5. 麻省理工学院计算机科学与工程博士,2020年麻省理工学院博士读几年
  6. 剑客之剑——倚天剑（Vim）
  7. 【弄nèng - Activiti6】Activiti6入门篇（十七）—— 消息中间事件
  8. 创建视图，修改视图，修改视图数据
  9. JAX-RS 从傻逼到牛叉 2：开发一个简单的服务
  10. 如何使用 哑节点（dummy node），高效解决问题