html css 圆形按钮 仿uc,一个简单的CSS3社交分享圆形按钮悬停动效

CSS

语言：

CSSSCSS

确定

body {

background-color: rgba(29, 161, 242, 0.05);

}

.social-container {

width: 400px;

margin: 40vh auto;

text-align: center;

}

.social-icons {

padding: 0;

list-style: none;

margin: 1em;

}

.social-icons li {

display: inline-block;

margin: 0.15em;

position: relative;

font-size: 1.2em;

}

.social-icons i {

color: #fff;

position: absolute;

top: 21px;

left: 21px;

transition: all 265ms ease-out;

}

.social-icons a {

display: inline-block;

}

.social-icons a:before {

transform: scale(1);

-ms-transform: scale(1);

-webkit-transform: scale(1);

content: " ";

width: 60px;

height: 60px;

border-radius: 100%;

display: block;

background: linear-gradient(45deg, #1DA1F2, #c648c8);

transition: all 265ms ease-out;

}

.social-icons a:hover:before {

transform: scale(0);

transition: all 265ms ease-in;

}

.social-icons a:hover i {

transform: scale(2.2);

-ms-transform: scale(2.2);

-webkit-transform: scale(2.2);

color: #1DA1F2;

background: -webkit-linear-gradient(45deg, #1DA1F2, #c648c8);

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

transition: all 265ms ease-in;

}

.social-icons a.social-square:before {

background: linear-gradient(45deg, #7b00e0, #ae31d9);

border-radius: 10%;

}

.social-icons a.social-square:hover:before {

transform: rotate(-180deg);

-ms-transform: rotate(-180deg);

-webkit-transform: scale(-180deg);

border-radius: 100%;

}

.social-icons a.social-square:hover i {

transform: scale(1.6);

-ms-transform: scale(1.6);

-webkit-transform: scale(1.6);

color: #fff;

transform: scale(1.6);

-webkit-text-fill-color: #fff;

}