.message-board-icon { width:50px; height:50px; background-color:#3498db; /* background:url('path/to/your/icon.png') center/cover; */ /* 替换 'path/to/your/icon.png' 为你图标的路径 */ position:fixed; bottom:20px; right:20px; border-radius:50%; box-shadow:0 4px 8px rgba(0,0,0,0.1); /* animation:slideDown 1s ease-out,pulse 2s infinite; */ /* 先下滑,再放大缩小 slideDown 1s ease-out,pulse 2s infinite 同时用不生效 */ /* animation:slideAndPulse 4s infinite; */ /* 合并动画 infinite是无限循环*/ animation:slideAndPulse 4s 1; display:flex; align-items:center; } @keyframes slideAndPulse { 0% { transform:translateY(-250%) scale(1); } 50% { transform:translateY(0) scale(1.3); } 60% { transform:translateY(0) scale(1); } 80% { transform:translateY(0) scale(1.3); } 100% { transform:translateY(0) scale(1); } }/* 向下滑动动画 */ @keyframes slideDown { 0% { transform:translateY(-100%); } 100% { transform:translateY(0); } }/* 放大缩小动画 */ @keyframes pulse { 0% { transform:scale(1); } 50% { transform:scale(1.1); } 100% { transform:scale(1); } }.message-board-icon:hover { cursor:pointer; transform:scale(1.3); box-shadow:0 6px 12px rgba(0,0,0,0.2); } .tooltip { position:absolute; top:-30px; /* 调整提示文字位置 */ left:-50%; /* transform:translateX(-50%); */ background-color:rgba(255,255,255,0.8); /* 半透明的白色背景 */ color:#333; /* 深灰色文本颜色 */ padding:5px 10px; border-radius:5px; opacity:0; transition:opacity 0.3s ease-in-out; } .message-board-icon:hover .tooltip { opacity:1; }
更新时间:2023-12-01 11:18:36
background: url('path/to/your/icon.png') center/cover;
可以将这行注释打开,换成自己的图标