前言 Hello！小伙伴！ 首先非常感谢您阅读海轰的文章，倘若文中有错误的地方，欢迎您指出～ 哈哈 自我介绍一下 昵称：海轰 标签：程序猿一只｜C选手｜学生 简介：因C语言结识编程，随后转入计算机专业，有幸拿过国奖、省奖等，已保研。目前正在学习C/Linux（真的真的太难了～） 学习经验：扎实基础 ...
转载
2021-04-12 23:47:25
308阅读
2评论
效果展示思路上面效果可以概括为：鼠标未停留时：蓝色（渐变）背景，正中文字为白色，button四角做了圆角处理鼠标停留时：button背景变成白色，文字变为蓝色，同时右上方、左下角同时延伸两条互相垂直的线条根据效果图可以得出实现的一些思路：背景、文字的颜色变化使用hover就可以实现右上角的两条线可以使用button的::before/::after伪类，结合transition，当鼠标停留时，实现
转载
2021-04-28 21:36:01
523阅读
2评论
Part1效果展示
上面效果可以概括为：Part2思路
鼠标未停留时：青色（渐变）背景，正中文字为白色，button四角做了圆角处理
鼠标停留时：浅青色背景从上至下，依次覆盖button
鼠标离开button时：浅青色背景从上至下，依次消失，button逐渐恢复原样
根据效果图可以得出实现的一些思路：
初始状态，设置button背景为渐变青色，中间文字为白色，做圆角、阴影处理
初看有两个
转载
2021-06-13 18:05:38
248阅读
前言Hello！小伙伴！ 首先非常感谢您阅读海轰的文章，倘若文中有错误的地方，欢迎您指出～ 哈哈 自我介绍一下 昵称：海轰 标签：程序猿一只｜C++选手｜学生 简介：因C语言结识编程，随后转入计算机专业，有幸拿过国奖、省奖等，已保研。目前正在学习C++/Linux（真的真的太难了～） 学习经验：扎实基础 + 多做笔记 + 多敲代码 + 多思考 + 学好英语！ 日常分享：微信公众号【海轰Pro】记录
原创
2023-01-17 08:08:32
47阅读
前言 Hello！小伙伴！ 首先非常感谢您阅读海轰的文章，倘若文中有错误的地方，欢迎您指出～ 哈哈 自我介绍一下 昵称：海轰 标签：程序猿一只｜C选手｜学生 简介：因C语言结识编程，随后转入计算机专业，有幸拿过国奖、省奖等，已保研。目前正在学习C/Linux（真的真的太难了～） 学习经验：扎实基础 ...
转载
2021-04-12 23:39:14
318阅读
2评论
前言 Hello！小伙伴！ 首先非常感谢您阅读海轰的文章，倘若文中有错误的地方，欢迎您指出～ 哈哈 自我介绍一下 昵称：海轰 标签：程序猿一只｜C选手｜学生 简介：因C语言结识编程，随后转入计算机专业，有幸拿过国奖、省奖等，已保研。目前正在学习C/Linux（真的真的太难了～） 学习经验：扎实基础 ...
转载
2021-04-12 23:55:56
1237阅读
2评论
前言Hello！小伙伴！首先非常感谢您阅读海轰的文章，倘若文中有错误的地方，欢迎您指出～哈哈 自我介绍一下昵称：海轰标签：程序猿一只｜C++选手｜学生简介：因C语言结识编程，随后转入计算机专业，有幸拿过国奖、省奖等，已保研。目前正在学习C++/Linux（真的真的太难了～）学习经验：扎实基础 + 多做笔记 + 多敲代码 + 多思考 + 学好英语！日常分享：微信公众号【海轰Pro】记录生活、学习点滴
转载
2021-04-02 13:27:54
253阅读
2评论
效果展示思路上面效果可以概括为：鼠标未停留时：button背景与body保持一致（以黑色为例），文字为蓝色，同时button四周一条蓝色的线条一直围绕button旋转鼠标停留时：button按钮背景变为蓝色，其中文字变为黑色，同时产生阴影、倒影根据效果图可以得出实现的一些思路：背景颜色的变化使用hover就可以实现难点在于四周的线条这里海轰的解决办法是分为上下左右四条线，赋予每一条线一个动画，通过
转载
2021-04-28 21:29:51
253阅读
2评论
效果展示思路上面效果可以概括为：鼠标未停留时：红蓝（渐变）背景，正中文字为白色，button四角做了圆角处理鼠标停留时：button背景变成白色，文字变为蓝色，边框四条直线产生汇聚效果，同时每条直线会有一个阴影的产生。根据效果图可以得出实现的一些思路：背景、文字的颜色变化使用hover就可以实现左/右两边的两条线可以使用button的::before/::after伪类，结合transition，
转载
2021-04-28 21:33:48
282阅读
2评论
Part1效果展示
上面效果可以概括为：Part2思路
鼠标未停留时：红蓝（渐变）背景，正中文字为白色，button四角做了圆角处理
鼠标停留时：button背景变成白色，文字变为蓝色，边框四条直线产生汇聚效果，同时每条直线会有一个阴影的产生。
根据效果图可以得出实现的一些思路：
背景、文字的颜色变化使用hover就可以实现
左/右两边的两条线可以使用button的::before/::a
转载
2021-06-13 18:06:58
344阅读
效果展示思路上面效果可以概括为：鼠标未停留时：青色（渐变）背景，正中文字为白色，button四角做了圆角处理鼠标停留时：浅青色背景从上至下，依次覆盖button鼠标离开button时：浅青色背景从上至下，依次消失，button逐渐恢复原样根据效果图可以得出实现的一些思路：初始状态，设置button背景为渐变青色，中间文字为白色，做圆角、阴影处理初看有两个过渡效果，其实是可以用一个元素的过渡tran
转载
2021-04-28 21:32:34
434阅读
2评论
Part1效果展示
Part2思路上面效果可以概括为：
鼠标未停留时：button背景与body保持一致（以黑色为例），文字为蓝色，同时button四周一条蓝色的线条一直围绕button旋转
鼠标停留时：button按钮背景变为蓝色，其中文字变为黑色，同时产生阴影、倒影
根据效果图可以得出实现的一些思路：
背景颜色的变化使用hover就可以实现
难点在于四周的线条
这里海轰的解决办法
转载
2021-06-13 18:04:07
312阅读
效果展示
上面效果可以概括为：思路
鼠标未停留时：蓝色（渐变）背景，正中文字为白色，button四角做了圆角处理
鼠标停留时：button背景变成白色，文字变为蓝色，同时右上方、左下角同时延伸两条互相垂直的线条
根据效果图可以得出实现的一些思路：
背景、文字的颜色变化使用hover就可以实现
右上角的两条线可以使用button的::before/::after伪类，结合transition
转载
2021-06-13 18:09:13
440阅读
index.css /* index.css是用来美化首页的 */ * { margin: 0; padding: 0; /* 內减模式 */ box-sizing: border-box; } li { list-style: none; } a { text-decoration: none;
原创
2022-06-26 00:03:26
97阅读
