按钮向上抖动效果怎么做

发布时间 2023-09-10 15:58:40作者: JS脚本

1

div里就写在class里面

这将为按钮添加一个名为bounce的关键帧动画,其中按钮将在不同的时间点上以一定的距离向上抖动。然后,通过将bounce_small_infinite类应用于按钮的父容器,您可以使按钮无限地应用这个抖动动画。

class=" bounce_small_infinite “

 

写在style里面 

<style>
                                                                
                                                                @keyframes bounce {
                                                                  0%, 20%, 50%, 80%, 100% {
                                                                    transform: translateY(0);
                                                                  }
                                                                
                                                                  40% {
                                                                    transform: translateY(-10px);
                                                                  }
                                                                
                                                                  60% {
                                                                    transform: translateY(-6px);
                                                                  }
                                                                }
                                                                
                                                                .bounce_small_infinite {
                                                                  animation: bounce 2s infinite;
                                                                }

                                                            </style>

 

 

 1