介绍 & lt; ! DOCTYPE html>
& lt; html lang=癳n"祝辞
& lt; head>
,& lt; meta charset=癠TF-8"比;
,& lt; title> -利用纯CSS实现头像旋转和发光的效果& lt;/title>
& lt;/head>
& lt; style>/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
,设计思路如下:
,头像显示最近一个联系人,慢旋转效果。
,有新消息,头像增加闪耀效果并发光。
,(自旋旋转,火花闪耀发光)
,实现:
,用纯css实现。
,* * * * * * * * * * * * * * * * * * * * * * * * * * * * * */.chatPanel-toMin{大敌;
位置:绝对的,才能
正确的才能:0;
上图:才能100 px;
宽度:65 px;才能
高度才能:60 px;
border - radius才能:50%,0,0,50%;
背景:# fff;才能
,,}
,.user-avatar {
位置:绝对的,才能
正确的才能:0;
上图:才能7 px;
右:才能8 px;
宽度:才能45 px;
高度才能:45 px;
border - radius才能:50%,,,,
边境才能:1 px solid # ddd;,,
,}
img, .user-avatar {
宽度:100%,才能
高度才能:100%;
border - radius才能:50%;
,}& lt;/p>
& lt; p>,/*旋转旋转*/,.spin {
,,,,-webkit-animation: spin 5 s infinite 线性;
,,,,动画:spin 5 s infinite 线性的
,}
,@keyframes spin {
,,,,0%,{
,,,,,,,,-webkit-transform:,旋转(0度);
,,,,,,,,变换:,旋转(0度)
,,,,}
,,,,100%,{
,,,,,,,,-webkit-transform:,旋转(360度);
,,,,,,,,变换:,旋转(360度)
,,,,}
,}& lt;/p>
& lt; p>,/* sparkle 闪耀*/,.sparkle {
,,-webkit-transition: all 1 s;
,,-moz-transition: all 1 s;
过渡:才能,all 1 s; & lt;/p>
& lt; p>,, -webkit-animation:, sparkle linear 2 s 1.5 s 无限;
,,-moz-animation: sparkle linear 2 s 1.5 s 无限;
动画:才能,sparkle linear 2 s 1.5 s 无限;
,}& lt;/p>
& lt; p>, @-webkit-keyframes sparkle {
,,,0%,{
,,,,,不必:,0,0,0 px 0, # b2ff1a;
,,,,,-webkit-transform:,旋转(0度);
,,,,,变换:,旋转(0度)
,,,}
50%,,,{不必:0,0,20 px 0, # 1 affff;}
100%的才能,{
,,,不必:,,0,0,0 px 0, # b2ff1a;
,,,-webkit-transform:,旋转(359度);
,,,,,变换:,旋转(359度)
,,,,}
,}
,@-moz-keyframes sparkle {
,,,0%,{
,,,,,不必:,0,0,0 px 0, # b2ff1a;
,,,,,-webkit-transform:,旋转(0度);
,,,,,变换:,旋转(0度)
,,,}
50%,,,{不必:0,0,20 px 0, # 1 affff;}
100%的才能,{
,,,不必:,,0,0,0 px 0, # b2ff1a;
,,,-webkit-transform:,旋转(359度);
,,,,,变换:,旋转(359度)
,,,,}
,}
,@-o-keyframes sparkle {
,,,0%,{
,,,,,不必:,0,0,0 px 0, # b2ff1a;
,,,,,-webkit-transform:,旋转(0度);
,,,,,变换:,旋转(0度)
,,,}
50%,,,{不必:0,0,20 px 0, # 1 affff;}
100%的才能,{
,,,不必:,,0,0,0 px 0, # b2ff1a;
,,,-webkit-transform:,旋转(359度);
,,,,,变换:,旋转(359度)
,,,,}
,}
,@keyframes sparkle {
,,,0%,{
,,,,,不必:,0,0,0 px 0, # b2ff1a;
,,,,,-webkit-transform:,旋转(0度);
,,,,,变换:,旋转(0度)
,,,}
50%,,,{不必:0,0,20 px 0, # 1 affff;}
100%的才能,{
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
小编给大家分享一下怎么利用纯CSS实现头像旋转和发光的效果,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!
代码如下:
