如何把握好 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);}
}
大功告成!
原文地址:https://segmentfault.com/a/1190000015089396
如何把握好 transition 和 animation 的时序,创作描边按钮特效...相关推荐
- 如何把握好 transition 和 animation 的时序,创作描边按钮特效
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/mKdzZM 可交互视频教 ...
- CSS3与动画有关的属性transition、animation、transform对比
最近应公司需求,需要用css3做动画,终于把以前一直傻傻分不清楚的三个属性理解了. 索性在这里进行一个简单的对比,加深自己的记忆. 浏览器兼容性 CSS3 transform 属性 Internet ...
- css3的动画特效--元素旋转(transition,animation)
css3的动画特效--元素旋转(transition,animation) 开发中,视觉要你实现一个元素的旋转问题,比如说如下图所示: 思路:首先动画动效肯定离不开anmimation动画. 和tra ...
- css3实践之图片轮播(Transform,Transition和Animation)
原文:css3实践之图片轮播(Transform,Transition和Animation) 楼主喜欢追求视觉上的享受,虽常以牺牲性能无法兼容为代价却也乐此不疲.本文就通过一个个的demo演示来简单了 ...
- 弄清 CSS3 的 transition 和 animation
弄清 CSS3 的 transition 和 animation 原文:弄清 CSS3 的 transition 和 animation 弄清 CSS3 的 transition 和 animatio ...
- CSS3 Transform、Transition和Animation属性总结
CSS3的三个与变形和动画啊相关的属性: Transform 浏览器支持情况: Internet Explorer 10.Firefox.Opera 支持 transform 属性. Internet ...
- [css] transition、animation、transform三者有什么区别?
[css] transition.animation.transform三者有什么区别? transition:比较简单的过度动画animation: 使用keyframe自定义动画,比较详细的动画过 ...
- 区别Transform、Transition、Animation
另一篇参考文章:http://www.7755.me/Article/CSS3/39/ 近来上班之外就是研究研究CSS动画,下面是第一阶段总结.话说为加强记忆,实则想抛砖引玉! 标题直译一下就是:变形 ...
- css transition改动透明,使用CSS transition和animation改变渐变状态的实现方法
到目前为止,CSS的渐变属性 linear-gradient 和 radial-gradient 已经是很成熟的CSS特性了,而且 repeating-linear-gradient 和 conic- ...
- css3 transition 和 animation实现走马灯
这段时间在做一个App,H5的开发.页面上有公告 以走马灯的形式显示出来. 在开始直接用的marquee标签,后来发现在ios客户端,走马灯移动不够平滑,有抖动现象. 对于有强迫症的我而言是无法忍受的 ...
最新文章
- Intel汇编程序设计-整数算术指令(下)
- Python+Django+Eclipse 在Windows快速Blog
- php 订单过期处理,PHP实现处理过期或者超时订单,并还原库存
- U-Boot 之四 构建过程(Kconfig 配置 + Kbuild 编译)详解
- HDU-4536 XCOM Enemy Unknown 枚举
- [Unity3d]多个摄像机叠加效果
- Spring之HibernateTemplate 和HibernateDaoSupport
- 数据结构课上笔记11
- 腾讯云服务器配置ftp~
- vue 在js 文件中使用store_vue 如何在 .js 文件引入 store
- NLP学习------HanLP使用实验
- nmap超快高效扫描端口
- 领导说我对任务的理解是错的
- Semantic-UI 的词语
- MySQL--计算时间差
- oracle 报错01427,Oracle ORA错误
- 侦测卡 变色龙侦测卡 chameleon-Mini(迷你变色龙) (二)
- 安兔兔电脑ssd测试软件,安兔兔SSD测试软件测评,威钰战国NVMe SSD
- D:\eclipse-workspace\.metadata\.plugins\org.eclipse.core.resources\.projects
- 高阳:我是黑客我怕谁