甘肃龙网

  1. 首页 > 生活 > >

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

生活百科按钮


/* 暂停动画 */.big-box:hover .button-box {animation: none;}
到这里，第二步就基本结束了，但是，这时，有的友友就问了，为什么你要在第四行多写一行加油按钮？问题很好，这个主要是为了使动画更连贯
去掉第四行加油按钮
是不是感觉坚强直接变为加油有点僵硬了，再来看看不去掉第四行的，是不是很流畅了

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;}/* 用来装四个盒子的按钮 *//* .big-box {width: 400px;height: 240px;} */.button-box {position: relative;display: flex;text-align: center;width: 400px;height: 60px;line-height: 60px;animation: move 10s ease 1s infinite;}/* 动画效果轮播效果 */@keyframes move {0% {transform: translate(0, 0px);}33.3% {transform: translate(0, -60px);}66.6% {transform: translate(0, -120px);}100% {transform: translate(0, -180px);}}/* 暂停动画 */.big-box:hover .button-box {animation: none;}/* 按钮效果 */.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;}
第三步
装饰按钮，使按钮的颜色逐渐改变，最后变为纯色
这里，我们只需要让背景颜色在鼠标放到按钮上时发生变化就行
用到了 :all 1.25s（all表示所有属性，1.25s表示从旧属性到新属性的过渡时间）
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;}/* 用来装四个盒子的按钮 *//* .big-box {width: 400px;height: 240px;} */.button-box {position: relative;display: flex;text-align: center;width: 400px;height: 60px;line-height: 60px;animation: move 10s ease 1s infinite;}/* 动画效果轮播效果 */@keyframes move {0% {transform: translate(0, 0px);}33.3% {transform: translate(0, -60px);}66.6% {transform: translate(0, -120px);}100% {transform: translate(0, -180px);}}/* 暂停动画 */.big-box:hover .button-box {animation: none;}/* 按钮效果 */.button1 {margin: auto;width: 80px;height: 40px;border: 2px solid rgb(236, 38, 38);cursor: pointer;transition: all 1.25s;}.button1:hover {background-color: rgb(236, 38, 38);}.button2 {margin: auto;width: 80px;height: 40px;border: 2px solid rgb(109, 109, 252);cursor: pointer;transition: all 1.25s;}.button2:hover {background-color: rgb(109, 109, 252);}.button3 {margin: auto;width: 80px;height: 40px;border: 2px solid rgb(11, 235, 11);cursor: pointer;transition: all 1.25s;}.button3:hover {background-color: rgb(11, 235, 11);}.button4 {margin: auto;width: 80px;height: 40px;border: 2px solid rgb(223, 218, 218);cursor: pointer;transition: all 1.25s;}.button4:hover {background-color: rgb(223, 218, 218);}
全部代码如下
HTML代码
命中不缺狗————


上一篇：Java 压缩20M文件从30秒到1秒的优化过程，还不相信？

下一篇：电脑小技巧系列——私密文件的保护措施