HTML漂浮分享代碼是一種常用的網頁設計元素,它可以讓頁面上的文字、圖標、圖片等元素隨著鼠標滾動而浮動,從而增強頁面的交互性和趣味性。下面是一份HTML漂浮分享代碼,供大家參考使用。
/* HTML漂浮分享代碼 */ /* 定義分享圖標樣式 */ .share-icon { width: 30px; height: 30px; border-radius: 50%; background-color: #333; color: #fff; text-align: center; line-height: 30px; font-size: 20px; cursor: pointer; position: fixed; bottom: 50px; right: 50px; z-index: 9999; transition: all 0.3s ease-in-out; } /* 定義分享圖標懸停樣式 */ .share-icon:hover { transform: scale(1.2); box-shadow: 0 0 10px #ccc; } /* 定義分享彈窗樣式 */ .share-popup { width: 200px; height: auto; padding: 10px; border-radius: 5px; background-color: #fff; box-shadow: 0 0 10px #ccc; position: fixed; bottom: 100px; right: 50px; z-index: 9998; display: none; } /* 定義分享彈窗鏈接樣式 */ .share-popup a { display: block; margin-bottom: 10px; text-decoration: none; color: #333; } /* 定義分享彈窗鏈接懸停樣式 */ .share-popup a:hover { color: #f63; } /* 監聽分享圖標鼠標懸停事件 */ $(".share-icon").hover(function() { $(".share-popup").fadeIn(300); }, function() { $(".share-popup").fadeOut(300); });以上代碼定義了一個漂浮在頁面右下角的分享圖標,當鼠標懸停在圖標上時,會彈出一個分享彈窗,里面包含了多個分享鏈接。這個漂浮分享代碼可以用于不同類型的網站和頁面,讓用戶方便地分享頁面內容到不同的社交網站和平臺。