>웹 프론트엔드 >CSS 튜토리얼 >CSS는 A 태그의 배경을 사용하여 흥미로운 효과를 만들 수 있습니다.

CSS는 A 태그의 배경을 사용하여 흥미로운 효과를 만들 수 있습니다.

PHP中文网
PHP中文网원래의
2016-05-16 12:06:371806검색

이 효과는 오늘 누군가가 저에게 글을 써서 문의해 주신 효과입니다. A 태그의 배경을 사용하기 전에도 비슷한 효과를 썼던 기억이 납니다. 그래서 방금 돌아와서 그가 요청한 효과를 적어봤습니다! 그건 그렇고, 나는 당신과 공유하기 위해 게시하고 싶습니다. 만약 당신이 매우 창의적이라면, 당신은 확실히 더 흥미로운 효과를 만들 수 있을 것입니다.

그가 제안한 효과는 Jiutian Music 홈페이지의 FLASH 효과입니다. 동일한 효과를 모방하려면 CSS를 사용해야 합니다. 아마도 FLASH나 SEO를 사용하고 싶지 않기 때문일 것입니다. 그래서 이 효과를 시뮬레이션하기 위해 FW를 사용하여 두 개의 GIF 사진을 만들었습니다. 테스트용이기 때문에 사진과 같은 많은 측면이 자세히 고려되지 않았습니다. 좀 거칠긴 하지만 그래도 재미있어 보이네요 ㅎㅎ...

우선: a:link, a:visited, a:hover, a:active: 이게 말도 안 된다고 하시는 분들도 계실 텐데요. 그러나 초보자가 이것을 본다면, 다른 사람들이 말하는 것은 스스로 이해하는 것보다 항상 더 빠를 것입니다.

코드 복사 코드는 다음과 같습니다.


a:link{}
a:visited {}
a: hover {}
a:active {}



위 명령문은 각각 "일반 링크", "방문한 링크", "마우스가 위에 주차된 경우" 및 "마우스 "시간" 스타일을 클릭하세요.

초보분들은 여기서 주의하셔야 할 점은 작성 과정에서 이 4줄의 순서를 위의 순서대로 작성하셔야 합니다. 그렇지 않으면 표시되는 효과가 예상과 달라집니다. 단순 메모리 측면은 "LVHA"입니다. 사랑해요

다음은 이 효과를 만드는 데 사용된 두 이미지입니다.
 
다음은 CSS 부분입니다.

코드 복사 코드는 다음과 같습니다.




아래는 레이아웃 부분입니다.
프로그램 코드

코드 복사 코드는 다음과 같습니다.




다음은 효과입니다:


[모두 선택하려면 Ctrl+A 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다.]



성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.