首页 前端知识 【css快速实现--抖动提醒】

【css快速实现--抖动提醒】

2024-08-18 22:08:33 前端知识 前端哥 890 302 我要收藏

 

 这个动画是如何实现的呢,其实很简单,让我们来看看。

1、首先最重要的当然就是css代码了,通过帧动画实现该效果,代码如下

@keyframes shake {

 10%,

  90% {

    transform: translate3d(-1px, 0 0);

  }

  20%,

  80% {

    transform: translate3d(2px, 0, 0);

  }

  30%,

  50%,

  70% {

    transform: translate3d(-4px, 0, 0);

  }

  40%,

  60% {

    transform: translate3d(4px, 0, 0);

  }

}

.apply-shake {

  animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;

}

2、通过使用apply-shake,就可以添加到任何需要抖动效果的代码上,就举个例子,就如最开始所展示的画面一样,添加一个button按钮,通过点击按钮,判断输入的昵称是否为空,为空的话就进行抖动提示,代码如下:

让我们逐步来分解一下,

1、首先我们把apply-shake以:class的形式绑定在input框在上,为其添加抖动效果,再通过v-model双向绑定一个name属性 。

2、然后通过设置的shakeTaxtName变量,先将它设为false的一个状态(一开始是不展示的)。

3、其次再在方法中,实现通过判断name值是否为空,转换shakeTaxtName的一个状态,为空的话就转化为true,于是就有了抖动的效果。

4、最后需要添加一个setTimeout定时器设置抖动的结束时间。

这样一个具有抖动效果的页面就实现啦,运用的场景有很多,大家可以多多尝试。

这个方法很有趣,我也是在抖音关注的程序员小山与bug这位博主发布的视频中所学习到的,大家可以去关注关注,有很多有趣的知识值得我们去学习。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/16012.html
标签
评论
发布的文章

jQuery 教程 (一)

2024-08-24 23:08:43

select 多选联动

2024-08-24 23:08:41

jQuery2 高级教程(九)

2024-08-24 23:08:22

使用CDN提高jQuery加载速度

2024-08-24 23:08:21

jQuery2 秘籍(七)

2024-08-24 23:08:20

【ECharts】雷达图

2024-08-24 23:08:18

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!