【组件】跳动的图标 动画

效果

组件代码

<!-- 图标跳动 -->
<template><div class="icon_bounce_com" :style="{ '--size': iconBouceSize }"><div class="bounce-icon"><img :src="iconObj[iconName]" alt="" /></div><div class="waves"><div class="wave"><img src="@/assets/images/screen-zhidu/bounce-jump.png" alt="" /></div><div class="wave"><img src="@/assets/images/screen-zhidu/bounce-jump.png" alt="" /></div></div><div class="bounce-bottom"></div></div>
</template><script>
import car from '@/assets/images/screen-zhidu/bounce-icon-car.png'
import car1 from '@/assets/images/screen-zhidu/bounce-icon-car1.png'
import car2 from '@/assets/images/screen-zhidu/bounce-icon-car2.png'
import warning from '@/assets/images/screen-zhidu/bounce-icon-warning.png'export default {name: 'IconBounceCom',props: {iconBouceSize: {type: String,default: '100px'},iconName: {type: String,retquired: true}},data() {return {iconObj: {jysg: car,sgzl: car1,ybsg: car2,yj: warning}}}
}
</script><style lang='scss' scoped>
.icon_bounce_com {$size: var(--size);position: relative;width: $size;height: $size;background: url('~@/assets/images/screen-zhidu/bounce-jump.png') bottom no-repeat;background-size: contain;&::before {content: '';position: absolute;bottom: 0;left: 0;width: 100%;height: 100%;background-image: url('~@/assets/images/screen-zhidu/bounce-bg.png');background-position-y: bottom;animation: bg 3s infinite;}@keyframes bg {0%,100% {opacity: 0.2;}50% {opacity: 1;}}.bounce-icon {width: 75%;display: inline-block;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);animation: bounce 3s infinite;img {width: 100%;}@keyframes bounce {0%,100% {top: 50%;}50% {top: 30%;}}}.waves {.wave {img {width: 100%;height: 100%;}position: absolute;bottom: 0;animation: wave 4s linear infinite;&:nth-child(2) {animation-delay: 2s;}@keyframes wave {0% {bottom: 0;}100% {bottom: 100%;opacity: 0;}}}}.bounce-bottom {position: absolute;bottom: -10px;left: 0;width: calc(#{$size} * 0.7071);height: calc(#{$size} * 0.7071);border: 3px solid #72c3f9;transform: rotateX(53deg) rotateZ(45deg) translateX(calc(#{$size} / 5));perspective: 1000px;filter: blur(5px);}
}
</style>

素材