최종 효과를 먼저 살펴보겠습니다
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>
표시 효과:
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;//字距,为了好看点 }
4. <a href="http://www.php.cn/wiki/966.html" target="_blank">:hover</a>
선택기
ul li a:hover{ color:#fff; text-shadow:0 0 1px #fff; padding-left: 10px;//移动一下 }를 사용하면 슬라이딩할 때 역동적인 효과를 얻을 수 있습니다.
기본적으로 프로토타입은 이렇게 되어 있는데 초간단하지만 효과는 아주 좋습니다. 하지만 늘 뭔가 부족한 느낌이 들어서 애니메이션을 추가해 효과를 봤습니다.
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!