效果预览

在线演示

按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。

https://codepen.io/comehope/pen/xjoOeM

可交互视频教程

此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。

请用 chrome, safari, edge 打开观看。

https://scrimba.com/c/cQ74NAJ

源代码下载

本地下载

每日前端实战系列的全部源代码请从 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);
}

大功告成!

原文地址:https://segmentfault.com/a/1190000015020964

如何用纯 CSS 创作六边形按钮特效的更多相关文章

  1. 前端每日实战:32# 视频演示如何用纯 CSS 创作六边形按钮特效

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/xjoOeM 可交互视频教程 此视频 ...

  2. 32.纯 CSS 创作六边形按钮特效

    原文地址:https://segmentfault.com/a/1190000015020964 感想:简简单单的动画特效,位置,动画. HTML代码: <nav> <ul> ...

  3. 如何用纯 CSS 创作一个按钮文字滑动特效

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. 在线预览 https://codepen.io/zhang-ou/pen/GdpPLE 可交互视频教 ...

  4. 前端每日实战:147# 视频演示如何用纯 CSS 创作透视按钮的悬停特效

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/qJEdKb 可交互视频 此视频是可 ...

  5. 前端每日实战:1# 视频演示如何用纯 CSS 创作一个按钮文字滑动特效

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/zhang-ou/pen/GdpPLE 可交互视频教程 此视频 ...

  6. 如何用纯 CSS 创作文本滑动特效的 UI 界面

    效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/QrxxaW 可交互视频教 ...

  7. 前端每日实战:21# 视频演示如何用纯 CSS 创作文本滑动特效的 UI 界面

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/QrxxaW 可交互视频教程 此视频 ...

  8. 如何用纯 CSS 创作阶梯文字特效

    效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/MXYBEM 可交互视频教 ...

  9. 前端每日实战:38# 视频演示如何用纯 CSS 创作阶梯文字特效

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/MXYBEM 可交互视频教程 此视频 ...

随机推荐

  1. [c++] C++中public、protected、private的区别

    转:https://blog.csdn.net/vanturman/article/details/79393317 第一: private,public,protected的访问范围: privat ...

  2. vue添加外部js

    1.新建节点 const s = document.createElement("script"); 2.设置节点属性 s.type = "text/javascript ...

  3. js基础( js嵌入方式、输出语句)

    s现在的作用 1.验证表单(以前的网速慢)  2.页面特效 (PC端的网页效果)  3.移动端 (移动 web 和app)  4.异步和服务器交互(ajax)  5.服务器端开发 (nodejs)   ...

  4. Solr 5.2.1 部署并索引Mysql数据库

    1.Solr简介 Solr是一个高性能,采用Java5开发,SolrSolr基于Lucene的全文搜索服务器.同时对其进行了扩展,提供了比Lucene更为丰富的查询语言,同时实现了可配置.可扩展并对查 ...

  5. Anaconda官网下载太慢/出错,以及Anaconda下载包又慢又出错的总体方法,应该如何快速下载,使用上海科技大学的开源镜像站即可

    1.最新更新:清华源和中科大源都已经挂了,不要再用他们的镜像源了!!!用上海科技大学的镜像!!!! 2.其次,CSDN上大多的快速装包法都在现在(2019.5.11)出现了问题,也不全,本文是亲自实践 ...

  6. 往Angular应用程序中添加DevExtreme

    To start this tutorial, you need an Angular 5+ application created using the Angular CLI. Refer to t ...

  7. 如何查看 SELinux状态及关闭SELinux

    查看SELinux状态: 1./usr/sbin/sestatus -v      ##如果SELinux status参数为enabled即为开启状态 SELinux status:         ...

  8. [Java]用于将链表变成字符串并在元素之间插入分隔符的有用函数“String.join”

    将链表变成字符串并在元素之间插入分隔符,这种动作最常见于组合sql文“select a,b,c from tb”这种场景scenario,其中a,b,c你是存贮在链表中的, 如果要加逗号要么在循环中识 ...

  9. koa2环境搭建

    npm install -g koa-generator koa2 ssy-koa2 cd ssy-koa2 npm install

  10. LC 789. Escape The Ghosts

    You are playing a simplified Pacman game. You start at the point (0, 0), and your destination is(tar ...