近期在做企业的登陆页，UE同学期待第3方登陆的标志在hover的情况下有1个圆形的放缩实际效果（原话是波纹实际效果-_-||），实际效果参照腾迅新闻和网易新闻的共享按钮。
腾迅新闻的共享按钮hover实际效果（新闻网页页面）：
网易新闻的共享按钮hover实际效果（新闻网页页面）：
看了1下这两个网页页面的源代码，关键是用了 transform:scale() 和 transition ，自身的最后的完成实际效果以下：
完成思路大致是效仿网易新闻的，合理布局以下：
<a href="" class="third-party third-party-weixin">
<i></i>
<span></span>
</a>
外层的a标识用于总体器皿和自动跳转，里层的i标识应用伪元素::before和::after各自做为情况色和市场前景色，这两个伪元素均肯定精准定位，竖直水平垂直居中，::after设定放缩特性 transform:scale(0) ,过渡动漫特性 transition: all .3s ，一切正常状况下::before可见，当hover的情况下::after设定放缩特性 transform:scale(1) ，两个邻近肯定精准定位元素在不设定z-index的状况下，文本文档流在后的元素在上，而且在有过渡动漫特性 transition 的状况下完成了放缩动漫实际效果。
span标识用于展现logo，能够是照片或web字体样式，要是全透明便可以，这里用了照片。 CSS（此处应用的是sass）以下：
.third-party {
position: relative;
// 以便适配firefox务必要变为block或inline-block
display: inline-block;
width: 48px;
height: 48px;
margin: {
left: 6%;
right: 6%;
}
&:hover {
i {
&::after {
transform: scale(1);
}
}
}
span {
// position: relative是以便适配firefox和IE
position: relative;
display: block;
width: 48px;
height: 48px;
background-size: 30px;
background-position: center;
background-repeat: no-repeat;
}
i {
position: absolute;
top: 0;
left: 0;
width: 48px;
height: 48px;
&::before {
content: '';
border-radius: 50%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
&::after {
content: '';
transition: all .3s;
border-radius: 50%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
transform: scale(0);
}
}
&.third-party-weixin {
span {
background-image: url(../images/login/weixin⑹4.png);
}
i {
&::before {
background-color: #20a839;
}
&::after {
background-color: #30cc54;
}
}
}
}
这样这个简易的圆形放缩动漫就进行啦。
以上便是本文的所有內容，期待对大伙儿的学习培训有一定的协助，也期待大伙儿多多适用脚本制作之家。
Copyright © 2002-2020 免费自助建站_手机建站平台_wap建站_免费自助建站平台_H5网站,H5模板建站 版权所有 （网站地图） 粤ICP备10235580号