版块 › 站长社区 › handsome头像呼吸光环

指点云用户90 发表于 2022-7-24 09:57:44

handsome头像呼吸光环

1. 头像呼吸光环和鼠标悬停旋转放大
.img-full {
    width: 100px;
    border-radius: 50%;
    animation: light 4s ease-in-out infinite;
    transition: 0.5s;
    }

.img-full:hover {
transform: scale(1.15) rotate(720deg);
}

@keyframes light {
    0% {
    box-shadow: 0 0 4px #f00;
    }
    25% {
    box-shadow: 0 0 16px #0f0;
    }

    50% {
    box-shadow: 0 0 4px #00f;
    }

    75% {
    box-shadow: 0 0 16px #0f0;
    }

    100% {
    box-shadow: 0 0 4px #f00;
    }
}如果只需要单色呼吸光环，例如红色，可以将关键帧动画改为：
@keyframes light {
    from {
      box-shadow: 0 0 4px #f00;
    }

    to {
      box-shadow: 0 0 16px #f00;
    }
}

zhidianyun 发表于 2022-7-24 10:34:00

内容不完整请补充完整的代码示例   和截图效果

查看完整版本: handsome头像呼吸光环