CSS를 사용하여 네트워크 연결 상태를 모니터링하는 페이지를 구현하는 방법

이 글의 내용은 CSS를 사용하여 네트워크 연결 상태를 모니터링하는 페이지를 구현하는 방법에 대한 내용입니다. 필요한 친구들이 참고하면 도움이 될 것입니다. 당신에게.

효과 미리보기

소스코드 다운로드

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

Code 해석

navigator.onLine 속성은 온라인 상태를 얻는 데 사용되며 다음으로 트리거됩니다. 해당 이벤트를 통해 온라인 감지 도구를 개발할 수 있습니다. 전체 프로세스는 두 부분으로 나누어집니다. 먼저 시각적 효과를 그린 다음 온라인/오프라인 상태를 감지합니다.

돔 정의, 컨테이너에는 클라이언트, 신호 및 서버가 포함됩니다:

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

가운데 표시:

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, #ccc 5vh);
}

컨테이너 크기 정의:

.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.5em solid;
    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.5em solid;
    border-radius: 0.5em;
}

의사 요소를 사용하여 그리기 하드 드라이브, 여기에 주목하세요 그림자 사용법, 그림자를 사용하여 두 번째 하드 드라이브 그리기:

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

의사 요소를 사용하여 버튼 그리기, 위의 그림자와 동일한 사용법, 이번에는 그림자를 사용하여 그리기 두 번째 버튼: # 🎜🎜#

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

신호를 그리고 온라인/오프라인을 나타내는 색상에 주의하세요. 현재 녹색입니다.

.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: blink 0.6s infinite;
}

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

#🎜 🎜#두 번째 신호와 세 번째 신호에 대한 애니메이션 지연 설정 지연 값은 다음 변수로 정의됩니다.

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

이 시점에서 현재 시각 효과가 완료되었습니다. #에서는 총 3개의 변수가 🎜🎜#에 정의되어 있습니다. 상단 가로 막대와 신호는 녹색이며 신호등이 순서대로 깜박여 데이터가 전송되고 있음을 나타냅니다. 🎜# 이 3개 변수의 값을 수정하면 오프라인 상태 시각 효과를 얻을 수 있으며, 상단 가로 막대와 신호가 빨간색으로 바뀌고 신호등이 함께 깜박여 회선을 사용할 수 없음을 나타냅니다. #🎜 🎜#

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

다음으로 온라인/오프라인 상태를 감지하여 이 두 가지 효과가 동적으로 적용됩니다.

온라인 상태 주제 정의:

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

:root마찬가지로 오프라인 상태 주제 정의:

const ONLINE_THEME = {
    statusColor: 'green',
    secondSignalDelay: '0.2s',
    thirdSignalDelay: '0.4s'
}

온라인/ 오프라인 상태 다른 테마 표시:

const OFFLINE_THEME = {
    statusColor: 'orangered',
    secondSignalDelay: '0s',
    thirdSignalDelay: '0s'
}

이제 Wi-Fi 연결을 끈 다음 페이지를 새로 고치면 페이지에서 빨간색 테마를 사용하고 Wi-Fi 연결을 켜고 페이지를 새로 고칩니다. 페이지에서는 녹색 테마를 사용합니다.

다음으로, 연결이 끊기거나 다시 연결되면 페이지에서 자동으로 테마를 설정하므로 페이지를 수동으로 새로 고칠 필요가 없습니다.

function detectOnlineStatus() {
    let theme = navigator.onLine ? ONLINE_THEME : OFFLINE_THEME
    let root = 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()

끝났어요!

관련 권장사항:

순수 CSS를 사용하여 경주용 자동차의 로더 애니메이션 효과를 구현하는 방법(코드 포함)

# 🎜🎜#순수한 CSS를 사용하여 무지개 줄무늬 텍스트 효과를 얻는 방법(코드 포함)

위 내용은 CSS를 사용하여 네트워크 연결 상태를 모니터링하는 페이지를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!