### 魔改 为了减少对源码的修改，本次美化大多数可以直接在后台开发者设置-自定义css中添加代码即可。 ### 1. 头像呼吸光环和鼠标悬停旋转放大 <center>[](https://ae01.alicdn.com/kf/H55bcc22ca704447f9ad398934f6ccaaat.jpg "头像动图")</center> ```css .img-full { width: 100px; border-radius: 50%; animation: light 4s ease-in-out infinite; transition: 0.5s; } .img-full:hover { transform: scale(1.15) rotate(720deg); } @keyframes light { 0% { box-shadow: 0 0 4px #f00; } 25% { box-shadow: 0 0 16px #0f0; } ``` 如果只需要单色呼吸光环，例如红色，可以将关键帧动画改为： ```css @keyframes light { from { box-shadow: 0 0 4px #f00; } to { box-shadow: 0 0 16px #f00; } } ``` ------------ ### 2.左侧文章图标和评论头像鼠标悬停旋转 <center>[](https://ae01.alicdn.com/kf/H119be64d1d754863a1a47519e516dffdA.jpg "动态图片")</center> ```css .img-square { transition: all 0.3s; } .img-square:hover { transform: rotate(360deg); } ``` ------------ ### 3.文章内打赏图标跳动 <center>[](https://ae01.alicdn.com/kf/Hf1670c1bfdb744bdbc9e82da5863479e2.jpg "赞赏动态")</center> ```css .btn-pay { animation: star 0.5s ease-in-out infinite alternate; } @keyframes star { from { transform: scale(1); } to { transform: scale(1.1); } } ``` ### 4.彩色标签云 之前看过一个彩色标签云的插件，这里用js为标签随机添加上预先定义的颜色，每次刷新都会进行换色： <center>[](https://ae01.alicdn.com/kf/H23d9404613b94f02a0c52fb013081ea5u.jpg "彩虹色彩")</center> 如果主题中启用了pjax，还需要将上面代码添加到pjax回调函数中 ```css let tags = document.querySelectorAll("#tag_cloud-2 a"); let colorArr = ["#428BCA", "#AEDCAE", "#ECA9A7", "#DA99FF", "#FFB380", "#D9B999"]; tags.forEach(tag => { tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)]; tag.style.backgroundColor = tagsColor; }); ``` ------------ [Typecho博客及Handsome主题连接](https://pan.baidu.com/s/1d6Sxr44pyW1ILRN80b19eA "Typecho博客及Handsome主题连接") 提取码：z7y6 Last modification：June 27th, 2020 at 03:38 pm © 允许规范转载 Support 如果觉得我的文章对你有用，请随意赞赏 ×Close Appreciate the author Sweeping payments Pay by AliPay Pay by WeChat
