.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;可以将这行注释打开,换成自己的图标