CSS를 사용하여 마우스 클릭 효과 구현_CSS/HTML

CSS를 잘 적용하면 홈페이지가 아름답게 보일 것입니다. 아래에서는 CSS로 제작한 마우스 클릭 특수효과 이미지를 소개하겠습니다.

1. 다음 코드를 홈페이지에 복사하세요.

〈STYLE〉.shadow {
FILTER: 그림자(색상=파란색, 방향=225)
}
.shadow1 {
FILTER: 그림자(색상=빨간색, 방향=225)
　}
　.shadow2 {
　FILTER: 그림자(색상=녹색, 방향=225)
　}
　.div {
　CURSOR: 이동; =135，강도=10) WIDTH: 800px
　}
　〈/STYLE〉

여기서 흐림 필터가 적용됩니다.

2. 페이지에 그림을 삽입합니다. 예를 들어

방금 삽입한 그림 아래 줄에 〈TD style="VERTICAL-ALIGN: top" width=314〉를 추가합니다.

3. 이미지 속성을 설정한 후에는 Javascript 스크립트 코드도 적용해야 합니다. 즉, 몇 가지 특수 효과를 사용하여 이미지가 마우스 움직임을 따르도록 해야 합니다.

〈script 언어=Javascript〉
　　!--
　var g_numlights=0;
　var Blubs= new Array("현재 동적 필터는 웹페이지에 사용자 작업에 응답하는 보다 인터랙티브한 성능을 제공합니다. ."," 사용자의 클릭에 응답하기 위해 광원 필터를 사용합니다. ") ;
window.onload=setlights;
문서. onclick=keyhandler;
flttgt.onmousemove=mousehandler;
function setlights(){
flttgt.filters[0].clear()
flttgt.filters[0].addcone(0,0 ,5,100,100,225,225,0,60,15);
if (g_numlights>0){
flttgt.filters[ 0].addcone(400, 170, 5, 100, 100, 225, 0, 0, 160, 15);
　if (g_numlights>1){
flttgt.filters[0].addcone(320, 330, 5, 100, 100, 0, 225, 225, 60, 15)%4; ;
holder.innerHTML=blurbs[g_numlights];
setlights();
}
function mousehandler()
{
x=(window.event.x -80);
y=(window.event.y-80);
flttgt.filters[0].movelight(1,x,y,5,1);
if(g_numlights>0 ){
flttgt.filters[0].movelight(1,x,y,5,1);
if(g_numlights>1)
{
flttgt.filters[0].movelight( 2, x, y, 5, 1);
　}
　}
　}
　〈/script〉

이렇게 하면 더욱 개인화된 사진 효과를 설정할 수 있습니다