HTML与CSS——按钮鼠标悬浮动态效果和按钮自动轮播图（不用JavaScrip _按钮

【HTML与CSS——按钮鼠标悬浮动态效果和按钮自动轮播图（不用JavaScrip】今天，我们来学习按钮自动轮播图，并给按钮加一些小特效。
话不多说，先上特效：
好，那么接下来，我来说一下我的思路
先写好基本的框框（包括，按钮外面的框，按钮以及按钮的布局和大小）为按钮的总体加上动画（一行一行按钮向上翻）为小按钮加上小特效（鼠标放到按钮上，颜色缓慢变化）第一步
那么，要想写好第一步，就要知道这个动画是怎么进行的
首先，我们要写一个播放框，也就是按钮动画外面的大黑框框，然后再写一行一行的按钮，如下图
这里，我们给外面的黑框框加上 : (超出隐藏) 效果之后，下面的三行按钮就会被隐藏，简化界面，这样就可以写动画了，如下图
第一步，具体代码如下：
HTML代码
命中不缺狗————
CSS代码

文章插图

* {text-decoration: none;list-style: none;margin: 0 0;padding: 0 0;}/* 一个按钮大小的播放屏幕 */.big-box {width: 400px;height: 60px;position: relative;overflow: hidden;margin: auto;margin-top: 500px;border: 2px solid black;}.button-box {position: relative;display: flex;text-align: center;width: 400px;height: 60px;line-height: 60px;}.button1 {margin: auto;width: 80px;height: 40px;border: 2px solid rgb(236, 38, 38);cursor: pointer;}.button2 {margin: auto;width: 80px;height: 40px;border: 2px solid rgb(109, 109, 252);cursor: pointer;}.button3 {margin: auto;width: 80px;height: 40px;border: 2px solid rgb(11, 235, 11);cursor: pointer;}.button4 {margin: auto;width: 80px;height: 40px;border: 2px solid rgb(223, 218, 218);cursor: pointer;}

第二步
好的，接下来，我们来写第二步，那就是给一行一行的按钮加上动画，然后使每行按钮向上移动。
这里，我们使用 : ease 1s （创建动画，名字为move，共10秒，延迟一秒，循环播放），代码如下

.button-box {position: relative;display: flex;text-align: center;width: 400px;height: 60px;line-height: 60px;//创建动画效果animation: move 10s ease 1s infinite;}

:(x,y) （在x轴与y轴上移动指定的距离），在这里，因为我们每行按钮的高度为60px，故我们不移动x坐标，y轴移动-60px，代码如下

/* 动画效果轮播效果 */@keyframes move {0% {transform: translate(0, 0px);}33.3% {transform: translate(0, -60px);}66.6% {transform: translate(0, -120px);}100% {transform: translate(0, -180px);}}

暂停动画，使用 :none （动画消失）来暂停，当我们的鼠标放到按钮自动轮播界面，轮播就会暂停，代码如下