CSS_CSS/HTML로 제어되는 깜박임 효과

텍스트나 그림 주위에 후광이 있습니다. 이 후광은 마우스를 그 위로 이동하면 즉시 깜박임을 멈추고 마우스를 멀리 이동하면 계속 깜박입니다. 이 효과는 타인의 특별한 주의가 필요한 콘텐츠(예: 경고, 새로운 콘텐츠 신고 등)에 사용되며, 더 나은 결과를 얻을 수 있습니다.

위의 예는 캡쳐한 사진이므로 역동적인 효과를 볼 수 없습니다. 제작 아이디어는 다음과 같습니다. CSS "발광" 필터를 사용하여 후광 효과를 생성하고, CSS의 동적으로 변경되는 속성을 사용하고, 작은 JavaScript 프로그램을 사용하여 매초 속성 값을 변경하여 깜박이는 효과를 얻습니다. onmouseover 및 onmouseout)을 사용하여 Javascript 프로그램을 호출하여 깜박임 여부를 제어합니다.

제작방법 :

1. 글로우 필터를 생성합니다. CSS 필터 설정 방법은 "CSS 필터 적용 팁"의 관련 문서를 참조하세요. 여기서는 반복하지 않겠습니다. 드림위버를 사용하지 않는 네티즌의 경우, 웹페이지 소스코드의 〈head〉와 〈/head〉 사이에 다음 코드를 복사해주세요:

　〈style type="text/css"〉

　

　〈/style〉

2. 레이어를 삽입하고 이름을 bob으로 지정합니다. 레이어에 텍스트를 씁니다. 그런 다음 레이어에 글로우 필터를 로드하고 두 개의 이벤트를 추가하여 마우스가 텍스트 위로 이동할 때 깜박임을 멈추고 마우스가 텍스트에서 멀어질 때 계속 깜박이도록 합니다. 코드: onclick="stopflash(this)", 이 코드의 기능은 다음과 같습니다. 마우스가 텍스트 위로 이동하면 프로그램의 "stopflash(this)" 함수가 호출되어 깜박임을 중지합니다. 이 문장 코드의 기능은 다음과 같습니다. 마우스가 텍스트에서 멀어지면 프로그램의 "init()" 기능이 호출되어 후광이 깜박이게 됩니다. 이 예제가 완료된 후 레이어 마킹을 위한 코드는 다음과 같습니다.

　

3. 〈head〉와 〈/head〉 사이에 다음 Javascript 프로그램을 삽입합니다.

　

　

　〈/script〉
　4. 웹 페이지 소스 코드의

태그에 onload="init()" 코드를 추가합니다. 이 코드의 역할은 웹페이지가 로드될 때 후광이 깜박이기 시작한다는 것입니다.

이 시점에서 F12를 눌러 예상되는 효과를 확인하면 제작이 완료됩니다.

CSS 필터의 매개변수 값을 수정하여 후광의 색상과 길이를 변경할 수 있습니다. 후광이 깜박이는 시간 간격은 Javascript에서 간격 시간 값을 수정하여 조정할 수 있습니다. 레이어에 그림을 삽입하면(배경이 투명한 GIF 그림이 더 좋음) 그림 가장자리에 후광이 깜박이는 효과가 됩니다.