emlog评论区头像美化,CSS特效呼吸光环和旋转-五行资源分享网-第1张图片



emlog评论区头像美化,CSS特效呼吸光环和旋转

emlog评论区头像美化,CSS特效呼吸光环和旋转-五行资源分享网-第2张图片

作者: 五行

网络资源搬砖的爱好者

emlog评论区头像美化,CSS特效呼吸光环和旋转-五行资源分享网-第3张图片手机扫码查看

特别声明:文章多为网络转载,资源使用一般不提供任何帮助,如有侵权请联系!

最开始见到这个css特效感觉还是挺有趣的,头像呼吸光环哈,还有鼠标悬停会进行旋转,并且能感距到明显的加速。

 

使用方法

通过浏览器的审查元素功能,找到头像的html元素。

若头像元素为avatar,就可以在css中添加

 

头像呼吸光环css

/*头像呼吸光环*/
.avatar  {
    border-radius: 50%;
    animation: light 4s ease-in-out infinite;
    transition: 0.5s;
}
@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;}
}

 

 

悬停头像旋转css

 

/*悬停头像旋转*/
.avatar:hover {
    transform: rotate(666turn);
    transition-delay: 1s;
    transition-property: all;
    transition-duration: 59s;
    transition-timing-function: cubic-bezier(.34,0,.84,1);
}

 

 

 

可以一同加入使用,确认头像元素正确的话,Ctrl+F5刷新一下缓存,就可以查看效果了。

 

 

 

效果:

 

 

 

分享到:
打赏
未经允许不得转载:

作者: 五行, 转载或复制请以 超链接形式 并注明出处 五行资源分享网
原文地址: 《emlog评论区头像美化,CSS特效呼吸光环和旋转》 发布于2022-4-19
帖子声明: 本站对文章进行整理、排版、编辑,是出于传递信息之目的, 并不意味着赞同其观点或证实其内容的真实性,不拥有所有权,不承担相关法律责任。

评论

77 + 74 =

切换注册

登录

忘记密码?

您也可以使用第三方帐号快捷登录

一键注册
切换登录

注册

用户登录验证码图片

 

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏