首页 ?网站教程 收录推送中

前言

今天闲的无聊,看了看本博客的侧边栏美化程度,感觉很单调,突然就觉得头像应该美化一下,于是就写了一段代码来美化头像。

截图

请输入图片描述

教程

以下代码写在CSS里面即可,此代码中的CSS选择器一定要和你网页头像的CSS选择器相符,边框颜色是动态的,头像也会旋转哦~

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




  • 51

    标签总数

  • 46

    文章总数

  • 116,795

    浏览总数

  • 0

    今日更新

  • 0

    稳定运行

欢迎访问尘烟博客,喜欢本站的话关注一下哦~

By:尘烟

文章评论