杭州专业网站优化公司,网站后台文章添加成功 不显示,企业网站如何做架构图,抖音推广链接最近看到一些好看的hover的图形缩放效果。然后自己就写了下#xff0c;发现这2种效果都不错。如果伙伴们更好的实现方式可以在下面留言哦~ 还有美团的效果#xff0c;我就不展示了#xff0c;喜欢的可以去app应用上看看。 这两种效果#xff0c;其实实现的原理是一样的发现这2种效果都不错。如果伙伴们更好的实现方式可以在下面留言哦~ 还有美团的效果我就不展示了喜欢的可以去app应用上看看。 这两种效果其实实现的原理是一样的就是用伪类选择器改变背景大小/图片大小。加一个过渡 !--腾讯新闻效果--a hrefjavascript:void(0); classhover-body hover-body-weixini/ispan/span/a!--美图APP效果--a hrefjavascript:void(0); classhover-body-app third-party-appi/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: 0;left: 0;width: 48px;height: 48px;
}.hover-body i::before {content: ;border-radius: 50%;position: absolute;top: 0;left: 0;right: 0;bottom: 0;
}.hover-body i::after {content: ;transition: all .3s;border-radius: 50%;position: absolute;top: 0;left: 0;right: 0;bottom: 0;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: 0;left: 0;width: 48px;height: 48px;
}
.hover-body-app i::before{content: ;border-radius: 50%;position: absolute;top: 0;left: 0;right: 0;bottom: 0;
}
.hover-body-app i::after {content: ;transition: all .3s;border-radius: 50%;position: absolute;top: 0;left: 0;right: 0;bottom: 0;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;
} 更多专业前端知识请上
【猿2048】www.mk2048.com
