CSS實現鼠標滑過雪花效果,只需要簡單的CSS動畫即可。首先,我們需要創建一個雪花的形狀,并利用CSS將其排列到頁面上。
/* 雪花形狀的CSS代碼 */ .snowflake { position: absolute; /* 絕對定位 */ top: -10px; /* 初始位置 */ left: -10px; width: 20px; /* 雪花大小 */ height: 20px; border-radius: 50%; /* 圓形 */ background-color: white; /* 白色 */ box-shadow: 0 0 3px #ccc; /* 陰影 */ z-index: 9999; /* 顯示在最上層 */ }
然后,通過CSS動畫讓雪花滑動。這里我們使用transform屬性改變雪花的位置。
/* 滑動動畫 */ @keyframes snowslide { from { transform: translate(0,0); /* 初始位置 */ } to { transform: translate(0,500px); /* 結束位置 */ } } /* 將滑動動畫應用到雪花上 */ .snowflake { animation: snowslide 5s linear infinite; /* 持續時間為5秒,線性變化,無限循環 */ }
接下來,我們需要讓雪花“落下”到頁面上。這可以通過hover偽類來完成。
/* 鼠標滑過時雪花的CSS代碼 */ .snowflake:hover { animation: none; /* 停止滑動動畫 */ top: 0; /* 上移雪花 */ transform: translate3d(0,0,0); /* 使之立即停止,避免動畫完成后繼續移動的問題 */ }
最后,將鼠標滑過事件應用到頁面上的所有雪花元素即可實現效果。
/* 將鼠標滑過事件應用到所有雪花元素 */ .snowflake:hover { animation: none; top: 0; transform: translate3d(0,0,0); }