头像发光/旋转

/* 定义头像样式 */
.avatar {
    border-radius: 50%; /* 将头像设为圆形 */
    animation: light 4s ease-in-out infinite; /* 应用名为 light 的动画,持续时间为 4 秒,无限循环 */
    transition: 0.5s; /* 添加过渡效果,持续时间为 0.5 秒 */
}

/* 鼠标悬停时的样式变化 */
.avatar:hover {
    transform: scale(1.15) rotate(720deg); /* 放大 15% 并旋转 720 度 */
}

/* 定义光环动画 */
@keyframes light {
    0% {
        box-shadow: 0 0 4px #f00; /* 初始状态,红色光环 */
    }

    25% {
        box-shadow: 0 0 16px #0f0; /* 25% 动画完成,绿色光环 */
    }

    50% {
        box-shadow: 0 0 4px #00f; /* 50% 动画完成,蓝色光环 */
    }

    75% {
        box-shadow: 0 0 16px #0f0; /* 75% 动画完成,绿色光环 */
    }

    100% {
        box-shadow: 0 0 4px #f00; /* 动画完成,回到初始状态,红色光环 */
    }
}

/* 定义链接列表项的样式 */
.links_box_card_list li dl {
    margin: 0; /* 移除默认外边距 */
    flex: 1; /* 设置为弹性布局并占据可用空间 */
    text-align: left; /* 左对齐 */
}

.links_box_card_list li dt a {
    text-decoration: none; /* 移除链接下划线 */
    color: #333; /* 设置文字颜色为深灰色 */
    font-weight: bold; /* 设置文字粗体 */
    margin-bottom: 5px; /* 底部边距为 5px */
    display: block; /* 将链接设置为块级元素 */
}

.links_box_card_list li dd {
    color: #666; /* 设置描述文字颜色为灰色 */
    overflow: hidden; /* 溢出隐藏 */
    text-overflow: ellipsis; /* 文字溢出时显示省略号 */
    white-space: nowrap; /* 不换行 */
    margin: 0; /* 移除默认外边距 */
    width: 150px; /* 设置宽度为 200 像素 */
}

我网上找到的但是没有备注 我就写了备注

1 Like

image


2 Likes

非常好css使我头像旋转

1 Like