简单的css缩放动画,仿腾讯新闻的分享按钮和美团app底部的图标样式

最近看到一些好看的hover的图形缩放效果。然后自己就写了下，发现这2种效果都不错。如果伙伴们更好的实现方式可以在下面留言哦~

还有美团的效果，我就不展示了，喜欢的可以去app应用上看看。

这两种效果，其实实现的原理是一样的，就是用伪类选择器改变背景大小/图片大小。加一个过渡

    <!--腾讯新闻效果-->

    <a href="javascript:void(0);"  class="hover-body  hover-body-weixin">

        <i></i>

        <span></span>

    </a>

    <!--美图APP效果-->

    <a href="javascript:void(0);"  class="hover-body-app  third-party-app">

        <i></i>

    </a>

腾讯新闻小logo:外部的a标签实现点击跳转，我这里设置不跳转，i标签使用伪元素代表前景色和背景色，伪元素定位在里面，然后用缩放属性，在伪元素后面放过渡效果

.hover-body {

  position: relative;

  display: inline-block;

  width: 48px;

  height: 48px;

}

.hover-body:hover i::after {

  transform: scale(1);

}

.hover-body span {

  position: relative;

  display: block;

  width: 48px;

  height: 48px;

  background-size: 30px;

  background-position: center;

  background-repeat: no-repeat;

}

.hover-body i {

  position: absolute;

  top:;

  left:;

  width: 48px;

  height: 48px;

}

.hover-body i::before {

  content: '';

  border-radius: 50%;

  position: absolute;

  top:;

  left:;

  right:;

  bottom:;

}

.hover-body i::after {

  content: '';

  transition: all .3s;

  border-radius: 50%;

  position: absolute;

  top:;

  left:;

  right:;

  bottom:;

  transform: scale(0);

}

.hover-body.hover-body-weixin span {

  background-image: url(index.png);

}

.hover-body.hover-body-weixin i::before {

  background-color: pink;

}

.hover-body.hover-body-weixin i::after {

  background-color: palegoldenrod;

}

美团app仿效果：css,直接在i标签里放背景图片，设置伪元素before和after为2张图片，给图片放大小，加过渡

.hover-body-app{

    position: relative;

    display: inline-block;

    width: 48px;

    height: 48px;

    margin-left: 6%;

    margin-right: 6%;

}

.hover-body-app:hover  i::after{

    transform: scale(1);

}

.hover-body-app i{

    position: absolute;

    top:;

    left:;

    width: 48px;

    height: 48px;

}

.hover-body-app i::before{

    content: '';

    border-radius: 50%;

    position: absolute;

    top:;

    left:;

    right:;

    bottom:;

}

.hover-body-app i::after {

    content: '';

    transition: all .3s;

    border-radius: 50%;

    position: absolute;

    top:;

    left:;

    right:;

    bottom:;

    transform: scale(0);

}

.hover-body-app.third-party-app i::before {

    background: url(index.png);

    background-size: 30px;

    background-position: center;

    background-repeat: no-repeat;

}

.hover-body-app.third-party-app i::after {

    background: url(indexfull.png);

    background-size: 30px;

    background-position: center;

    background-repeat: no-repeat;

}

巴特西

简单的css缩放动画,仿腾讯新闻的分享按钮和美团app底部的图标样式

最近看到一些好看的hover的图形缩放效果。然后自己就写了下，发现这2种效果都不错。如果伙伴们更好的实现方式可以在下面留言哦~

最新文章

热门文章