【前端每日实战：19# 视频演示如何用纯 CSS 创作一种有削铁如泥感觉的菜单导航特效】的更多相关文章

前端每日实战：19# 视频演示如何用纯 CSS 创作一种有削铁如泥感觉的菜单导航特效

效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/XqYroe 可交互视频教程 此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码. 请用 chrome, safari, edge 打开观看. https://scrimba.com/p/pEgDAM/c7EbPuW 源代码下载 请从 github 下载. https://github.com/comehope/front-end-dai…

如何用纯 CSS 创作一种有削铁如泥感觉的菜单导航特效

效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/XqYroe 可交互视频教程 此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码. 请用 chrome, safari, edge 打开观看. https://scrimba.com/p/pEgDAM/c7EbPuW 源代码下载 本地下载 请从 github 下载. https://github.com/comehope/fro…

19.纯 CSS 创作一种有削铁如泥感觉的菜单导航特效

原文地址:https://segmentfault.com/a/1190000014836748 感想: 把原元素隐藏,利用伪元素::before 和 ::after 各取上下一半 clip-path 切割图片 HTML代码: <ul class="menu"> <li data-text="New Game">New Game</li> <li data-text="Load Game">Load…

前端每日实战：12# 视频演示如何用纯 CSS 创作一种文字断开的交互特效

效果预览 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/LmjNgL 可交互视频教程 此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码. 请用 chrome, safari, edge 打开观看. https://scrimba.com/c/c2EvWHN 源代码下载 请从 github 下载. https://github.com/comehope/front-end-daily-challeng…

前端每日实战：14# 视频演示如何用纯 CSS 创作一种侧立图书的特效

效果预览 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/deVgRM 可交互视频教程 此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码. 请用 chrome, safari, edge 打开观看. https://scrimba.com/c/cb6pkUE 源代码下载 请从 github 下载. https://github.com/comehope/front-end-daily-challeng…

前端每日实战：122# 视频演示如何用纯 CSS 创作一个苹果系统的相册图标

效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/zJKwbO 可交互视频 此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码. 请用 chrome, safari, edge 打开观看. https://scrimba.com/p/pEgDAM/cDBZNUW 源代码下载 每日前端实战系列的全部源代码请从 github 下载: https://github.com/comehope/f…

前端每日实战：124# 视频演示如何用纯 CSS 创作一只纸鹤

效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/xagoYb 可交互视频 此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码. 请用 chrome, safari, edge 打开观看. https://scrimba.com/p/pEgDAM/cPw8eSg 源代码下载 每日前端实战系列的全部源代码请从 github 下载: https://github.com/comehope/f…

前端每日实战：94# 视频演示如何用纯 CSS 创作一台拍立得照相机

效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/YjYgey 可交互视频 此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码. 请用 chrome, safari, edge 打开观看. https://scrimba.com/p/pEgDAM/cpQpGtQ 源代码下载 每日前端实战系列的全部源代码请从 github 下载: https://github.com/comehope/f…

前端每日实战：92# 视频演示如何用纯 CSS 创作一颗逼真的土星

效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/EpbaQX 可交互视频 此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码. 请用 chrome, safari, edge 打开观看. https://scrimba.com/p/pEgDAM/cBdyeTw 源代码下载 每日前端实战系列的全部源代码请从 github 下载: https://github.com/comehope/f…

前端每日实战：157# 视频演示如何用纯 CSS 创作一个棋盘错觉动画（实际上每一行都是平行的）

效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/VEyoGj 可交互视频 此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码. 请用 chrome, safari, edge 打开观看. https://scrimba.com/p/pEgDAM/cppKmsd 源代码下载 每日前端实战系列的全部源代码请从 github 下载: https://github.com/comehope/f…