300字范文 > 「HTML+CSS」--自定义按钮样式【004】

「HTML+CSS」--自定义按钮样式【004】

时间：2018-08-26 17:38:55

前言

Hello！小伙伴！
首先非常感谢您阅读海轰的文章，倘若文中有错误的地方，欢迎您指出～
哈哈自我介绍一下
昵称：海轰
标签：程序猿一只｜C++选手｜学生
简介：因C语言结识编程，随后转入计算机专业，有幸拿过国奖、省奖等，已保研。目前正在学习C++/Linux（真的真的太难了～）
学习经验：扎实基础 + 多做笔记 + 多敲代码 + 多思考 + 学好英语！
日常分享：微信公众号【海轰Pro】记录生活、学习点滴，分享一些源代码或者学习资料，欢迎关注～

效果展示

思路

上面效果可以概括为：

鼠标未停留时：button背景与body保持一致（以黑色为例），文字为蓝色，同时button四周一条蓝色的线条一直围绕button旋转鼠标停留时：button按钮背景变为蓝色，其中文字变为黑色，同时产生阴影、倒影

根据效果图可以得出实现的一些思路：

背景颜色的变化使用hover就可以实现难点在于四周的线条这里海轰的解决办法是分为上下左右四条线，赋予每一条线一个动画，通过延时达到类似一条线的效果

这里使用的蓝色：

蓝色：#03e9f4

Demo代码

HTML

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="style.css"><title>Document</title></head><body><button class="btn"><span></span><span></span><span></span><span></span>Haihong Pro</button></body></html>

CSS

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-serif;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(360deg,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

简单的理解：