小编给大家分享一下怎么利用纯CSS实现头像旋转和发光的效果，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！代码如下:<!DOCTYPE html&g
小编给大家分享一下怎么利用纯CSS实现头像旋转和发光的效果，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
代码如下:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>编程网-利用纯CSS实现头像旋转和发光的效果</title></head><style> .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 { -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 { -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) } }</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">https://file.lsjlt.com/upload/202306/07/uv4xz5lzflf.jpg</a>" alt=""> </div> </div> </div></p><p></body></html>以上是“怎么利用纯CSS实现头像旋转和发光的效果”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网精选频道！
--结束END--
本文标题: 怎么利用纯CSS实现头像旋转和发光的效果
本文链接: https://www.lsjlt.com/news/255086.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2024-04-28
2024-04-28
2024-04-28
2024-04-28
2024-04-28
2024-04-28
2024-04-28
2024-04-28
2024-04-28
2024-04-28
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0