前端每日实战:37# 视频演示如何把握好 transition 和 animation 的时序,创作描边按钮特效
效果预览
按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。
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 的时序,创作描边按钮特效的更多相关文章
- 37.如何把握好 transition 和 animation 的时序,创作描边按钮特效
原文地址:https://segmentfault.com/a/1190000015089396 拓展地址:https://scrimba.com/c/cWqNNnC2 HTML code: < ...
- 如何把握好 transition 和 animation 的时序,创作描边按钮特效
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/mKdzZM 可交互视频教 ...
- 前端每日实战:144# 视频演示如何用 D3 和 GSAP 创作一个集体舞动画
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/gdVObN 可交互视频 此视频是可 ...
- 前端每日实战:141# 视频演示如何用 CSS 的 Grid 布局创作一枚小狗邮票
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/BOeEYV 可交互视频 此视频是可 ...
- 前端每日实战:122# 视频演示如何用纯 CSS 创作一个苹果系统的相册图标
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/zJKwbO 可交互视频 此视频是可 ...
- 前端每日实战:92# 视频演示如何用纯 CSS 创作一颗逼真的土星
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/EpbaQX 可交互视频 此视频是可 ...
- 前端每日实战:70# 视频演示如何用纯 CSS 创作一只徘徊的果冻怪兽
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/VdOKQG 可交互视频 此视频是可 ...
- 前端每日实战:157# 视频演示如何用纯 CSS 创作一个棋盘错觉动画(实际上每一行都是平行的)
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/VEyoGj 可交互视频 此视频是可 ...
- 前端每日实战:158# 视频演示如何用纯 CSS 创作一个雨伞 toggle 控件
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/pxLbjv 可交互视频 此视频是可 ...
随机推荐
- IDEA简单破解激活操作流程(我在用的)
其实简单的,你需要下一个包,将他放入你的IDEA安装目录的bin下,如下下图 下载地址:https://pan.baidu.com/s/1aJDefDGmfYGrkcJCpZYccA 看到红线的地方了 ...
- CS2001 VS编译错误
Severity Code Description Project File Line Suppression State Error CS2001 Source file 'C:\Workspace ...
- 安装 windows 2008 解决 gpt 分区问题
新服务器,4T硬盘,U盘安装Windows Server 2008 R2. 把2008的镜像用UltraISO写入U盘. 安装到分区那块,主分区200G,剩余分区系统自动给分为: 2T + 剩余 两块 ...
- javascript中for循环和标签元素赋值问题总结
<!DOCTYPE html><html><body><p>点击下面的按钮,将代码块循环五次:</p><button onclick= ...
- AtomicBoolean 源码分析
AtomicBoolean AtomicBoolean 能解决什么问题?什么时候使用 AtomicBoolean? 可原子更新的 boolean 值 1)原子性:在Java中,对基本数据类型变量的读取 ...
- (转) intellij idea部署web项目时的位置(Tomcat)
这篇文章说的比较好: 原文地址:https://blog.csdn.net/zmx729618/article/details/78340566 1.当你项目启动的时候console能看到项目运行的位 ...
- Linux_文件系统&磁盘分区
目录 目录 前言 文件系统 目录结构 File文件标识符 文件系统修复指令 两种磁盘格式 MBR格式 GPT格式 磁盘分区 查看分区 分区的类型 分区最小存储单元 查看当前分区的block的大小 GP ...
- js中parseInt()与parseFloat(),Number(),Boolean(),String()转换
js将字符串转数值的方法主要有三种 转换函数.强制类型转换.利用js变量弱类型转换. 1. 转换函数: js提供了parseInt()和parseFloat()两个转换函数.前者把值转换成整数,后者把 ...
- APlayer 媒体播放引擎
APlayer媒体播放引擎 Windows平台的播放内核 封闭式 DirectShow 架构,不受系统解码环境干扰 全媒体文件格式支持 丰富的媒体文件传输协议(http/https/ftp/mms/r ...
- window10 本地搭建SVN服务器
window10本地搭建SVN服务器教程:https://www.cnblogs.com/warmlight/p/11075644.html 我按照这篇教程成功搭建SVN服务器. 有个比较坑的地方是w ...