css3圆形头像扩散发光特效

image.png

image.png

body
{
    align-items:center;
    background:#222;
    display:flex;
    height:100%;
    justify-content:center;
    margin:0;
}

html
{
    height:100%;
}

.avatar
{
    height:200px;
    position:relative;
    width:200px;
}

.avatar img
{
    border-radius:9999px;
    height:100%;
    position:relative;
    width:100%;
    z-index:2;
}

25%
{
    border-color:hsl(90,100%,50%);
}

50%
{
    border-color:hsl(180,100%,50%);
}

75%
{
    border-color:hsl(270,100%,50%);
}

100%
{
    border-color:hsl(360,100%,50%);
}

.avatar::before,.avatar::after
{
    -webkit-animation:pulse 2s linear infinite;
    animation:pulse 2s linear infinite;
    border:#fff solid 8px;
    border-radius:9999px;
    box-sizing:border-box;
    content:' ';
    height:140%;
    left:-20%;
    opacity:.6;
    position:absolute;
    top:-20%;
    transform:scale(0.714);
    width:140%;
    z-index:1;
}

.avatar::after
{
    -webkit-animation-delay:1s;
    animation-delay:1s;
}

.avatar:hover img
{
    content:url('http://s.blixt.org/hypnotoad.jpg');
}

.avatar:hover::before,.avatar:hover::after
{
    -webkit-animation:pulse 1s linear infinite,cycle-colors 6s linear infinite;
    animation:pulse 1s linear infinite,cycle-colors 6s linear infinite;
}

.avatar:hover::after
{
    -webkit-animation-delay:.5s;
    animation-delay:.5s;
}