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

Tosscat 2021年11月7日18:33:44网站源码评论173阅读模式

效果展示

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

代码

/*头像呼吸光环和鼠标悬停旋转放大*/ 
.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;} 
}

Tosscat
  • 本文由 发表于 2021年11月7日18:33:44
  • 转载请务必保留本文链接:https://www.zhetengmao.com/1248.html
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: