编程技术

Document

分享一个typecho博客Joe主题的头像呼吸灯

原文地址：https://0jh.cn/12.html

效果图

效果可以看原文博主的头像，评论区的头像也会自动加上呼吸灯，点击头像或电脑端停留在头像上面还会旋转### 教程haml<style> /*头像呼吸光环和鼠标悬停旋转放大*/ .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;} }</style>------------将上面的代码放到网站的 <head> 或<body>里面保存即可查看效果了，建议放在<body>里面$[泡泡表情]::(坤坤)