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 可交互视频教程 此视频是可以交 ...
随机推荐
- MySQL 5.7.16 字符串拆分 -> 单列变多行记录(转发)
http://blog.csdn.net/mchdba/article/details/53889803 ----------------------------------------------- ...
- CAD求交点函数
public void IntersectWith( Entity entityPointer, Intersect intersectType, Point3dCollection points, ...
- html json 导出Excel
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- url参数的转码和解码
encodeURI(str) //转码 decodeURI(str)//解码
- R语言数据挖掘相关包总结-转帖
与数据挖掘有关或者有帮助的R包和函数的集合. 1.聚类 常用的包: fpc,cluster,pvclust,mclust 基于划分的方法: kmeans, pam, pamk, clara 基于层次的 ...
- LeetCode——150. Evaluate Reverse Polish Notation
一.题目链接:https://leetcode.com/problems/evaluate-reverse-polish-notation/ 二.题目大意: 给定后缀表达式,求出该表达式的计算结果. ...
- 【Java】Java初始化过程总结
概述 Java字节代码:byte[] Java类在JVM的表现形式:Class类的对象: Java源代码被编译成class字节码 : Java字节代码 --> Class类的对象: 加载:把Ja ...
- Jenkins小试
之前有提到和同事搭建了个Git+Gerrit+Jenkins环境,可惜都在一台机器上,中间IT重装系统后就杯具了,没有备份,只好重来. 6月份项目发布了首个Open API,那时候建了个api uni ...
- jquery中each()的三种遍历用法
1.选择器+遍历 $('div').each(function (i){ i就是索引值 this 表示获取遍历每一个dom对象 }); 2.选择器+遍历 $('div').each(function ...
- 阿里云线上ROS静态路由转发,有大坑。
原因见上去,阿里云不支持VPC中转流量,VPC1和VPC2都在国内,VPC3在香港,如果按阿里云的做法,必须付费2次国际隧道的钱,才可以实现三个VPC互通.明显很浪费钱. 所以我们只能在三个VPC,各 ...