23.纯 CSS 创作一个菜单反色填充特效
原文地址:https://segmentfault.com/a/1190000014876348
HTML代码:
<nav>
<ul>
<li><span>Home</span></li>
</ul>
</nav>
CSS代码:
html, body {
margin:;
padding:;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(to right bottom,gold, chocolate);
}
/* 为容器设置宽高,此处定义的变量 x 和 y 后面还会用到 */
:root{
--x: 5em;
--y: 1.5em;
}
nav ul{
padding:;
}
nav ul li{
position: relative;
width: var(--x);
height: var(--y);
line-height: var(--y);
list-style-type: none;
font-size: 40px;
text-align: center;
font-family: sans-serif;
background-color: white;
border: 2px solid black;
overflow: hidden;
}
/* 用伪元素画出一个小球,放到菜单项左端 */
nav ul li::before {
content: '';
position: absolute;
height: var(--y);
width: var(--y);
background-color: black;
border-radius: 50%;
top:;
left: calc(-1 * var(--y) / 2);
transition: 0.5s ease-out;
}
/* 用 mix-blend-mode 设置色彩混合模式,使小球覆盖的文字反色显示 */
nav ul li span{
color: white;
mix-blend-mode: difference;
}
/* 增加动画,使小球从左侧滚到右侧 */
nav ul li:hover::before {
--r: calc(var(--x) * 1.2);
height: var(--r);
width: var(--r);
/* 利用圆的变大覆盖长方形,可以将li中 overflow: hidden; 注释查看 */
top: calc(-1 * var(--r) / 2 + var(--y) / 2);
left: calc(-1 * var(--r) / 2 + var(--x) / 2);
}
23.纯 CSS 创作一个菜单反色填充特效的更多相关文章
- 23.1纯 CSS 创作一个菜单反色填充特效
交互效果地址:https://scrimba.com/c/cEwREJs6 HTML代码: <nav> <ul> <li><span>Home</ ...
- 前端每日实战:23# 视频演示如何用纯 CSS 创作一个菜单反色填充特效
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览.https://codepen.io/comehope/pen/qYMoPo 可交互视频教程 此视频是 ...
- 如何用纯 CSS 创作一个菜单反色填充特效
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览.https://codepen.io/comehope/pen/qYMoPo 可交互视频教程 ...
- 3.纯 CSS 创作一个容器厚条纹边框特效
原文地址:3.纯 CSS 创作一个容器厚条纹边框特效 没有啥好点子呀,不爽 HTML代码: <div class="box"> <div class=" ...
- 如何用纯 CSS 创作一个同心圆弧旋转 loader 特效
效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/OZmXQX 可交互视频教程 此视 ...
- 如何用纯 CSS 创作一个金属光泽 3D 按钮特效
效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/full/MGeRRO 可交互视频教程 此 ...
- 如何用纯 CSS 创作一个容器厚条纹边框特效
效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/YLqbXy 可交互视频教程 此视 ...
- 前端每日实战:4# 视频演示如何用纯 CSS 创作一个金属光泽 3D 按钮特效
效果预览 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/full/MGeRRO 可交互视频教程 此视频是可以 ...
- 前端每日实战:10# 视频演示如何用纯 CSS 创作一个同心圆弧旋转 loader 特效
效果预览 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/OZmXQX 可交互视频教程 此视频是可以交 ...
随机推荐
- Excel技巧--让折线图带面积更直观生动
上图为带面积的折线图,比单纯的折线图更直观更好看. 制作办法: 1.先制作纯折线图: 2.再复制一遍数据列,选中图表,点击粘贴(ctrl+v): 3.右键图表,点击“更改图表类型”,对话框如下设置: ...
- TreeView添加图片
实现方式一: 通过代码方式实现如下所示: private string FilePath = Application.StartupPath + "\\Images\\"; Ima ...
- java多线程找素数实例
package ltb20180106; public class FindPrime implements Runnable{ private int prime; private int q; p ...
- Flask--路由备忘
路由: 路由传参route("/index/<userid>") def index(userid),参数数据类型的指定route("user/<int ...
- Boost--optional
#include <vector> #include <deque> #include <iostream> #include <array> #inc ...
- Unity3d- 资源
Data与Resources文件夹一般只读文件放到Resources目录Data用于新建的文件或者要修改的文件============================================= ...
- Hadoop 管理工具HUE配置-集成Unix用户和用户组
HUE安装完成之后,第一次登录的用户就是HUE的超级用户,可以管理用户,等等.但是在用的过程发现一个问题这个用户不能管理HDFS中由supergroup创建的数据. 虽然在HUE中创建的用户可以管理自 ...
- Python 里面什么时候用一个=,什么时候用两个=
赋值用= i != j != k >>>> ...
- P1015回文数
传送 回文数的判断有个神奇的公式: g[i]==g[leng+-i] 其中leng为字符串长度,看每个g[i]是否都满足它,若满足,就是回文数 ps:洛谷的impossible有毒,必须得复制题干中的 ...
- [UE4]不推荐的UI更新方式
在创建UI的时候,把UI保存到一个变量,直接访问其中的控件. 这种方法会增加耦合,不推荐,应当尽量避免使用这种方式.