CSS 언어를 사용하여 번개 연결선을 만드는 방법의 예

효과 미리보기

현재 페이지를 미리 보려면 오른쪽의 "미리보기 클릭" 버튼을 누르거나, 전체 화면으로 미리 보려면 링크를 클릭하세요.

https://codepen.io/comehope/pen/RBjdzZ

대화형 비디오

이 비디오는 대화형이므로 언제든지 비디오를 일시 중지하고 비디오의 코드를 편집할 수 있습니다.

크롬, 사파리, 엣지를 이용해 열어서 시청해주세요.

https://scrimba.com/p/pEgDAM/cgkE6C6

코드 해석

돔 정의, 컨테이너에는 각각 플러그와 케이블을 나타내는 2개의 요소가 포함되어 있습니다.

<p class="cable">
    <span class="head"></span>
    <span class="body"></span>
</p>

중앙 디스플레이:

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

컨테이너 크기 정의:

.cable {
    display: flex;
    align-items: center;
    font-size: 10px;
    margin-left: 5em;
}

플러그 외곽선 그리기:

.head {
    width: 8.5em;
    height: 8.5em;
    border-radius: 2em 0 0 2em;
}

플러그에 있는 핀 외곽선 그리기:

.head {
    position: relative;
}

.head::before {
    content: '';
    position: absolute;
    width: 3em;
    height: 7.3em;
    top: calc((8.5em - 7.3em) / 2);
    left: 0.7em;
    border-radius: 1em;
    box-sizing: border-box;
}

케이블의 손에 쥘 수 있는 부분의 외곽선 그리기:

.body {
    width: 15.5em;
    height: 11em;
    border-radius: 0.5em;
}

플러그의 약간 두꺼운 부분의 외곽선 그리기 케이블:

.body {
    position: relative;
    display: flex;
    align-items: center;
}

.body::before {
    content: '';
    position: absolute;
    width: 13.5em;
    height: 6em;
    left: 15.5em;
}

케이블의 연장 부분 그리기:

.body::after {
    content: '';
    position: absolute;
    width: 100vh;
    height: 3.9em;
    left: calc(15.5em + 13.5em);
}

화면 바깥 부분 숨기기:

body {
    overflow: hidden;
}

다음으로 세부 사항을 그립니다.
연장 코드를 그라데이션 색상으로 칠하기:

.body::after {
    background:
        linear-gradient(
            white,
            hsl(0, 0%, 96%) 5%,  
            hsl(0, 0%, 97%) 25%, 
            hsl(0, 0%, 95%) 40%, 
            hsl(0, 0%, 81%) 95%,
            white
        );
}

케이블의 두꺼운 부분을 그라데이션 색상으로 칠하기:

.body::before {
    background:
        linear-gradient(
            white,
            hsl(0, 0%, 96%) 5%,  
            hsl(0, 0%, 98%) 20%, 
            hsl(0, 0%, 95%) 50%, 
            hsl(0, 0%, 81%) 95%,
            white
        );
}

케이블의 손잡이 부분을 그라데이션 색상으로 칠하기:

.body {
    background:linear-gradient(
        hsl(0, 0%, 91%),
        white 15%, 
        hsl(0, 0%, 93%) 50%, 
        hsl(0, 0%, 87%) 70%,
        hsl(0, 0%, 79%) 90%,
        hsl(0, 0%, 84%), 
        hsl(0, 0%, 86%)
    );
}

플러그를 그라데이션 색상으로 칠하기:

.head {
    background:
        linear-gradient(
            -45deg, 
            hsl(0, 0%, 75%),
            hsl(0, 0%, 79%),
            hsl(0, 0%, 78%),
            hsl(0, 0%, 87%) 80%
        );
}

플러그에 핀을 그립니다.

.head::before {
    background-color: white;
}

.head::after {
    content: '';
    position: absolute;
    box-sizing: border-box;
    width: 2.2em;
    height: 0.4em;
    color: goldenrod;
    background-color: currentColor;
    border-radius: 0.5em;
    left: 1.1em;
    top: 1.2em;
    box-shadow: 
        0 0.8em 0,
        0 1.6em 0,
        0 2.4em 0,
        0 3.2em 0,
        0 4em 0,
        0 4.8em 0,
        0 5.6em 0;
}

다음으로 그림자를 추가하여 케이블을 더욱 입체적으로 만듭니다.
플러그에 그림자 그리기:

.head {
    background:
        linear-gradient(
            90deg, 
            transparent 80%,
            rgba(0,0,0,12%)
        ),
        linear-gradient(
            -45deg, 
            hsl(0, 0%, 75%),
            hsl(0, 0%, 79%),
            hsl(0, 0%, 78%),
            hsl(0, 0%, 87%) 80%
        );
}

케이블의 손잡이 부분에 그림자 그리기:

.body::before {
    background:
        linear-gradient(
            45deg, 
            rgba(0,0,0,4%) 10%,
            transparent 20%
        ),    
        linear-gradient(
            90deg, 
            rgba(0,0,0,4%), 
            transparent 10%
        ),
        linear-gradient(
            white,
            hsl(0, 0%, 96%) 5%,  
            hsl(0, 0%, 98%) 20%, 
            hsl(0, 0%, 95%) 50%, 
            hsl(0, 0%, 81%) 95%,
            white
        );
}

케이블의 약간 두꺼운 부분에 그림자 그리기:

.body::after {
    background:
        linear-gradient(
            45deg, 
            rgba(0,0,0,4%),
            transparent 4%
        ),
        linear-gradient(
            90deg, 
            rgba(0,0,0,4%),
            transparent 2%
        ),
        linear-gradient(
            white,
            hsl(0, 0%, 96%) 5%,  
            hsl(0, 0%, 97%) 25%, 
            hsl(0, 0%, 95%) 40%, 
            hsl(0, 0%, 81%) 95%,
            white
        );
}

마지막으로 화면에 입구 애니메이션 추가

.cable {
    animation: show 5s linear infinite;
}

@keyframes show {
    0% {
        transform: translateX(100vw);
    }

    20%, 100% {
        transform: translateX(0);
    }
}

끝났습니다!

관련 기사:

순수한 CSS3를 사용하여 스핀들 구분선 만들기

순수한 CSS3를 사용하여 간단한 다섯개 별 그래픽을 만드는 방법

관련 동영상:

CSS 애니메이션 실용 팁 동영상 튜토리얼

위 내용은 CSS 언어를 사용하여 번개 연결선을 만드는 방법의 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!