vue实现气泡运动撞击效果 vue实现气泡运动撞击效果

本文实例为大家分享了vue实现气泡运动撞击效果的具体代码，供大家参考，具体内容如下
封装组件

#main {position: relative; width: 100%; height: 100%; overflow: hidden; padding: 0; li {position: absolute; overflow: hidden; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; &.active {animation: scaleBox 1s 1; }@keyframes scaleBox {0% {transform: scale(1); }50% {transform: scale(1.2); }100% {transform: scale(1); }}div {span {display: block; width: 100%; color: #fff; text-align: center; }}}}

实现效果

【vue实现气泡运动撞击效果】以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。