头像呼吸光环&鼠标悬停旋转放大

2021-08-09 09:59:31 浏览数 (2)

效果展示

{tabs-pane label="静态效果"}

{/tabs-pane} {tabs-pane label="动态效果"}

{/tabs-pane}

静态效果

动态效果

代码如下

代码语言:javascript复制
/*头像呼吸光环和鼠标悬停旋转放大*/
.avatar {
 border-radius: 50%;
 animation: light 4s ease-in-out infinite;
 transition: 0.5s;
}
.avatar: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;}
}

Joe主题直接放到全局设置自定义CSS即可,其他主题自行引入。

0 人点赞