效果预览

在线演示

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

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. python-线性回归预测

    导入包 # Required Packages import matplotlib.pyplot as plt import numpy as np import pandas as pd from ...

  2. Java读取根据HTML模板生成HTML页面

    首先,我们需要一个html模板: <html> <head> <title>###title###</title> <meta http-equi ...

  3. springboot+dubbo+zookeeper+mybatis

    参考地址:https://www.cnblogs.com/gaopengfirst/p/9555240.html 首先创建一个maven项目: 再在该父项目中创建3个module,分别是:provid ...

  4. Java内存缓存-通过Google Guava创建缓存

    谷歌Guava缓存 Guava介绍 Guava是Google guava中的一个内存缓存模块,用于将数据缓存到JVM内存中.实际项目开发中经常将一些公共或者常用的数据缓存起来方便快速访问. Guava ...

  5. [论文理解] An Analysis of Scale Invariance in Object Detection – SNIP

    An Analysis of Scale Invariance in Object Detection – SNIP 简介 小目标问题一直是目标检测领域一个比较难解决的问题,因为小目标提供的信息比较少 ...

  6. Hibernate系列1:入门程序

    1.传统的java数据库连接 在传统的开发中,如果要建立java程序和数据库的连接,通常采用JDBC或者Apache Commons DbUtils开发包来完成.他们分别有以下特点: JDBC: 优点 ...

  7. ZT:我们身边大多数的事都是暂时性的

    1. 家庭放在首位. 2. 戒酒能有助于身体健康. 3. 经常跑步以及运动有益于身心健康. 4. 保证心胸开阔.让爱自动来到你的身边,而不需要你自己去拼命寻找. 5. 区分优秀的导师和老师.不断提升自 ...

  8. 2019-8-13未命名文件 sdfsdfsdfsdfsdfsdf

    2019-8-13未命名文件 sdfsdfsdfsdfsdfsdf 新建模板小书匠 欢迎使用 小书匠(xiaoshujiang)编辑器,您可以通过 小书匠主按钮>模板 里的模板管理来改变新建文章 ...

  9. Session案例-用户登录场景

    package com.loaderman.demo; import java.io.IOException; import java.io.PrintWriter; import javax.ser ...

  10. 爬虫 lxml 模块

    Xpath 在 XML 文档中查找信息的语言, 同样适用于 HTML 辅助工具 Xpath Helper Chrome插件  快捷键 Ctrl + shift + x XML Quire xpath ...