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

感想:简简单单的动画特效,位置,动画。

HTML代码:

<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>Products</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>

CSS代码:

html, body {
margin:;
padding:;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
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:;
--bgcolor: green;
}
nav ul{
padding:;
}
nav ul li{
position: relative;
list-style-type: none;
width: calc(var(--h) * var(--rate));
height: var(--h);
line-height: var(--h);
margin: 2em;
background-color: var(--bgcolor);
color: white;
font-family: sans-serif;
text-align: center;
}
/* 用伪元素增加2个倾斜的矩形 */
nav ul li::before,
nav ul li::after{
position: absolute;
top:;
left:;
content: '';
/* inherit : 继承 */
width: inherit;
height: inherit;
background-color: var(--bgcolor);
z-index: -1;
filter: opacity(0);
transition: 0.3s;
}
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:hover::before{
filter: opacity(1);
transform: rotate(60deg) translateX(0);
}
nav ul li:hover::after{
filter: opacity(1);
transform: rotate(-60deg) translateX(0);
}

32.纯 CSS 创作六边形按钮特效的更多相关文章

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

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

  2. 如何用纯 CSS 创作六边形按钮特效

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

  3. 1.纯 CSS 创作一个按钮文字滑动特效 + 弹幕(残缺)

    原文地址:1# 视频演示如何用纯 CSS 创作一个按钮文字滑动特效 扩展后地址:https://scrimba.com/c/cJkzMfd HTML代码: <html> <head& ...

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

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

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

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

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

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

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

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

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

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

  9. 38.纯 CSS 创作阶梯文字特效

    原文地址:https://segmentfault.com/a/1190000015107942 HTML code: <div class="container"> ...

随机推荐

  1. excel技巧--复制带excel侧边的表格

    假设要复制出带excel侧边的表格内容,则使用以下步骤: 1.选择要复制的表格: 2.选择“页面布局”->“标题”选项的“打印”打勾: 3.选择“开始”->复制旁的三角选项:复制为图片: ...

  2. chrome flash

    chrome://settings/content/flash 在Chrome地址栏中输入:chrome://settings/content/flash,进入Flash设置,勾选允许网站运行flas ...

  3. vscode修改code runner插件默认使用的编译器

    code runner的原理就是自动帮你完成在控制台中输入切换路径和编译源代码以及运行编译好的程序的指令 编译指令是根据配置文件中一开始写好的模板来执行的 不同语言对应一条指令,运行code runn ...

  4. vue-clil的快速搭建vue项目

    1.npm i vue-cli -g 全局安装 2.vue init webpack myProject 3.cd myProject 4.npm i 稍等片刻 完成运行下一步 5.npm run d ...

  5. ALGO-115_蓝桥杯_算法训练_和为T(枚举)

    问题描述 从一个大小为n的整数集中选取一些元素,使得它们的和等于给定的值T.每个元素限选一次,不能一个都不选. 输入格式 第一行一个正整数n,表示整数集内元素的个数. 第二行n个整数,用空格隔开. 第 ...

  6. ALGO-30_蓝桥杯_算法训练_入学考试DP)

    问题描述 辰辰是个天资聪颖的孩子,他的梦想是成为世界上最伟大的医师.为此,他想拜附近最有威望的医师为师.医师为了判断他的资质,给他出了一个难题.医师把他带到一个到处都是草药的山洞里对他说:“孩子,这个 ...

  7. LeetCode——12. Integer to Roman

    一.题目链接:https://leetcode.com/problems/integer-to-roman/ 二.题目大意: 给定一个整数,返回它的罗马数字的形式. 三.题解: 要想做出这道题目,首先 ...

  8. 将Json对象数组转化成JS Array数组

    private format(cards:any):Array<any>{ var result = new Array(); cards.forEach(element => { ...

  9. uoj#272. 【清华集训2016】石家庄的工人阶级队伍比较坚强

    http://uoj.ac/problem/272 这题的式子形式是异或卷积的三进制推广,因此可以设计一个类似fwt的变换,这里需要一个三次单位根$w$,满足$w^3\%p==1$且$(1+w+w^2 ...

  10. 【IIS错误 - HTTP 错误 500.19】HTTP 错误 500.19- Internal Server Error 错误解决方法(一)

    刚在本机部署了一个WebService测试,浏览的时候出现了“HTTP 错误 500.19 - Internal Server Error ”错误,如下图: 经过检查发现是由于先安装vs2008后安装 ...