如何用纯 CSS 创作六边形按钮特效
CSS 如何 按钮 特效 创作 用纯
2023-09-11 14:16:54 时间
效果预览
在线演示按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。
https://codepen.io/comehope/pen/xjoOeM
可交互视频教程
此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。
请用 chrome, safari, edge 打开观看。
源代码下载
本地下载每日前端实战系列的全部源代码请从 github 下载:
https://github.com/comehope/front-end-daily-challenges
代码解读
定义dom,容器中只包含 1 个按钮:
<nav>
<ul>
<li>Home</li>
</ul>
</nav>
定义按钮样式:
nav {
--h: 3em;
}
nav ul {
padding: 0;
}
nav ul li {
list-style-type: none;
width: calc(var(--h) * 1.732);
height: var(--h);
background-color: #333;
color: white;
font-family: sans-serif;
text-align: center;
line-height: var(--h);
}
用伪元素增加2个倾斜的矩形:
nav ul li {
position: relative;
}
nav ul li::before,
nav ul li::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: inherit;
height: inherit;
background-color: #333;
}
nav ul li::before{
transform: rotate(60deg) translateX(calc(var(--h) * -2));
}
nav ul li::after{
transform: rotate(-60deg) translateX(calc(var(--h) * 2));
}
增加鼠标划过效果:
nav ul li::before,
nav ul li::after {
z-index: -1;
filter: opacity(0);
transition: 0.3s;
}
nav ul li:hover::before {
filter: opacity(1);
transform: rotate(60deg) translateX(0);
}
nav ul li:hover::after {
filter: opacity(1);
transform: rotate(-60deg) translateX(0);
}
dom 中增加几个按钮,形成一组按钮:
<nav>
<ul>
<li>Home</li>
<li>Products</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
按钮之间为鼠标划过效果留出边距:
nav ul li {
margin: 2em;
}
再增加两组按钮:
<nav>
<ul>
<li>Home</li>
<li>Products</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
<nav>
<ul>
<li>Home</li>
<li>Products</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
<nav>
<ul>
<li>Home</li>
<li>Product Vs</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
最后,尝试一些变化:
nav {
--h: 3em;
}
nav:nth-child(1) {
--rate: 1.5;
--bgcolor: black;
}
nav:nth-child(2) {
--rate: 1.732;
--bgcolor: brown;
}
nav:nth-child(3) {
--rate: 2;
--bgcolor: green;
}
nav ul li {
width: calc(var(--h) * var(--rate));
background-color: var(--bgcolor);
}
nav ul li::before,
nav ul li::after {
background-color: var(--bgcolor);
}
大功告成!
相关文章
- 我是如何对网站CSS进行架构的
- css 使用以及查询网站
- CSS 奇思妙想边框动画
- 谈谈一些有趣的CSS题目(十一)-- reset.css 知多少?
- 【Css/小程序】如何实现div或view中的文字左右居中和垂直居中?(已解决:多行和单行自适应)
- CSS 将导航栏固定在窗口的顶部(fixed)
- CSS设置盒子容器(div)高度(height)始终为100%
- 如何去掉css 渐变时的锯齿效果
- 支持动图、一键生成,基于 React 的开源像素绘画应用 —— Pixel Art to CSS
- AngularJS动态设置CSS
- 如何用纯 CSS 创作一个晃动的公告板
- css CSS常见布局解决方案
- 复习CSS
- 《HTML、CSS、JavaScript 网页制作从入门到精通》——1.4 练习题
- 《21天学通HTML+CSS+JavaScript Web开发(第7版)》——1.7 作业
- css旋转属性如何理解
- webpack4+(打包后的文件分析+脚本打包+HTML插件+样式处理CSS+Less+css抽离压缩)
- css文字如何垂直居中?
- 浅析css动画知识:用法介绍(规则与关键帧)animation-delay为负值提前进行动画、动画函数(三次贝塞尔曲线与步骤缓动函数)补间动画与逐帧动画效果、如何控制动画运行或暂停及控制元素各阶段状态、动画循环次数与方向
- 浅析如何借助content属性显示CSS var变量值及计数器counter-reset和counter-increment介绍
- 纯CSS实现多行文字垂直居中几种方法解析
- 浅析如何让css元素左侧自动溢出(即 ... 溢出在左侧):direction 属性
- css弹性盒子-------桃园三兄弟之:flex-grow、flex-shrink、flex-basis详解
- CSS魔法堂:说说Float那个被埋没的志向
- [CSS][转载]内层div的margin-top影响外层div
- CSS学习---css基础知识0105
- 如何使用纯 CSS 创建翻牌动画
- 【代码片段】如何使用CSS来快速定义多彩光标
- 四个好看的CSS样式表格
- 玩坏css之border-radius属性
- CSS 发明者 Håkon Wium Lie 访谈--csdn zhangxin09