css 头像外圈白_利用纯CSS实现头像旋转和发光的效果

最新推荐文章于 2023-11-14 13:58:26 发布

呼PF

最新推荐文章于 2023-11-14 13:58:26 发布

阅读量394

点赞数

文章标签： css 头像外圈白

本文链接：https://blog.csdn.net/weixin_34025386/article/details/113015370

版权

这篇博客介绍了如何使用CSS实现头像的旋转和在有新消息时的闪耀发光效果。通过定义spin和sparkle关键帧动画，头像可以实现慢速旋转和动态发光，为用户界面增添交互感。

摘要由CSDN通过智能技术生成

效果图：

实例代码：

复制代码代码如下:

脚本之家-利用纯CSS实现头像旋转和发光的效果

/********************************

设计思路如下：

头像显示最近一个联系人,慢旋转效果。

有新消息，头像增加闪耀效果并发光。

(spin旋转、sparkle闪耀发光)

实现：

用纯css实现。

******************************/

.chatPanel-toMin{

position:absolute;

right:0;

top:100px;

width:65px;

height:60px;

border-radius:50% 0 0 50%;

background:#fff;

}

.user-avatar{

position:absolute;

right:0;

top:7px;

right:8px;

width:45px;

height:45px;

border-radius:50%;

border:1px solid #ddd;

}

.user-avatar img{

width:100%;

height:100%;

border-radius:50%;

}

/*spin旋转*/

.spin {

-webkit-animation:spin 5s infinite linear;

animation:spin 5s infinite linear

}

@keyframes spin {

0% {

-webkit-transform: rotate(0deg);

transform: rotate(0deg)

}

100% {

-webkit-transform: rotate(360deg);

transform: rotate(360deg)

}

/*sparkle 闪耀*/

.sparkle {

-webkit-transition: all 1s;

-moz-transition: all 1s;

transition: all 1s;

-webkit-animation: sparkle linear 2s 1.5s infinite;

-moz-animation: sparkle linear 2s 1.5s infinite;

animation: sparkle linear 2s 1.5s infinite;

}

@-webkit-keyframes sparkle {

0% {