居中显示：

body{

margin:0;

height:100vh;

display:flex;

align-items:center;

justify-content:center;

}

在顶部增加一个横条，用于显示当前状态是在线还是离线，用绿色表示在线：

:root{

--status-color:green;

}

body{

background:linear-gradient(var(--status-color)5vh,#ccc5vh);

}

定义容器尺寸：

.detector{

width:40em;

height:14em;

font-size:10px;

}

定义子元素（客户端、信号、服务器）的整体布局和主色：

.detector{

display:flex;

justify-content:space-between;

align-items:center;

color:#333;

}

设置子元素（客户端、信号、服务器）和它们的伪元素的共有属性：

.detector>*{

position:relative;

box-sizing:border-box;

}

.detector>*::before,

.detector>*::after{

content:'';

position:absolute;

box-sizing:border-box;

}

画出客户端的显示器：

.client{

width:17em;

height:10em;

border:0.5emsolid;

border-radius:0.5em;

}

用伪元素画出显示器的底座：

.client{

display:flex;

flex-direction:column;

align-items:center;

margin-top:-4em;

}

.client::before{

width:1.5em;

height:3em;

background-color:currentColor;

top:9.5em;

}

.client::after{

width:5em;

height:1em;

background-color:currentColor;

border-radius:0.3em;

top:12.5em;

}

画出服务器的机箱：

.server{

width:7em;

height:14em;

border:0.5emsolid;

border-radius:0.5em;

}

用伪元素画出硬盘，留意此处阴影的用法，用阴影画出了第二块硬盘：

.server::before{

width:5em;

height:1em;

background-color:currentColor;

border-radius:0.2em;

top:8em;

left:0.5em;

box-shadow:01.5em0;

}

用伪元素画出按钮，和上面阴影同样的用法，这次用阴影画出了第二个按钮：

.server::after{

width:0.6em;

height:0.6em;

background-color:currentColor;

border-radius:50%;

right:1.5em;

bottom:0.5em;

box-shadow:1em000.1em;

}

画出信号，注意配色用的是代表在线/离线的颜色，目前是绿色：

.signal,

.signal::before,

.signal::after{

width:1em;

height:1em;

background-color:var(--status-color);

border-radius:50%;

}

.signal::before{

right:2.5em;

}

.signal::after{

left:2.5em;

}

给信号增加动画效果：

.signal,

.signal::before,

.signal::after{

animation:blink0.6sinfinite;

}

@keyframesblink{

50%{

filter:opacity(0.1);

}

}

为第2个信号和第3个信号设置动画延时，延时的值用变量定义：

:root{

--second-signal-delay:0.2s;

--third-signal-delay:0.4s;

}

.signal::before{

animation-delay:var(--second-signal-delay);

}

.signal::after{

animation-delay:var(--third-signal-delay);

}

至此，视觉效果已经完成，目前是在线状态的效果，在:root中一共定义了3个变量，顶部横条和信号是绿色，信号灯依次闪烁表示正在传输数据：

:root{

--status-color:green;

--second-signal-delay:0.2s;

--third-signal-delay:0.4s;

}

通过修改这3个变量的值，可以得到离线状态的视觉效果，顶部横条和信号变为红色，信号灯一起闪烁表示线路不通：

:root{

--status-color:orangered;

--second-signal-delay:0s;

--third-signal-delay:0s;

}

接下来通过检测在线/离线状态，动态应用这2种效果。

定义在线状态主题：

constONLINE_THEME={

statusColor:'green',

secondSignalDelay:'0.2s',

thirdSignalDelay:'0.4s'

}

类似地，定义离线状态主题：

constOFFLINE_THEME={

statusColor:'orangered',

secondSignalDelay:'0s',

thirdSignalDelay:'0s'

}

创建一个函数，用于根据在线/离线状态显示不同的主题：

functiondetectOnlineStatus(){

lettheme=navigator.onLine?ONLINE_THEME:OFFLINE_THEME

letroot=document.documentElement

root.style.setProperty('--status-color',theme.statusColor)

root.style.setProperty('--second-signal-delay',theme.secondSignalDelay)

root.style.setProperty('--third-signal-delay',theme.thirdSignalDelay)

}

detectOnlineStatus()

现在，关掉wifi连接，然后刷新页面，页面会采用红色主题；再打开wifi连接，然后刷新页面，页面会采用绿色主题。

接下来把检测函数与系统事件绑定，当连接断开或重新连接时，页面会自动设置主题，不用手动刷新页面了：

window.addEventListener('online',detectOnlineStatus)

window.addEventListener('offline',detectOnlineStatus)

大功告成！

以上是“怎么用css实现监控网络连接状态的页面”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！

本文名称：怎么用css实现监控网络连接状态的页面
文章分享：http://kswjz.com/article/geejsd.html