How to use css to implement a page that monitors network connection status-CSS Tutorial-php.cn

How to use css to implement a page that monitors network connection status

不言

Release： 2018-08-25 17:54:47

Original

2647 people have browsed it

This article brings you a page about how to use css to monitor network connection status. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Effect preview

How to use css to implement a page that monitors network connection status

Source code download

https://github.com/comehope/front- end-daily-challenges

Code Interpretation

navigator.onLine attribute is used to obtain the online status, and then with the corresponding event trigger, an online detection tool can be developed. The whole process is divided into two parts, first drawing the visual effect, and then detecting the online/offline status.

Define dom, the container contains client, signal and server:

<div class="detector">
    <div class="client"></div>
    <div class="signal"></div>
    <div class="server"></div>
</div>

Copy after login

Centered display:

body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

Copy after login

Add a horizontal bar at the top to show that the current status is online Or offline, use green to indicate online:

:root {
    --status-color: green;
}

body {
    background: linear-gradient(var(--status-color) 5vh, #ccc 5vh);
}

Copy after login

Define container size:

.detector {
    width: 40em;
    height: 14em;
    font-size: 10px;
}

Copy after login

Define the overall layout and main color of sub-elements (client, signal, server):

.detector {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #333;
}

Copy after login

Set the common attributes of sub-elements (client, signal, server) and their pseudo-elements:

.detector > * {
    position: relative;
    box-sizing: border-box;
}

.detector > *::before,
.detector > *::after {
    content: &#39;&#39;;
    position: absolute;
    box-sizing: border-box;
}

Copy after login

Draw the client's monitor:

.client {
    width: 17em;
    height: 10em;
    border: 0.5em solid;
    border-radius: 0.5em;
}

Copy after login

Use pseudo-elements to draw the base of the monitor:

.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;
}

Copy after login

Draw the server chassis:

.server {
    width: 7em;
    height: 14em;
    border: 0.5em solid;
    border-radius: 0.5em;
}

Copy after login

Use pseudo elements to draw the hard drive, pay attention to the use of shadows here, and use shadows to draw the second hard drive:

.server::before {
    width: 5em;
    height: 1em;
    background-color: currentColor;
    border-radius: 0.2em;
    top: 8em;
    left: 0.5em;
    box-shadow: 0 1.5em 0;
}

Copy after login

Use pseudo elements to draw the button, the same usage as the shadow above, this time use the shadow to draw the second button:

.server::after {
    width: 0.6em;
    height: 0.6em;
    background-color: currentColor;
    border-radius: 50%;
    right: 1.5em;
    bottom: 0.5em;
    box-shadow: 1em 0 0 0.1em;
}

Copy after login

Draw the signal, pay attention to the color used to represent online/offline, Currently it is green:

.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;
}

Copy after login

Add animation effects to the signal:

.signal,
.signal::before,
.signal::after {
    animation: blink 0.6s infinite;
}

@keyframes blink {
    50% {
        filter: opacity(0.1);
    }
}

Copy after login

Set animation delay for the 2nd signal and 3rd signal. The delay value is defined with variables:

: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);
}

Copy after login

At this point, the visual effect has been completed. It is currently an online effect. A total of 3 variables are defined in :root. The top horizontal bar and signal are green, and the signal lights flash in sequence to indicate that data is being transmitted. :

:root {
    --status-color: green;
    --second-signal-delay: 0.2s;
    --third-signal-delay: 0.4s;
}

Copy after login

By modifying the values of these three variables, you can get the visual effect of offline status. The top horizontal bar and the signal turn red, and the signal lights flash together to indicate that the line is unavailable:

:root {
    --status-color: orangered;
    --second-signal-delay: 0s;
    --third-signal-delay: 0s;
}

Copy after login

Next Dynamically apply these 2 effects by detecting online/offline status.

Define the online status theme:

const ONLINE_THEME = {
    statusColor: &#39;green&#39;,
    secondSignalDelay: &#39;0.2s&#39;,
    thirdSignalDelay: &#39;0.4s&#39;
}

Copy after login

Similarly, define the offline status theme:

const OFFLINE_THEME = {
    statusColor: &#39;orangered&#39;,
    secondSignalDelay: &#39;0s&#39;,
    thirdSignalDelay: &#39;0s&#39;
}

Copy after login

Create a function to display different themes based on online/offline status:

function detectOnlineStatus() {
    let theme = navigator.onLine ? ONLINE_THEME : OFFLINE_THEME
    let root = document.documentElement
    root.style.setProperty(&#39;--status-color&#39;, theme.statusColor)
    root.style.setProperty(&#39;--second-signal-delay&#39;, theme.secondSignalDelay)
    root.style.setProperty(&#39;--third-signal-delay&#39;, theme.thirdSignalDelay)
}

detectOnlineStatus()

Copy after login

Now, turn off the wifi connection, then refresh the page, the page will adopt a red theme; turn on the wifi connection again, then refresh the page, the page will adopt a green theme.

Next, bind the detection function to the system event. When the connection is disconnected or reconnected, the page will automatically set the theme, and there is no need to refresh the page manually:

window.addEventListener(&#39;online&#39;, detectOnlineStatus)
window.addEventListener(&#39;offline&#39;, detectOnlineStatus)

Copy after login

You're done!

Related recommendations:

How to use pure CSS to implement the loader animation effect of a racing car (with code)

How to use pure CSS to implement a rainbow The effect of striped text (with code)

The above is the detailed content of How to use css to implement a page that monitors network connection status. For more information, please follow other related articles on the PHP Chinese website!