如何用纯 CSS 创作六边形按钮特效
效果预览
按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。
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);
}
大功告成!
原文地址:https://segmentfault.com/a/1190000015020964
如何用纯 CSS 创作六边形按钮特效的更多相关文章
- 前端每日实战:32# 视频演示如何用纯 CSS 创作六边形按钮特效
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/xjoOeM 可交互视频教程 此视频 ...
- 32.纯 CSS 创作六边形按钮特效
原文地址:https://segmentfault.com/a/1190000015020964 感想:简简单单的动画特效,位置,动画. HTML代码: <nav> <ul> ...
- 如何用纯 CSS 创作一个按钮文字滑动特效
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. 在线预览 https://codepen.io/zhang-ou/pen/GdpPLE 可交互视频教 ...
- 前端每日实战:147# 视频演示如何用纯 CSS 创作透视按钮的悬停特效
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/qJEdKb 可交互视频 此视频是可 ...
- 前端每日实战:1# 视频演示如何用纯 CSS 创作一个按钮文字滑动特效
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/zhang-ou/pen/GdpPLE 可交互视频教程 此视频 ...
- 如何用纯 CSS 创作文本滑动特效的 UI 界面
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/QrxxaW 可交互视频教 ...
- 前端每日实战:21# 视频演示如何用纯 CSS 创作文本滑动特效的 UI 界面
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/QrxxaW 可交互视频教程 此视频 ...
- 如何用纯 CSS 创作阶梯文字特效
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/MXYBEM 可交互视频教 ...
- 前端每日实战:38# 视频演示如何用纯 CSS 创作阶梯文字特效
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/MXYBEM 可交互视频教程 此视频 ...
随机推荐
- Linux网络编程二、tcp连接API
一.服务端 1.创建套接字: int socket(int domain, int type, int protocol); domain:指定协议族,通常选用AF_INET. type:指定sock ...
- [CSP-S模拟测试]:二叉搜索树(DP+贪心)
题目传送门(内部题99) 输入格式 第一行一个整数$n$,第二行$n$个整数$x_1\sim x_n$. 输出格式 一行一个整数表示答案. 样例 样例输入: 58 2 1 4 3 样例输出: 数据范围 ...
- 关于一次同余方程的一类解法(exgcd,CRT,exCRT)
1.解同余方程: 同余方程可以转化为不定方程,其实就是,这样的问题一般用拓展欧几里德算法求解. LL exgcd(LL a,LL b,LL &x,LL &y){ if(!b){ x=; ...
- Linux 多线程按照线程顺序打印字符
#include <stdio.h> #include <pthread.h> #include <unistd.h> ; pthread_mutex_t mute ...
- koa 基础(二十六)数据库 与 art-template 模板 联动 --- 编辑数据、删除数据
1.通过 ObjectID 获取 _id 根目录/module/db.js /** * DB库 */ var MongoDB = require('mongodb'); var MongoClient ...
- 手机APP缓存的获取和清理功能的实现
package com.loaderman.appcachedemo; import android.content.pm.IPackageDataObserver; import android.c ...
- tab切换效果 网站中的图片自动切换
网站中的图片自动切换 今天上一套tab切换效果的代码 动图就自己实现吧! 下面贴HTML代码,大体分两部分,图片div和按钮div,代码很容易看懂~ <!DOCTYPE html> < ...
- [redis]redis五种数据类型和应用场景
一.String(字符串)字符串类型是redis最基础的数据结构,首先键是字符串类型,而且其他几种结构都是在字符串类型基础上构建的,所以字符串类型能为其他四种数据结构的学习尊定基础.字符串类型实际上可 ...
- npm install --save 和 npm install -d的区别
npm install -d 就是npm install --save-dev npm insatll -s 就是npm install --save 以前一直在纠结一个npm安装的包依赖管理的问题. ...
- Python3命名规范
1.模块 模块尽量使用小写命名,首字母保持小写,尽量不要用下划线(除非多个单词,且数量不多的情况) # 正确的模块名 import decoder import html_parser # 不推荐的模 ...