小编给大家分享一下怎么利用纯CSS实现头像旋转和发光的效果，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>亿速云-利用纯CSS实现头像旋转和发光的效果</title> </head> <style> /******************************** 设计思路如下： 头像显示最近一个联系人,慢旋转效果。 有新消息，头像增加闪耀效果并发光。 （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%; }</p> <p> /*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) } }</p> <p> /*sparkle 闪耀*/ .sparkle { -webkit-transition: all 1s; -moz-transition: all 1s; transition: all 1s;</p> <p> -webkit-animation: sparkle linear 2s 1.5s infinite; -moz-animation: sparkle linear 2s 1.5s infinite; animation: sparkle linear 2s 1.5s infinite; }</p> <p> @-webkit-keyframes sparkle { 0% { box-shadow: 0 0 0px 0 #b2ff1a; -webkit-transform: rotate(0deg); transform: rotate(0deg) } 50% {box-shadow: 0 0 20px 0 #1affff;} 100% { box-shadow: 0 0 0px 0 #b2ff1a; -webkit-transform: rotate(359deg); transform: rotate(359deg) } } @-moz-keyframes sparkle { 0% { box-shadow: 0 0 0px 0 #b2ff1a; -webkit-transform: rotate(0deg); transform: rotate(0deg) } 50% {box-shadow: 0 0 20px 0 #1affff;} 100% { box-shadow: 0 0 0px 0 #b2ff1a; -webkit-transform: rotate(359deg); transform: rotate(359deg) } } @-o-keyframes sparkle { 0% { box-shadow: 0 0 0px 0 #b2ff1a; -webkit-transform: rotate(0deg); transform: rotate(0deg) } 50% {box-shadow: 0 0 20px 0 #1affff;} 100% { box-shadow: 0 0 0px 0 #b2ff1a; -webkit-transform: rotate(359deg); transform: rotate(359deg) } } @keyframes sparkle { 0% { box-shadow: 0 0 0px 0 #b2ff1a; -webkit-transform: rotate(0deg); transform: rotate(0deg) } 50% {box-shadow: 0 0 20px 0 #1affff;} 100% { box-shadow: 0 0 0px 0 #b2ff1a; -webkit-transform: rotate(359deg); transform: rotate(359deg) } } /******************************** 设计思路如下： 头像显示最近一个联系人,慢旋转效果。 有新消息，头像增加闪耀效果并发光。 （spin旋转、sparkle闪耀发光） 实现： 用纯css实现。 ******************************/ </style></p> <p><body></p> <p> <div > <div class="chatPanel-toMin"> <div class="user-avatar"> <img class="sparkle spin" src="<a href="http://cdn.attach.w3cfuns.com/notes/pics/201609/05/105524viwldxgi3lg387jl.jpg">http://cdn.attach.w3cfuns.com/notes/pics/201609/05/105524viwldxgi3lg387jl.jpg</a>" alt=""> </div> </div> </div></p> <p></body> </html>以上是“怎么利用纯CSS实现头像旋转和发光的效果”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
