H5 특수 효과 흐림 동적 목록 표시줄: 그림자의 놀라운 사용-HTML 튜토리얼-php.cn

H5 특수 효과 흐림 동적 목록 표시줄: 그림자의 놀라운 사용

PHPz

풀어 주다： 2017-04-04 13:42:53

원래의

2247명이 탐색했습니다.

최종 효과를 먼저 살펴보겠습니다

H5 특수 효과 흐림 동적 목록 표시줄: 그림자의 놀라운 사용

동적 목록 표시줄

1. 목록은 항상 목록이므로 코드는 다음과 같습니다:

<body>
    <p>
        <ul>
            <li>
                <a>首頁 HOME</a>
            </li>
            <li>
                <a>文章 ARTICLE</a>
            </li>
            <li>
                <a>作品 GITHUB</a>
            </li>
            <li>
                <a>我 ME</a>
            </li>
        </ul>
    </p>
</body>

로그인 후 복사

표시 효과:

H5 특수 효과 흐림 동적 목록 표시줄: 그림자의 놀라운 사용

원래 모습

2. 글꼴을 제거하고 검은 점 앞에 있는 작은 글꼴을 제거하고 배경을 다른 색상으로 변경합니다.

body{
    background-color: #5F5F5F;
}
ul li{
    font-size: 30px;
    list-style:none;  
}

로그인 후 복사

3. 정지 상태에서 흐림 효과를 얻기 위해 여기에서는 매우 영리한 방법이 사용됩니다. 그림자
가우시안 흐림이 필요하지 않고 시각 효과만 사용하면 됩니다. 인간의 눈의.

ul li a{
    color: transparent;//字透明
    text-shadow:0 0 5px #fff;//阴影
    letter-spacing: 1px;//字距，为了好看点
}

로그인 후 복사

H5 특수 효과 흐림 동적 목록 표시줄: 그림자의 놀라운 사용

슬라이드할 때 흐릿한 효과

4. <a href="//m.sbmmt.com/wiki/966.html" target="_blank">:hover</a>선택기

ul li a:hover{
    color:#fff;
    text-shadow:0 0 1px #fff;
    padding-left: 10px;//移动一下
}

로그인 후 복사

를 사용하면 슬라이딩할 때 역동적인 효과를 얻을 수 있습니다.

H5 특수 효과 흐림 동적 목록 표시줄: 그림자의 놀라운 사용

동적 효과

기본적으로 프로토타입은 이렇게 되어 있는데 초간단하지만 효과는 아주 좋습니다. 하지만 늘 뭔가 부족한 느낌이 들어서 애니메이션을 추가해 효과를 봤습니다.

ul li a{
    color: transparent;
    text-shadow:0 0 5px #fff;
    letter-spacing: 1px;
    transition:all 0.4s ease-in-out;
}

로그인 후 복사

마지막으로 모든 코드를 넣습니다: JS Bin

자, 최종 효과는 이렇습니다. 이제 Pure HTML5+CSS3을 사용하면 많은 흥미로운 기능을 얻을 수 있습니다. 천천히 이야기하고 관심 있는 친구들이 함께 토론할 수 있습니다.

위 내용은 H5 특수 효과 흐림 동적 목록 표시줄: 그림자의 놀라운 사용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!