效果预览

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

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

可交互视频教程

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

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

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

源代码下载

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

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

代码解读

定义 dom,标准的导航模式:

<nav>
<ul>
<li>Home</li>
</ul>
</nav>

居中显示:

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

定义文本和按钮边框样式:

nav ul {
padding: 0;
} nav ul li {
color: white;
list-style-type: none;
font-size: 32px;
font-family: sans-serif;
text-transform: uppercase;
width: 12em;
height: 4em;
border: 1px solid rgba(255, 255, 255, 0.2);
text-align: center;
line-height: 4em;
letter-spacing: 0.2em;
}

用 before 伪元素定义上边框和右边框,其中边框颜色因会多次被用到,所以采用变量:

:root {
--color: dodgerblue;
} nav ul li::before {
content: '';
position: absolute;;
width: 0;
height: 0;
visibility: hidden;
top: 0;
left: 0;
border-top: 1px solid var(--color);
border-right: 1px solid var(--color);
}

类似地,用 after 伪元素定义右边框和下边框:

nav ul li::after {
content: '';
position: absolute;;
width: 0;
height: 0;
visibility: hidden;
bottom: 0;
right: 0;
border-bottom: 1px solid var(--color);
border-left: 1px solid var(--color);
}

设计边框入场的动画效果,按上、右、下、左的顺序依次显示边框,为了方便调整动画的速度设置了与时间相关的变量:

:root {
--time-slot-length: 0.1s;
--t1x: var(--time-slot-length);
--t2x: calc(var(--time-slot-length) * 2);
--t3x: calc(var(--time-slot-length) * 3);
--t4x: calc(var(--time-slot-length) * 4);
} nav ul li:hover::before,
nav ul li:hover::after {
width: 100%;
height: 100%;
visibility: visible;
} nav ul li:hover::before {
transition:
visibility 0s,
width linear var(--t1x),
height linear var(--t1x) var(--t1x);
} nav ul li:hover::after {
transition:
visibility 0s var(--t2x),
width linear var(--t1x) var(--t2x),
height linear var(--t1x) var(--t3x);
}

设计边框出场的动画效果,与入场的顺序相反:

nav ul li::before {
transition:
height linear var(--t1x) var(--t2x),
width linear var(--t1x) var(--t3x),
visibility 0s var(--t4x);
} nav ul li::after {
transition:
height linear var(--t1x),
width linear var(--t1x) var(--t1x),
visibility 0s var(--t2x);
}

让按钮文字在描边期间变色:

nav ul li {
transition: var(--t4x);
} nav ul li:hover {
color: var(--color);
}

最后,在描边结束后,在按钮四周增加一个脉冲动画,加强动感:

nav ul li:hover {
animation: pulse ease-out 1s var(--t4x);
} @keyframes pulse {
from {
box-shadow: 0 0 rgba(30, 144, 255, 0.4);
} to {
box-shadow: 0 0 0 1em rgba(30, 144, 255, 0);
}
}

大功告成!

前端每日实战:37# 视频演示如何把握好 transition 和 animation 的时序,创作描边按钮特效的更多相关文章

  1. 37.如何把握好 transition 和 animation 的时序,创作描边按钮特效

    原文地址:https://segmentfault.com/a/1190000015089396 拓展地址:https://scrimba.com/c/cWqNNnC2 HTML code: < ...

  2. 如何把握好 transition 和 animation 的时序,创作描边按钮特效

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

  3. 前端每日实战:144# 视频演示如何用 D3 和 GSAP 创作一个集体舞动画

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

  4. 前端每日实战:141# 视频演示如何用 CSS 的 Grid 布局创作一枚小狗邮票

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

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

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

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

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

  7. 前端每日实战:70# 视频演示如何用纯 CSS 创作一只徘徊的果冻怪兽

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

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

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

  9. 前端每日实战:158# 视频演示如何用纯 CSS 创作一个雨伞 toggle 控件

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

随机推荐

  1. IDEA简单破解激活操作流程(我在用的)

    其实简单的,你需要下一个包,将他放入你的IDEA安装目录的bin下,如下下图 下载地址:https://pan.baidu.com/s/1aJDefDGmfYGrkcJCpZYccA 看到红线的地方了 ...

  2. CS2001 VS编译错误

    Severity Code Description Project File Line Suppression State Error CS2001 Source file 'C:\Workspace ...

  3. 安装 windows 2008 解决 gpt 分区问题

    新服务器,4T硬盘,U盘安装Windows Server 2008 R2. 把2008的镜像用UltraISO写入U盘. 安装到分区那块,主分区200G,剩余分区系统自动给分为: 2T + 剩余 两块 ...

  4. javascript中for循环和标签元素赋值问题总结

    <!DOCTYPE html><html><body><p>点击下面的按钮,将代码块循环五次:</p><button onclick= ...

  5. AtomicBoolean 源码分析

    AtomicBoolean AtomicBoolean 能解决什么问题?什么时候使用 AtomicBoolean? 可原子更新的 boolean 值 1)原子性:在Java中,对基本数据类型变量的读取 ...

  6. (转) intellij idea部署web项目时的位置(Tomcat)

    这篇文章说的比较好: 原文地址:https://blog.csdn.net/zmx729618/article/details/78340566 1.当你项目启动的时候console能看到项目运行的位 ...

  7. Linux_文件系统&磁盘分区

    目录 目录 前言 文件系统 目录结构 File文件标识符 文件系统修复指令 两种磁盘格式 MBR格式 GPT格式 磁盘分区 查看分区 分区的类型 分区最小存储单元 查看当前分区的block的大小 GP ...

  8. js中parseInt()与parseFloat(),Number(),Boolean(),String()转换

    js将字符串转数值的方法主要有三种 转换函数.强制类型转换.利用js变量弱类型转换. 1. 转换函数: js提供了parseInt()和parseFloat()两个转换函数.前者把值转换成整数,后者把 ...

  9. APlayer 媒体播放引擎

    APlayer媒体播放引擎 Windows平台的播放内核 封闭式 DirectShow 架构,不受系统解码环境干扰 全媒体文件格式支持 丰富的媒体文件传输协议(http/https/ftp/mms/r ...

  10. window10 本地搭建SVN服务器

    window10本地搭建SVN服务器教程:https://www.cnblogs.com/warmlight/p/11075644.html 我按照这篇教程成功搭建SVN服务器. 有个比较坑的地方是w ...