CSS圆形放缩动漫简易完成

日期:2021-03-02 类型:科技新闻 

关键词:建站平台有哪些,如何建设网站,免费自助建站,如何建立一个网站,网站建站的

近期在做企业的登陆页,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;
            }
        }
    }
}

这样这个简易的圆形放缩动漫就进行啦。

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。

上一篇:纯HTML和CSS完成JD轮播图实际效果 返回下一篇:没有了