动手练一练,深入学习 4 个与 Hover 相关的动效案例 (上)
大家好,本篇文章小编将和大家一起学习 4 个 Hover 相关的动效案例,这 4 个案例分别是 Anchors(链接锚点)、Tooltips(提示层)、Card Content(内容卡片)、Button(按钮)相关的 Hover 效果,由于篇幅原因,本文只介绍前两个案例。
1、Anchors(链接锚点)
链接锚点的鼠标 Hover 效果是一个很常见的特效,看起来简单,但是相关的细节还是需要注意的,本小节我们将完成如下图所示的动效
接下来,基于上图动效,我们来分解动画需求:
- 去掉原有 a 标签自带的下划线链接
- 自定义下划线样式,鼠标 Hover 时,才显示动画效果
- 下划线动画效果由左到右逐渐显示,然后从左往右移动逐渐缩小(先伸展后缩小)
- 只要鼠标一直在文字上悬停,下划线的动画效果循环播放
- 链接的文字效果由暗变亮
1.1 在线演示地址
我们先通过以下链接,在线体验下效果:
https://daren-hover-animation.netlify.app/01-anchors/
1.2 、完成基础的页面布局
首先我们先完成基础的页面布局,HTML 的代码比较简单,示例代码如下:
<html>
<head>
<title>Interactions: Level up your CSS animation skills</title>
<!-- The default layout, resets and and text styling -->
<link href="stylesheets/main.css" rel="stylesheet">
<!-- Custom styling -->
<link href="stylesheets/links.css" rel="stylesheet">
</head>
<body>
<article class="content">
<p>... and here is some text. This text shows how <a href="https://qianduandaren.com">CSS animation</a> can help us make links be more fun and useful...</p>
</article>
</body>
</html>
接下来我们来完成基础的样式 main.css ,基于 normalize.css 定义默认的相关样式:
/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */
body {
margin: 0;
}
article, aside, footer, header, nav, section, figcaption, figure, main {
display: block;
}
figure {
margin: 1em 40px;
}
[hidden] {
display: none;
}
/* 由于篇幅,这里省略代码 */
p {
font-size: 4.7em;
max-width: 80%;
}
我们接下来定义链接的基础样式 links.css ,去除默认下划线链接样式,并定义 relative 样式,这样我们可以基于文本链接使用相对定位,示例代码如下:
a {
color: #2F56B0;
position: relative;
text-decoration: none;
-webkit-transition: color .4s ease-out;
transition: color .4s ease-out;
}
最后我们自定义下划线的链接样式,我们使用 ::after 伪元素进行定义:
a::after {
border-radius: 1em;
border-top: .1em solid #2F56B0;
bottom: .14em;
content: "";
left: 0;
position: absolute;
right: 100%;
-webkit-transition: border-color .4s ease-out;
transition: border-color .4s ease-out;
}
这里相对文本,使用了 absolute 属性,让其相对文本进行定位,距离底部 .14em 的距离,然后使用 border-radius: 1em 让下划线的左右两端更加圆滑。最后使用 left: 0; right: 100%; 让其隐藏,然后鼠标 Hover 后,让其 right: 0; 显示完整的长度。
最终完成后的效果,如下图所示:
1.3、定义关键帧动画(keyframes
)
完成基础布局后,我们就需要定义关键帧 keyframes
动画 anchor-underline
,让下划线链接的线条,由左到右完全显示,然后由左到右逐渐缩小隐藏,关键帧的示例代码如下:
@keyframesanchor-underline {
0%, 10% {
left: 0;
right: 100%;
}
40%, 60% {
left: 0;
right: 0;
}
90%, 100% {
left: 100%;
right: 0;
}
}
然后定义鼠标经过的链接 a:hover::after
样式,调用我们的关键帧 keyframes
,示例代码如下:
a:hover::after {
animation: anchor-underline 2s cubic-bezier(0,.5,0,1) infinite;
border-color: #457DFB;
}
a:hover {
color: #457DFB;
right: 0;
text-decoration: none;
}
使用 infinite 效果,让其鼠标在链接上悬停,不断的在伸长和缩小两个状态之间,不断循环。颜色逐渐变亮。
2、Tooltips(提示层)
在上个示例的基础上,接下来我们添加一个自定义鼠标 Hover 后的 Tooltips 提示效果,示例动画效果如下动图所示:
接下来,基于上图动效,我们来分解 ToopTip 需求:
- 鼠标经过时链接上方渐入一个白色透明带蓝色边框的浮层
- 浮层中间的最下方有个右下的箭头指向文本链接
- 鼠标移出文本链接,浮层渐渐淡出
2.1 、在线演示地址
我们先通过以下链接,在线体验下效果,然后在亲自动手实践完成
https://daren-hover-animation.netlify.app/02-tooltips/
2.2、简化文本下划线动效
由于主要展示提示层的效果,我们就没必要下划线的文本链接进行循环的展示伸展和缩小的动效了,links.css 文件简化后样式代码如下:
a {
color: #2F56B0;
display: inline-block;
position: relative;
text-decoration: none;
-webkit-transition: color .4s ease-out;
transition: color .4s ease-out;
}
a::after {
border-radius: 1em;
border-top: .1em solid #2F56B0;
bottom: .14em;
content: "";
left: 0;
position: absolute;
right: 100%;
-webkit-transition: border-color .4s ease-out,
right .4s cubic-bezier(0,.5,0,1);
transition: border-color 3.4s ease-out,
right .4s cubic-bezier(0,.5,0,1);
}
a:hover {
color: #457DFB;
text-decoration: none;
}
a:hover::after {
border-color: #457DFB;
right: 0;
}
2.3、定义 ToopTip 提示层样式
接下来修改 HTML ,添加 title 属性。
<article class="content">
<p>... and here is some text. This text shows how
<a href="https://qianduandaren.com/" title="Learn all about animating in the browser"
class="anchor-tooltip">CSS animation</a>
can help us make links be more fun and useful...</p>
</article>
接下来我们定义 title-tooltip 提示层的样式,新建 tooltips.css 样式文件,示例代码如下:
.title-tooltip {
background: rgba(255,255,255,.9);
border: 2px solid #457DFB;
border-radius: .1em;
bottom: 2em;
font-size: .7em;
left: calc(50% - 8em);
opacity: 0;
padding: .25em .5em;
position: absolute;
text-align: center;
transform: translateY(-.25em);
transition: visibility 0s .5s,
opacity .2s ease-out,
transform .5s cubic-bezier(0,1,.5,1),
visibility: hidden;
width: 16em;
z-index: 10;
}
首先定义白色透明背景和边框样式,然后使用 left 属性将其浮层的中心位置和链接文本的中心位置保证一致。然后利用定位的属性,将其调整至文本链接的顶部。使用 visibility 属性将其隐藏,opacity 的透明度默认为0,调整 z-index 的属性,让其置顶在所有层之上。使用transform: translateY(-.25em); 将其默认位置抬高 0.25 个单位(让其有一种从上往下进入的感觉), 最后调用 transition 动画属性,让提示层的渐入渐出的动画效果更将平滑。
接下来我们来定义弹出层中间下方的小三角,用于指向下方的文本链接,主要运用到用CSS如何绘制三角形的知识,示例代码如下:
.title-tooltip::after {
border-color: #457DFB transparent;
border-radius: 0;
border-style: solid;
border-width: .2em .2em 0 .2em;
bottom: -.2em;
content: "";
left: calc(50% - .2em);
position: absolute;
width: 0;
}
2.4、定义鼠标经过的 Hover 样式
最后我们来定义鼠标链接经过链接的效果,显示提示层:
.anchor-tooltip:hover .title-tooltip {
opacity: 1;
transform: none;
transition: opacity .2s ease-out,
transform .5s cubic-bezier(0,1,.5,1),
visibility: visible;
}
这里 transform: none; 让提示层恢复到默认的位置,开始之前我们定义了让其抬高了 0.25 个单位,这样就有一种由上往下进入的动画感觉。使用 visibility 和 opacity 属性,让其显示出来。
2.5、添加 JS 代码,显示提示层 Title 属性的文字
最后一步,我们需要使用 JS 代码,让提示层显示,我们首先要寻找所有包含 .anchor-tooltip 样式的锚点链接,然后迭代每个锚点链接,动态添加对应提示层DOM,将对应的 title 属性的文字添加至提示层,并附加上 title-tooltip 样式。
var anchors = document.querySelectorAll('.anchor-tooltip');
anchors.forEach(function(anchor) {
var toolTipText = anchor.getAttribute('title'),
toolTip = document.createElement('span');
toolTip.className = 'title-tooltip';
toolTip.innerHTML = toolTipText;
anchor.appendChild(toolTip);
});
到这里,本小节案例就完成了。
文末
由于篇幅原因,本篇文章就介绍到这里,下一篇文章会继续介绍 Card Content(内容卡片)、Button(按钮)动效案例,敬请期待…
案例源码
本篇文章的两个案例,大家可以通过以下链接获取源码:
链接: https://qianduandaren.com/css-hover-animation-1/
注:本文属于原创文章,版权属于「前端达人」公众号及 qianduandaren.com 所有,未经授权,谢绝一切形式的转载
相关文章
- Spring学习笔记(六)——SpringMVC 概述和入门案例
- 逻辑卷实战案例-swap分区
- Cocos 3D开源游戏案例
- 基于现代R语言【Tidyverse、Tidymodel】的机器学习方法与案例分析
- php案例:字符串压缩解压
- Thinkphp5学习009-项目案例-学生列表-控制器中的代码
- Thinkphp5学习016-项目案例-项目修改要求
- JavaScript案例:求学生成绩和打印九九乘法表
- 软件方法(下)第9章分析类图案例篇Part01
- mysql中10049是什么错误_【学习笔记】Oracle数据库10049用于分析SQL解析笔记案例
- 【Docker教程系列】Docker学习6-Docker镜像commit操作案例
- 开源图书《Python完全自学教程》12.6机器学习案例12.6.1预测船员数量
- 【愚公系列】2022年12月 .NET CORE工具案例-PLG轻量级日志可视化服务
- Cypress学习笔记4——编写第二个测试脚本(登录案例)
- 【Dubbo】快速入门案例以及配置详情
- NLP自然语言处理—主题模型LDA案例:挖掘人民网留言板文本数据|附代码数据
- 云原生专场报名中!听腾讯云存储技术大咖在线分享实践案例
- Wiztalk | 100期 陶阳宇《机器学习平台如何兼顾工业界的高可用性和学术界的创新性-Angel详解及产业应用案例-2》
- SQL案例学习之字符串的合并与拆分方法总结
- Hive学习之路 (十二)Hive SQL练习之影评案例详解大数据
- spring原理案例-基本项目搭建 01 spring framework 下载 官网下载spring jar包详解编程语言
- 分析MySQL索引优化:一个实际案例分析(mysql索引案例)
- 嵌入式Linux应用实例:25个用例分析(linux嵌入式应用案例)
- 学习基于Linux系统C语言编程案例学习(linuxc案例)
- 探索Oracle 01245,了解其在数据库管理方面的优势和应用案例(oracle 01245)
- IE关闭时判断及AJAX注销案例学习