效果展示
思路上面效果可以概括为：
鼠标未停留时：button背景与body坚持一致（以黑色为例），文字为蓝色，同一时间button四周一条蓝色的线条一直围绕button旋转鼠标停留时：button按钮背景变为蓝色，之中文字变为黑色，同一时间发生阴影、倒影根据效果图可以得出实现的有的思路：
背景颜色的变化使用hover就可以实现难点在于四周的线条这里海轰的解决问题的办法是分为上下差不多四条线，赋予每一条线一个动作漫画，通过延时达到类似一条线的效果这里使用的蓝色：
蓝色：#03e9f4Demo代码html
<!DOCTYPE html><html lang=”en”><head> <meta chart=”UTF-8″> <meta
html,body{ margin: 0; height: 100%;}body{ display: flex; justify-content: center; align-items: center; background: black;}.btn{ width: 300px; height: 120px; font-family: ‘Lato’, sans-rif; font-weight: 500; font-size: 36px; color: #03e9f4; /* 字符间的距离 */ letter-spacing: 2px; background: transparent;散打刷图加点 border: none; position: relative; overflow: hidden; transition: 0.5s;}.btn:hover{ background: #03e9f4; color: black; box-shadow: 0 0 5px #03e9f4, 0 0 25px #03e9f4, 0 0 50px #03e9f4, 0 0 200px #03e9f4; /* 倒影 */-webkit-box-reflect:below 1px linear-gradient(transparent, #0005);}.btn span{ position: absolute; content: ”;}.btn span:nth-child(1){ top: 0; left: 0; width: 100%; height: 4px; animation: animate1 1s linear infinite; background: linear-gradient(90deg,transparent,#03e9f4);}@keyframes animate1{ 0%{ left: -100%; } 50%,100%{ left: 100%; }}.btn span:nth-child(2){ top: -100%; right: 0; width: 4px; height: 100%; background: linear-gradient(180deg,transparent,#03e9f4); animation: animate2 1s linear infinite; animation-delay: 0.25s;}@keyframes animate2{ 0%{ top: -100%; } 50%,100%{ top: 100%; }}.btn span:nth-child(3){ bottom: 0; right: 0; width: 100%; height: 4px; background: linear-gradient(270deg,transparent,#03e9f4); animation: animate3 1s linear infinite; animation-delay: 0.55s;}@keyframes animate3{ 0%{ right: -100%韦拔群; } 50%,100%{ right: 100%; }}.btn span:nth-child(4){ bottom: -100%; left: 0; width: 4px; height: 100%; background: linear-gradient(360d寒假见闻eg,transparent,#03e9f4); animation: animate4 1s linear infinite; animation-delay: 0.75s;}@keyframes animate4{ 0%{ bottom: -100%; } 50%,100%{ bottom: 100%; }}原理解答这里还是主要讲讲四周线条的动作漫画效果吧
四条线条的初始地点如下：
注：
这里将颜色改为红色，线条宽度为20px，便于研究这里说的初始地点是指动作漫画开始时的初始地点以一条线条（第一条）的动作漫画为例
其css设置为：必须定位 position:absolute top=0 left=0
初始地点如图：
第一条线条动作漫画需要实现的效果
线条头部从button最左端开始移动平行向右移动最终停下地点为：线条尾部到达button最右端最开始地点：
起始地点
最终地点：
末尾地点
根据上述思路，编编辑动作漫画代码
.btn span:nth-child(1){ top: 0; left: 100%; width: 100%; height: 20px; animation: animate1 1s linear infinite; background: linear-gradient(90deg,transparent,red);}// 动作漫画：从左到右 @keyframes animate1{ 0%{ left: -100%; } 50%,100%{ left: 100%; }效果如下：
我们的要求是：线条只要在button地区进动作画，很多地区玩家不可见
解决问题的办法也很简单：button中设置：overflow: hidden;
效果如下：
同理，再分别对很多三条边进行设置就可以了
第二条线效果：
第三条线效果：
第四条线条效果：
疑点详细解答疑点1估计细心的同伴会小心到
动作漫画animate1延迟为0动作漫画animate2延迟为0.25s动作漫画animate3延迟为0.5s动作漫画animate4延迟为0.75s为什么会这样设置呢？
emmm 这里就发表海轰自己的理解吧
首先，我们将每一个动作漫画的时光都地点为了 1s
为了达到连贯的效果，也就是：
线条1头部到达button最右端时，线条2头部恰好从button最上端向下开始移动线条2头部到达button最下端时，线条3头部恰好从button最右端向左开始移动线条3头部到达button最左端时，线条4头部恰好从button最下端开始向上移动线条4头部到达button最上端时，线条1头部恰好从button最左端开始向右移动依次循环
从上述的效果描述中，我们可以得知，从线条4头部到达最上端时，线条1恰好又进行第二次动作漫画
也就是每当动作漫画间隔了1s
每条线运行的时光又相同，所以在button上移动的时光也是相同的
均为 1s/4=0.25s
也就是说：线条1头部从button最左端到最右端，耗时0.25s
简单的理解：
每隔1s线条1就要出发一次 为了获得连贯效果，一定门槛1s之内，很多3条线都跑完button三条边 而跑完每一条边需要的时光又是一样的（这种是通过ambition设置的） 从而得出 每一条边需要 1s/4 = 0.25s
此时此刻，线条2才开始动作漫画，也就需要延时0.25s
同理，线条3、4 的延时也就累计就可以了
疑点2为什么动作漫画设置是0%-50%呢
@keyframes animate1{ 0%{ left: -100%; } 50%,100%{ left: 100%; }} 从疑点1的解答中，我们可以发现，每条线在button边运行的时光就只能为0.25s
线条从开始到结束，需要耗时 1s（也就是从0%-100%）
/* 假设这样设置 */@keyframes animate1{ 0%{ left: -100%; } 100%{ left: 100%; }}
因为移动速度为匀速（动作漫画属性设置了）
所以到50网球拍握法%需要耗时0.5s
也就是说：线条1运行在button上的时光为：0.5s
这与我们需要的0.25s就有区别
那么需要怎么办呢？
嘿嘿，这里我们将动作漫画属性改写一下：
@keyframes animate1{ 0%{ left: -100%; } 50%,100%{ left: 100%; }} 啥意思呢？
简单理二和解就是只用了百分之50的时光（0.5s）就从开始情况运行到了最终情况（0%-100%）
那么从0%-50%就只要0.25s了
注：这里海轰说的估计不是较好理解，但是自己心里了解咋回事，不太会描述，不懂的同伴可以查查ambition的讲解
符合门槛！
本文发布于:2023-03-31 14:38:45，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/904fcf64e2b4563e3e76a1d9eaf66848.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：「动画消消乐｜CSS」004.自定义按钮样式.doc
本文 PDF 下载地址：「动画消消乐｜CSS」004.自定义按钮样式.pdf
| 留言与评论（共有 0 条评论） |
