效果预览

在线演示

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

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

可交互视频

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

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

https://scrimba.com/p/pEgDAM/ceBEytp

源代码下载

本地下载

每日前端实战系列的全部源代码请从 github 下载:

https://github.com/comehope/front-end-daily-challenges

代码解读

定义 dom,用 <nav>, <ul> , <li> 构建导航结构,每个 <li> 中包含表示气泡的 4 个 <span>

&lt;nav&gt;
&lt;ul&gt;
&lt;li&gt;
home
&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;/span&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/nav&gt;

居中显示:

body {
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: black;
}

设置按钮样式:

nav ul {
list-style-type: none;
margin: 0;
padding: 0;
} nav ul li {
--c: goldenrod;
color: var(--c);
font-size: 16px;
border: 0.3em solid var(--c);
border-radius: 0.5em;
width: 12em;
height: 3em;
text-transform: uppercase;
font-weight: bold;
font-family: sans-serif;
letter-spacing: 0.1em;
text-align: center;
line-height: 3em;
}

在按钮下面画出气泡:

nav ul li {
position: relative;
} nav ul li span {
position: absolute;
width: 25%;
height: 100%;
background-color: var(--c);
transform: translateY(150%);
border-radius: 50%;
}

把 4 个气泡并排摆放:

nav ul li span {
left: calc((var(--n) - 1) * 25%);
} nav ul li span:nth-child(1) {
--n: 1;
} nav ul li span:nth-child(2) {
--n: 2;
} nav ul li span:nth-child(3) {
--n: 3;
} nav ul li span:nth-child(4) {
--n: 4;
}

增加当鼠标悬停在按钮上时,4 个气泡依次出现的效果:

nav ul li span {
transition: 0.5s;
transition-delay: calc((var(--n) - 1) * 0.1s);
} nav ul li:hover span {
transform: translateY(0) scale(2);
}

隐藏按钮外的内容,形成只在悬停时气泡才出现的效果:

nav ul li {
overflow: hidden;
}

把气泡放到下层,文字放到上层:

nav ul li {
z-index: 1;
transition: 0.5s;
} nav ul li span {
z-index: -1;
} nav ul li:hover {
color: black;
}

在 dom 中再增加几个按钮:

&lt;nav&gt;
&lt;ul&gt;
&lt;li&gt;
home
&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;/span&gt;
&lt;/li&gt;
&lt;li&gt;
products
&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;/span&gt;
&lt;/li&gt;
&lt;li&gt;
services
&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;/span&gt;
&lt;/li&gt;
&lt;li&gt;
contact
&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;/span&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/nav&gt;

最后,给按钮之间留出空隙:

nav ul li {
margin: 1em;
}

大功告成!

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

如何用纯 CSS 创作气泡填色的按钮特效的更多相关文章

  1. 前端每日实战:72# 视频演示如何用纯 CSS 创作气泡填色的按钮特效

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

  2. 72.纯 CSS 创作气泡填色的按钮特效

    原文地址:https://segmentfault.com/a/1190000015560736 感想:过渡效果+xyz中一轴. HTML code: <nav> <ul> & ...

  3. 如何用纯 CSS 创作一个金属光泽 3D 按钮特效

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

  4. 前端每日实战:4# 视频演示如何用纯 CSS 创作一个金属光泽 3D 按钮特效

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

  5. 如何用纯 CSS 创作背景色块变换的按钮特效

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

  6. 如何用纯 CSS 创作一种侧立图书的特效

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

  7. 如何用纯 CSS 创作一个同心圆弧旋转 loader 特效

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

  8. 如何用纯 CSS 创作一个 3D 文字跑马灯特效

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

  9. 如何用纯 CSS 创作一个容器厚条纹边框特效

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

随机推荐

  1. 【BZOJ4864】[BeiJing 2017 Wc]神秘物质 Splay

    [BZOJ4864][BeiJing 2017 Wc]神秘物质 Description 21ZZ 年,冬. 小诚退休以后, 不知为何重新燃起了对物理学的兴趣. 他从研究所借了些实验仪器,整天研究各种微 ...

  2. LAMP集群项目二 初始化系统

    1.关闭防火墙 /etc/init.d/iptables stop chkconfig iptables off 2.关闭selinux cat /etc/selinux/config #查看状态 s ...

  3. klg-jpa:spring-data-jpa 最佳实践

    klg-jpa:spring-data-jpa 最佳实践 项目介绍 码云地址:https://gitee.com/klguang/klg-jpa JPA是sun为POJO持久化制定的标准规范,用来操作 ...

  4. 160415、sql语句sort排序,sort为空的在后面

    按sort排序,sort为空的在后面 select * from 表名 order by (case when sort is null or sort='' then 1 else 0 end),s ...

  5. Rsync文件同步机备份工具使用

    一,Rsync简介 Rsync是一款开源的,快速的,多功能的,可实现全量及增量的本地或远程数据同步的优秀工具.适用于多种操作平台. 全称是Remote synchronization 具有可使本地和远 ...

  6. JavaScript学习(6)-文档对象模型基础

    JavaScript学习6-文档对象模型基础 1.节点方法 节点对象方法(W3C DOM Level2) 方法 说明 appendChild(newChild) 添加子节点到当前节点的末端 clone ...

  7. Android中TextView设置最大长度,超出显示省略号

    今天在项目中碰到一个问题,在一个页面的顶部的标题栏显示公司的名字,但由于公司名称较长,显示不开,影响美观.故在网上查阅资料,在此做个小的总结. TextView中有个ellipsize属性,作用是当文 ...

  8. Flask之flask-script

    简介 Flask-Scropt插件为在Flask里编写额外的脚本提供了支持.这包括运行一个开发服务器,一个定制的Python命令行,用于执行初始化数据库.定时任务和其他属于web应用之外的命令行任务的 ...

  9. 进程Process之join、daemon(守护)、terminate(关闭)

    一.Process 参数介绍: 1 group参数未使用,值始终为None 2 target表示调用对象,即子进程要执行的任务 3 args表示调用对象的位置参数元组,args=(1,2,'a',) ...

  10. php用类生成二维码

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/qq1355541448/article/details/28630289 百度云盘里面已经有了.引用 ...