分享学习记录
互联网技术知识

Joe主题的头像实现呼吸灯的方法

typecho主题实现的效果就是点击头像或电脑端停留在头像上面会旋转,其实是没什么用的,算是无用且美化的功能吧。

<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> 里面。

赞(0)
文章名称:《Joe主题的头像实现呼吸灯的方法》
文章链接:https://www.bailuze.com/19497.html
本站所有文章,如无特殊说明或标注,均为本站原创发布。任何在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
本站专注于百度、搜狗、360、谷歌、bing等常见搜索引擎的优化,关键词排名的提高,诚意咨询邮箱526009505@qq.com
分享到