handsome头像呼吸光环

1. 头像呼吸光环和鼠标悬停旋转放大

1. .img-full {
   
2.     width: 100px;
   
3.     border-radius: 50%;
   
4.     animation: light 4s ease-in-out infinite;
   
5.     transition: 0.5s;
   
6.     }
   
7. 
   
8. .img-full:hover {
   
9. transform: scale(1.15) rotate(720deg);
   
10. }
    
11. 
    
12. @keyframes light {
    
13.     0% {
    
14.     box-shadow: 0 0 4px #f00;
    
15.     }
    
16.     25% {
    
17.     box-shadow: 0 0 16px #0f0;
    
18.     }
    
19. 
    
20.     50% {
    
21.     box-shadow: 0 0 4px #00f;
    
22.     }
    
23. 
    
24.     75% {
    
25.     box-shadow: 0 0 16px #0f0;
    
26.     }
    
27. 
    
28.     100% {
    
29.     box-shadow: 0 0 4px #f00;
    
30.     }
    
31. }

复制代码

[backcolor=rgba(255, 255, 255, 0.9)]如果只需要单色呼吸光环，例如红色，可以将关键帧动画改为：

1. @keyframes light {
   
2.     from {
   
3.         box-shadow: 0 0 4px #f00;
   
4.     }
   
5. 
   
6.     to {
   
7.         box-shadow: 0 0 16px #f00;
   
8.     }
   
9. }

复制代码

内容不完整  请补充完整的代码示例   和截图效果

1. 头像呼吸光环和鼠标悬停旋转放大

1. .img-full {
   
2.     width: 100px;
   
3.     border-radius: 50%;
   
4.     animation: light 4s ease-in-out infinite;
   
5.     transition: 0.5s;
   
6.     }
   
7. 
   
8. .img-full:hover {
   
9. transform: scale(1.15) rotate(720deg);
   
10. }
    
11. 
    
12. @keyframes light {
    
13.     0% {
    
14.     box-shadow: 0 0 4px #f00;
    
15.     }
    
16.     25% {
    
17.     box-shadow: 0 0 16px #0f0;
    
18.     }
    
19. 
    
20.     50% {
    
21.     box-shadow: 0 0 4px #00f;
    
22.     }
    
23. 
    
24.     75% {
    
25.     box-shadow: 0 0 16px #0f0;
    
26.     }
    
27. 
    
28.     100% {
    
29.     box-shadow: 0 0 4px #f00;
    
30.     }
    
31. }

复制代码

[backcolor=rgba(255, 255, 255, 0.9)]如果只需要单色呼吸光环，例如红色，可以将关键帧动画改为：

1. @keyframes light {
   
2.     from {
   
3.         box-shadow: 0 0 4px #f00;
   
4.     }
   
5. 
   
6.     to {
   
7.         box-shadow: 0 0 16px #f00;
   
8.     }
   
9. }

复制代码

内容不完整  请补充完整的代码示例   和截图效果