CSS를 활용한 릴리프 효과 구현 예제 코드

이 글은 주로 CSS를 사용하여 릴리프 효과를 얻는 방법을 소개합니다. 이 글은 모든 사람에게 참고할만한 가치가 있다고 생각합니다.

머리말

최근 바이두 지도를 보다가 효과를 봤는데, 이 효과는 웹페이지에서 사용하면 꽤 좋을 것 같아서 연구하게 되었습니다.

렌더링은 다음과 같습니다.

릴리프 효과는 텔레스코픽 박스(플렉스)에 대한 지식이 필요합니다

flex 크롬에서는 완벽하게 지원됩니다. 일부 다른 브라우저에서는 이를 지원하고 일부는 지원하지 않습니다. 오늘은 주로 릴리프 효과를 만드는 방법에 대해 이야기하고 싶습니다. >

먼저 첨부 위 코드:

<p class="title">
        <p class="word">生活服务</p>
        <p class="relief">
            <p class="border"></p>
        </p>
    </p>

body,p{
     padding: 0;
     margin: 0;
 }
.title{
    font-size: 15px;
    font-family: "Microsoft Yahei", "Trebuchet MS", Arial, Helvetica, sans-serif;
    display: -webkit-flex;
    -webkit-align-items: center;
    margin-top: 50px;
    margin-left: 20px;
    margin-right: 20px;
}

.word{
    -webkit-flex: 0 0 auto;
    padding-right: 10px;
}
.relief{
    -webkit-flex: 1;
}
.border{
    height: 0;
    width: 100%;
    border-top: 1px solid #808080;
    border-bottom: 1px solid #fff;
}

만든 효과 첨부:

매우 실용적인 효과

플렉스 스타일 분석:

display:-webkit-flex는 텔레스코픽을 위한 컨테이너를 제공합니다. box

-webkit-align-items:

flex-start: 플렉스박스 요소의 교차축(세로축)의 시작 위치 경계가 플렉스 박스의 시작 경계에 가깝습니다. 행의 교차축.

flex-end: 플렉스박스 요소의 교차축(세로축) 시작 위치의 경계가 행의 교차축 끝 경계에 가깝습니다.

center: Flexbox 요소는 행의 교차축(세로축) 중앙에 위치합니다. (행의 크기가 Flexbox 요소의 크기보다 작으면 양방향으로 동일한 길이로 오버플로됩니다.)

-webkit-flex: 복합 속성. Flexbox 모델 객체의 하위 요소에 공간이 할당되는 방법을 설정하거나 검색합니다.

none:

none 키워드의 계산된 값: 0 0 auto

[ flex-grow ]: 정의 Flexbox 요소의 확장 비율입니다. (공간 할당 권한 정의)

[ flex-shrink ]: 플렉스박스 요소의 축소율을 정의합니다. (오버플로되면 추가 공간이 비례하여 소화됩니다.)

[ flex-basis ]: 플렉스 박스 요소의 기본 기준 값을 정의합니다. (요소의 너비 값을 정의합니다. 지정하지 않을 경우 요소 자체의 너비 값에 따라 달라집니다.)

마지막으로 테두리에 border 속성을 설정하면 부조 효과 연출이 완료됩니다

CSS 활용도 높이기 릴리프 효과를 얻으려면 PHP 중국어 웹사이트의 샘플 코드 관련 기사를 참고하세요!