H5 특수 효과 흐림 동적 목록 표시줄: 그림자의 놀라운 사용
- PHPz원래의
- 2017-04-04 13:42:532276검색
최종 효과를 먼저 살펴보겠습니다
동적 목록 표시줄
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.