CSS特效-头像呼吸光环和鼠标悬停加速旋转-路羽博客-第1张图片

CSS特效-头像呼吸光环和鼠标悬停加速旋转

CSS特效-头像呼吸光环和鼠标悬停加速旋转-路羽博客-第2张图片

作者: 路羽

原创资源分享博客

CSS特效-头像呼吸光环和鼠标悬停加速旋转-路羽博客-第3张图片微信小程序

路羽博客 资源分享

前言

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

CSS特效-头像呼吸光环和鼠标悬停加速旋转-路羽博客-第4张图片

使用方法

通过浏览器的审查元素功能,找到头像的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刷新一下缓存,就可以查看效果了。

本文最后更新于2022-2-7,已超过 1 年没有更新,如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢!
分享到:
未经允许不得转载:

作者: 路羽, 转载或复制请以 超链接形式 并注明出处 路羽博客
原文地址: 《CSS特效-头像呼吸光环和鼠标悬停加速旋转》 发布于2022-2-7

评论

          
       
切换注册

登录

忘记密码?

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

切换登录

注册

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

支付宝扫一扫打赏

微信扫一扫打赏