css 头像右下角圆圈,CSS3 头像动效 - 悬停时透明圆形盖子旋转遮盖

CSS

语言：

CSSSCSS

确定

@import url(https://fonts.googleapis.com/css?family=Oswald:400,300);

body {

background: #333;

}

.center {

display: block;

position: relative;

width: 200px;

height: 200px;

cursor: pointer;

background: url(/assets/coolgirl.jpg);

background-size: 100%;

background-position: top left;

border-radius: 100%;

margin: 100px auto;

-webkit-transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);

transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);

box-shadow: 0px 5px 10px #000;

}

.center:hover {

box-shadow: 0px 5px 20px #000;

background-size: 115%;

}

.center:hover .outside {

-webkit-transform: rotate(-45deg) translate(0px) rotate(-315deg);

-ms-transform: rotate(-45deg) translate(0px) rotate(-315deg);

transform: rotate(-45deg) translate(0px) rotate(-315deg);

background: rgba(22, 160, 133, 0.35);

width: 200px;

letter-spacing: 10px;

line-height: 200px;

height: 200px;

margin-top: -100px;

margin-left: -100px;

-webkit-transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1), letter-spacing 1.5s ease-out;

transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1), letter-spacing 1.5s ease-out;

}

.center .outside {

display: block;

position: absolute;

line-height: 100px;

text-align: center;

letter-spacing: 4px;

font-weight: 300;

color: #fff;

font-family: Oswald;

border-radius: 100%;

width: 100px;

height: 100px;

background: #16a085;

left: 50%;

top: 50%;

margin-top: -50px;

margin-left: -50px;

-webkit-transform: rotate(-180deg) translate(-100px) rotate(180deg);

-ms-transform: rotate(-180deg) translate(-100px) rotate(180deg);

transform: rotate(-180deg) translate(-100px) rotate(180deg);

box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.5);

-webkit-transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);

transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);

}

.center .outside span {

letter-spacing: 0;

}