如何用纯 CSS 创作小球变矩形背景的按钮悬停效果
效果预览
在线演示
按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。
https://codepen.io/comehope/pen/yxbEzJ
可交互视频
此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。
请用 chrome, safari, edge 打开观看。
https://scrimba.com/p/pEgDAM/cGanPU6
源代码下载
本地下载
每日前端实战系列的全部源代码请从 github 下载:
https://github.com/comehope/front-end-daily-challenges
代码解读
定义 dom,导航中包含一个无序列表,列表中有一个列表项:
<nav><ul><li>home</li></ul>
</nav>
居中显示:
body {margin: 0;height: 100vh;display: flex;align-items: center;justify-content: center;background-color: lightyellow;
}
隐藏列表项前端的引导符号:
nav ul {padding: 0;list-style-type: none;
}
设置容器尺寸:
nav li {width: 8em;height: 2em;font-size: 25px;
}
设置文字样式:
nav li {font-size: 25px;text-align: center;line-height: 2em;font-family: sans-serif;text-transform: capitalize;
}
添加伪元素,伪元素是 2 个小球:
nav li {position: relative;
}nav li::before,
nav li::after {content: '';position: absolute;width: 0.6em;height: 0.6em;background-color: gainsboro;border-radius: 50%;
}
把小球定位在左右两端:
nav li::before {top: calc(50% - 0.6em / 2);left: 0;
}nav li::after {bottom: calc(50% - 0.6em / 2);right: 0;
}
接下来设置按钮悬停效果。
当鼠标悬停在按钮上时,让小球变为与容器大小相等的矩形:
nav li:hover::before,
nav li:hover::after {width: 100%;height: 100%;border-radius: 0;
}
第其中一个矩形稍向右下角错位,并且加深它的颜色,形成阴影效果:
nav li:hover::before {z-index: -1;top: 0;
}nav li:hover::after {z-index: -2;bottom: -0.4em;right: -0.4em;filter: brightness(0.8);
}
设置悬停的颜色,伪元素的矩形背景变为蓝色,文字变为白色:
nav li:hover {color: white;
}nav li:hover::before,
nav li:hover::after {background-color: dodgerblue;
}
设置缓动时间,其中伪元素的缓动时间函数用拟人的动画效果:
nav li {transition: 0.5s;
}nav li::before,
nav li::after {transition: 0.5s cubic-bezier(0.5, -0.5, 0.25, 1.5);
}
再增加几个按钮:
<nav><ul><li>home</li><li>products</li><li>services</li><li>contact</li></ul>
</nav>
最后,增加按钮之间的间距:
nav li {margin: 0.8em;
}
大功告成!
原文地址:https://segmentfault.com/a/1190000016257190
如何用纯 CSS 创作小球变矩形背景的按钮悬停效果相关推荐
- 如何用纯 CSS 创作一个小球上台阶的动画
如何用纯 CSS 创作一个小球上台阶的动画 效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/come ...
- 如何用纯 CSS 创作一个小球上台阶的动画 1
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/PBGJwL 可交互视频 ...
- 如何用纯 CSS 创作一个同心圆弧旋转 loader 特效
效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/OZmXQX 可交互视频教程 此视 ...
- 如何用纯 CSS 创作一个荧光脉冲 loader 特效
效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/erRzzR 可交互视频教程 此视 ...
- 如何用纯 CSS 创作一个冒着热气的咖啡杯
效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/xjXxoz 可交互视频教程 此视 ...
- 如何用纯 CSS 创作一组昂首阔步的圆点
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/ejrMKe 可交互视频 ...
- 如何用纯 CSS 创作一个渐变色动画边框
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/odpRKX 可交互视频教 ...
- 如何用纯 CSS 创作一组昂首阔步的圆点 1
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/ejrMKe 可交互视频 ...
- 前端每日实战:97# 视频演示如何用纯 CSS 创作一组昂首阔步的圆点
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/ejrMKe 可交互视频 此视频是可 ...
最新文章
- BZOJ 2734 [HNOI2012]集合选数 (状压DP、时间复杂度分析)
- python删除空白没有显示_删除Python字符串中的空白
- P4768 [NOI2018] 归程 Kruskal重构树 + 倍增 + 最短路
- 数据可视化【八】根据数据类型选择可视化方式
- 【从零开始自制CPU之学习篇00】开篇
- 如何避免大数据分析的失误
- JavaEE学习01--Tomcat服务器
- matlab cy68013,基于MATLAB的码垛机械手运动学分析与仿真
- 什么是SPA,如何实现SPA应用呢?
- 软考:嵌入式系统设计师
- Android基础整合项目之节日群发助手
- vue elementui 表格数据 时间格式转换
- 认识网络号与子网划分
- 做笔记就用印象笔记,支持录音做笔记(附插件下载,一键将网页内容保存笔记中进行编辑)...
- 给武则天找凤凰的java游戏_武则天称帝时,改国号为
- halcon改变图像大小
- LA 4394 String painter 区间DP -
- Virustotal——上传样本保存扫描结果
- 计算机控制菜单在哪里,电脑菜单在哪里
- Unity3D摄像机(Camera)跟随角色移动的代码控制和演示动画
热门文章
- OpenCV4每日一练day11:单目位姿估计
- python编码转换规范_Python转载[编码规范]
- mysql经典四表查询_mysql经典问题四表查询(教师,学生,成绩,课程表)
- html5画图论文结束语,基于HTML5 Canvas的画图板的设计与实现.doc
- cs寄存器 x86 特权模式_Windows操作系统管理进程和线程:内核模式和用户模式
- mysql procedure
- python Binary I/O
- gitlab protected branch
- CUDA TOOlkit Programming Guide 1.Introduction
- Pandas DateOffset