/* 定义头像样式 */
.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 像素 */
}
我网上找到的但是没有备注 我就写了备注