css 头像外圈白_css3头像显示

.box {

position: relative;

margin: 0 auto;

width: 200px;

height: 200px;

border-radius: 50%;

border: 1px solid rgba(235, 235, 235, .3);

overflow: hidden;

}

.box:after {

content: '';

width: 160px;

height: 160px;

border-radius: 50%;

background: rgb(255, 255, 255);

transition: .3s all linear;

opacity: 0;

position: absolute;

left: 0;

top: 0;

right: 0;

bottom: 0;

transform: scale(0);

margin: auto;

background: url(http://www.jq22.com/demo/jQueryHover201706082104/img/2.png) no-repeat center 0px / cover;

}

.fb {

position: absolute;

width: 200px;

height: 200px;

border-radius: 50%;

opacity: .4;

transition: .3s all ease-in;

}

.fb:nth-child(1) {

background: rgba(255, 0, 0, 1);

transform: translateX(0)translateY(-100px);

}

.fb:nth-child(2) {

background: rgba(255, 165, 0, 1);

transform: translateX(70.7px)translateY(-70.7px);

}

.fb:nth-child(3) {

background: rgba(255, 255, 0, 1);

transform: translateX(100px)translateY(0);

}

.fb:nth-child(4) {

background: rgba(0, 255, 0, 1);

transform: translateX(70.7px)translateY(70.7px);

}

.fb:nth-child(5) {

background: rgba(0, 127, 255, 1);

transform: translateX(0)translateY(100px);

}

.fb:nth-child(6) {

background: rgba(0, 0, 255, 1);

transform: translateX(-70.7px)translateY(70.7px);

}

.fb:nth-child(7) {

background: rgba(139, 0, 255, 1);

transform: translateX(-100px)translateY(0);

}

.fb:nth-child(8) {

background: rgba(255, 0, 0, 1);

transform: translateX(-70.7px)translateY(-70.7px);

}

.box:hover::after {

transform: scale(1);

opacity: .7;

}

.box:hover .fb:nth-child(1) {

background: rgba(255, 0, 0, 1);

transform: translateX(0)translateY(-20px);

}

.box:hover .fb:nth-child(2) {

background: rgba(255, 165, 0, 1);

transform: translateX(-14.14px)translateY(14.14px);

}

.box:hover .fb:nth-child(3) {

background: rgba(255, 255, 0, 1);

transform: translateX(20px)translateY(0);

}

.box:hover .fb:nth-child(4) {

background: rgba(0, 255, 0, 1);

transform: translateX(14.14px)translateY(14.14px);

}

.box:hover .fb:nth-child(5) {

background: rgba(0, 127, 255, 1);

transform: translateX(0)translateY(20px);

}

.box:hover .fb:nth-child(6) {

background: rgba(0, 0, 255, 1);

transform: translateX(-14.14px)translateY(14.14px);

}

.box:hover .fb:nth-child(7) {

background: rgba(139, 0, 255, 1);

transform: translateX(-20px)translateY(0);

}

.box:hover .fb:nth-child(8) {

background: rgba(255, 0, 0, 1);

transform: translateX(-14.14px)translateY(-14.14px);

}