当前位置：首页 > news >正文

动画震动效果

news 来源：原创 2025/5/1 12:06:01

项目场景：

提示：这里简述项目相关背景：

在有的相关目中特别是在C端一般都要求做的炫酷一些，这就需要一些简易的动画效果，这里就弄了一个简易的震动的效果如下视频所示

让图标一大一小的震动视频

分析：

提示：这里填写问题的分析：

首先需要准备的东西，就是了解动画animation属性

.element {

animation: animationName duration timing-function delay iteration-count direction;

}

动画的属性
`animation-name`	此属性用于指定要绑定到选择器的关键帧的名称。
`animation-duration`	它定义了动画完成一个完整周期所需的时间长度，该时间长度可以设置为秒（s）或毫秒（ms）。值得注意的是，该属性必须明确指定，因为其默认值为0，若设置为0，则动画将不会开始播放。
`animation-timing-function`	此属性用于指定动画在完成一个周期时的时间曲线，例如选择线性或缓动等方式。它决定了动画在整个周期内的速度变化情况。
`animation-delay`	该属性用于设定动画开始前的延迟时间，同样支持秒（s）或毫秒（ms）为单位。通过此属性，我们可以灵活地控制动画的起始时间。
`animation-iteration-count`	此属性用于设定动画的循环播放次数。用户可以指定一个具体的数字，或者使用`infinite`关键字来让动画无限循环播放。
`animation-direction`	这个属性决定了动画在每次循环时是否应该反向播放。其可选值包括`normal`（正常播放，即从起始状态到结束状态）、`reverse`（反向播放，即从结束状态到起始状态）、`alternate`（正常播放后反向播放，即交替进行）以及`alternate-reverse`（反向播放后正常播放，也即交替进行，但顺序相反）。
`animation-fill-mode`	此属性用于定义动画在开始前和结束后的状态，例如元素是可见还是隐藏。其可选值包括`none`（动画执行完毕后，元素回到原始位置，这是默认设置）、`forwards`（动画结束后，元素会停留在结束时的位置）、`backwards`（在动画开始前的延时阶段，元素会预先置于动画的起始位置）以及`both`（结合了`forwards`和`backwards`的效果）。

解决方案：

提示：这里填写该问题的具体解决方案：

<template><div class="wmax500 flexBe borderBG padTB25 padLR15 h100B cardBox"><div class="marginB20 iconBox marginR25"><i :class="props.icon" class="iconfont fontS30 fontW4 colorGreen hoverS "></i></div><div class=""><div class="hoverS hoverGreen fontS18 fontW7 marginB25"><span>{{props.title}}</span></div><div class="lineH30 fontS14"><span>{{props.text}}</span></div></div></div>
</template><script lang="ts" setup>
import {reactive,toRefs,ref,Ref,PropType,onMounted,onBeforeUnmount,
} from "vue"
const props=defineProps({title:{type:String,},text:{type:String,},icon:{type:String,}
})
onMounted(()=>{console.log()
})
onBeforeUnmount(()=>{console.log()
})</script><style lang="less" scoped>.borderBG{border: 1px solid #eeeeee;background-color: #fafafa;border-radius: 4px;
}
.iconBox{color:#00ac1f ;padding-top: 10px;padding-bottom: 10px;padding-left: 10px;padding-right: 10px;border-radius: 50%;border: 1px solid #00ac1f;text-align: center;
}
.wmax500{max-width: 400px;min-width: 300px;
}
// =============================================核心
// 父（外层.cardBox）hover 的时候 子（.iconBox）的变化
.cardBox:hover .iconBox{animation: shake 0.5s;
}
@keyframes shake {0% {/* 初始状态 */transform: scale(0.8);opacity: 0;}25%{/* 进行中的状态 */transform: scale(1.1);opacity: 0.8;}50% {/* 进行中的状态 */transform: scale(0.8);opacity: 1;}75% {/* 进行中的状态 */transform: scale(1.1);opacity: 1;}100% {/* 结束状态 */transform: scale(1);opacity: 1;}
}
</style>