头像呼吸光环和鼠标悬停旋转CSS代码特效

china0396

使用方法
通过浏览器的F12审查元素功能，找到自己头像的html元素。添加下面提供的样式类即可。若头像元素的类为avatar，就可以在css中直接添加。类名你也可以也可以自己随意改。

当然了，你也可以写一个div，添加下面的类。本地也可以实现效果。

悬停头像旋转css

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

复制代码

头像呼吸光环css

1. /*头像呼吸光环*/
   
2. .avatar  {
   
3.     border-radius: 50%;
   
4.     animation: light 4s ease-in-out infinite;
   
5.     transition: 0.5s;
   
6. }
   
7. @keyframes light {
   
8.     0%{box-shadow: 0 0 4px #f00;}
   
9.     25%{box-shadow: 0 0 16px #0f0;}
   
10.     50%{box-shadow: 0 0 4px #00f;}
    
11.     75%{box-shadow: 0 0 16px #0f0;}
    
12.     100%{box-shadow: 0 0 4px #f00;}
    
13. }

复制代码