Html
    Css
    Js

    
                        
.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;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:2.0.0
 立即下载

网页右下角动图小图标(原创)

更新时间:2023-12-01 11:18:36

background: url('path/to/your/icon.png') center/cover;

可以将这行注释打开,换成自己的图标

0