分享一个子比主题封面悬浮特效，当鼠标在文章列表图上滑过的时候，会出现一个半透的遮罩层慢慢浮现，中间还有个LOGO图标像小精灵一样”咻”地弹出来，非常带感，动画很丝滑！

开始教程

在 子比主题后台 – 自定义代码 – 自定义CSS样式 里面添加以下代码：

/* 动态圆圈效果 */
.item-thumbnail:before {
    /* 创建一个绝对定位的伪元素，用于实现动态圆圈背景 */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0); /* 初始时透明背景 */
    transition: background .35s; /* 平滑过渡效果 */
    border-radius: 8px; /* 圆角效果 */
    z-index: 2;
    max-width: 765px;
    margin: 0 auto; /* 水平居中 */
    pointer-events: none; /* 避免鼠标事件干扰 */
}
.item-thumbnail:after {
    /* 创建另一个绝对定位的伪元素，用于显示图标 */
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50px;
    height: 50px;
    margin: -25px 0 0 -25px; /* 调整位置使其居中 */
    background: url(这里放LOGO图片链接地址);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    z-index: 3;
    -webkit-transform: scale(2);
    transform: scale(2); /* 初始时放大两倍 */
    transition: opacity .35s,-webkit-transform .35s;
    transition: transform .35s,opacity .35s;
    transition: transform .35s,opacity .35s,-webkit-transform .35s;
    opacity: 0; /* 初始时隐藏 */
    pointer-events: none; /* 避免鼠标事件干扰 */
}
.item-thumbnail:hover:before {
    /* 鼠标悬停时改变背景透明度 */
    background: rgba(0,0,0,.5)
}
.item-thumbnail:hover:after {
    /* 鼠标悬停时恢复原大小并显示图标 */
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1
}
/* 文章缩略图的动态圆圈效果 */