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

感想:过渡效果+xyz中一轴。

HTML code:

<nav>
<ul>
<li>
home
<span></span><span></span><span></span><span></span>
</li>
</ul>
</nav>

CSS code:

html, body,ul {
margin:;
padding:;
}
/* 设置所有元素的width、height包含border、padding、content
*{
box-sizing: border-box;
}
*/
/* 设置body的子元素水平垂直居中 */
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: black;
}
/* 设置按钮样式*/
nav ul {
list-style-type: none;
}
nav ul li{
/* 这里的相对定位为li绝对定位做准备 */
position: relative;
--c: goldenrod;
color: var(--c);
font-size: 16px;
font-weight: bold;
font-family: sans-serif;
width: 12em;
height: 3em;
line-height: 3em;
border: 0.3em solid var(--c);
border-radius: 0.5em;
text-align: center;
letter-spacing: 0.1em;
/* 外面的隐藏 */
overflow: hidden;
/* 显示层级降低,让文字优先显示 */
z-index:; }
/* 画出气泡,4个并列摆放 */
nav ul li span{
position: absolute;
left: calc((var(--n) - 1) * 25%);
width: 25%;
height: 100%;
border-radius: 50%;
background-color: var(--c);
/* 定义Y轴位置 */
transform: translateY(150%);
/* 过渡属性 */
transition: 0.5s;
transition-delay: calc((var(--n) - 1) * 0.1s);
/* 层级降低 */
z-index: -1;
}
nav ul li span:nth-child(1) {
--n:;
}
nav ul li span:nth-child(2) {
--n:;
}
nav ul li span:nth-child(3) {
--n:;
}
nav ul li span:nth-child(4) {
--n:;
}
nav ul li:hover{
color: black;
}
/* 鼠标移到按钮上 */
nav ul li:hover span {
transform: translateY(0) scale(2);
}

72.纯 CSS 创作气泡填色的按钮特效的更多相关文章

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

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

  2. 如何用纯 CSS 创作气泡填色的按钮特效

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

  3. 44.纯 CSS 创作背景色块变换的按钮特效

    原文地址:https://segmentfault.com/a/1190000015192218 感想: 伪元素作为背景变化. HTML code: <nav> <ul> &l ...

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

    原文地址:https://segmentfault.com/a/1190000014599280 HTML代码: <div class="box">BUTTON< ...

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

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

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

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

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

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

  8. 3.纯 CSS 创作一个容器厚条纹边框特效

    原文地址:3.纯 CSS 创作一个容器厚条纹边框特效 没有啥好点子呀,不爽 HTML代码: <div class="box"> <div class=" ...

  9. 27.纯 CSS 创作一个精彩的彩虹 loading 特效

    原文地址:https://segmentfault.com/a/1190000014939781 感想:正方形->圆->旋转一定角度->动画->隐藏下一半 HTML代码: &l ...

随机推荐

  1. Tomcat服务器安装及配置

    一.JDK环境安装 1.tomcat服务器需要在已安装JDK的环境下才能正确安装并运行,首先到Java官网下载jdk 先同意协议,再下载对应的版本(我的系统是Windows10 64位) 2.下载完成 ...

  2. 【OO学习】OO第二单元作业总结

    OO第二单元作业总结 在第二单元作业中,我们通过多线程的手段实现了电梯调度,前两次作业是单电梯调度,第三次作业是多电梯调度.这个单元中的性能分要求是完成所有请求的时间最短,因此在简单实现电梯调度的基础 ...

  3. mysql 中文支持

    show variables like 'character%';  SHOW VARIABLES LIKE 'collation_%'; recommend to use utf8mb4 inste ...

  4. python中常见的报错,总结一下,以后看。

    AttributeError 试图访问一个对象没有的属性,比如,乔峰.nameIOError 输入.输出异常:基本上无法打开文件ImportError 无法引入模块或者是包:基本上是路径问题,或者是名 ...

  5. ss-R:// 链接的含义

    1.问题 ss-R:// Mi41LmZ1Y2twcHBwcC50b2RheToyNDI4ODphdXRoX2FlczEyOF9tZDU6YWVzLTI1Ni1jdHI6dGxzMS4yX3RpY2t ...

  6. 使用VMWare虚拟机打开MFC报错:不支持16位系统

    可能这个问题的比较小众,但还是提供一下自己的思路. 笔者使用的是VMWare Fusion11的版本,采用windows7sp1的虚拟机. 在打开Mac系统共享过来的VC++的MFC文件运行时报错:不 ...

  7. 285款photoshop烟花笔刷

    这是一套非常漂亮的PS烟花笔刷,包含285款不同形状效果的笔刷样式,此套photoshop烟花笔刷非常容易使用,使用可以将它们用作照片叠加,用于数码照片处理,作为游戏或艺术品的视觉效果,以及作为装饰元 ...

  8. MySQL 设置root密码报错:mysqladmin: connect to server at 'localhost' failed

    MySQL 设置root密码报错:mysqladmin: connect to server at 'localhost' failed 1.安装完MySQL设置root密码报错如下 [root@vm ...

  9. 自动编译批处理设置(MSBuild)

    基本设置,如果想更改可以设置. @echo off rem --------------------------------- rem ----作成者:李暁賓--------------- rem - ...

  10. python使用高阶函数计算整数阶乘

    from functools import reduce num = 10 print(reduce(lambda x, y: x * y, range(1, num + 1)))