效果预览

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

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. vue路由实例

    router.js: import Vue from 'vue' import Router from 'vue-router' import Home from '@/components/Home ...

  2. mysql中的collate关键字是什么意思?

    CREATE TABLE `tb_order` ( `order_id` varchar(50) COLLATE utf8_bin DEFAULT NULL COMMENT '订单id', `paym ...

  3. 学习C#20天有感

    自学C#有20多天了,期间出差去深圳一周,每天平均学习4小时左右,看书+视频,之前有点C语言基础(仅限于基础哈哈),计划30内把C#的基本语法和SQL的基本语法熟悉,把面向对象相对深入的理解一些,然后 ...

  4. HDU6715 算术(莫比乌斯反演)

    HDU6715 算术 莫比乌斯反演的变形. 对 \(\mu(lcm(i,j))\) 变换,易得 \(\mu(lcm(i,j)) = \mu(i)\cdot\mu(j)\cdot \mu(gcd(i,j ...

  5. windows10下基于docker的bvlc/caffe环境搭建与使用

    docker 安装参见docker官网,当cmd出现以下图像时安装正确; 然后进行bvlc/caffe环境创建,有两种,一种是直接pull github的bvlc,一种是本地创建image,直接使用g ...

  6. 包管理器 - peer dependency 的安装

    npm 和 yarn 安装依赖(包)时不会自动安装 peer dependence(虽然很旧的 npm 是会自动安装的,但几乎没人用那么旧的了),而是给出如下警告: $ npm install --s ...

  7. jenkins打包ios 报错rror: No signing certificate "iOS Distribution" found: No "iOS Distribution...

    错误提示如图: error: No signing certificate "iOS Distribution" found: No "iOS Distribution& ...

  8. 阶段1 语言基础+高级_1-3-Java语言高级_04-集合_08 Map集合_9_Hashtable集合

    是最早期的双列集合 同步就表示是单线程 value也不允许为空

  9. 在Window平台是模拟Linux的Shell环境

    在Linux平台模拟Linux的shell环境,可以通过一个软件实现:Cygwin(点击进入官网下载好即可),如下图(选择对应的版本进行下载): 安装: 1. 双击运行下载的安装包(选择从网络安装), ...

  10. “希希敬敬对”团队--‘百度贴吧小爬虫’Alpha版本展示博客

    希希敬敬对的 Alpha阶段测试报告 随笔链接地址 https://www.cnblogs.com/xiaoyoushang/p/10078826.html   Alpha版本发布说明 随笔链接地址 ...