CSS3贝塞尔曲线示例:创建链接悬停动画效果


Posted in HTML / CSS onNovember 19, 2020

我们将使用 CSS3 动画过渡来创建简单但引人入胜的链接悬停效果,将鼠标悬停在链接上时,会弹出一个小弹出框。

我们还将看一下CSS3 Cubic-Bezier(贝塞尔)曲线,它是 CSS 过渡,为弹出框提供了更加流畅的运动,而不是僵化的机械运动。

这是我们最后的效果:

CSS3贝塞尔曲线示例:创建链接悬停动画效果

让我们开始吧!

HTML 部分

这是我们链接的 HTML,图标来自 iconfont.cn。

<div class="container">
  <section>
    <a href="#">
      <i class="fab fa-instagram"></i>
      <span>Instagram</span>
    </a>
    <a href="#">
      <i class="fab fa-github"></i>
      <span>Github</span>
    </a>
  </section>
</div>

当您将鼠标悬停在链接上时,span 标签将成为弹出框。接下来,我们进入 CSS。

CSS 样式和动画

我们将 div 容器居中,以使两个链接在屏幕上居中。这也使对小弹出框进行动画处理变得容易,因为它们将从链接的顶部弹出。

div.container {
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

接下来,我们对链接进行样式设置,创建简单的背景悬停效果,并定位社交媒体图标。

a {
  color: #fff;
  background: #8a938b;
  border-radius: 4px;
  text-align: center;
  text-decoration: none;
  position: relative;
  display: inline-block;
  width: 120px;
  height: 100px;
  padding-top: 12px;
  margin: 0 2px;
  -o-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  transition: all 0.5s;
  -webkit-font-smoothing: antialiased;
}
a:hover {
  background: #5a665e;
}
i {
  font-size: 45px;
  vertical-align: middle;
  display: inline-block;
  position: relative;
  top: 20%;
}

接下来,我们将对弹出文本进行样式设置和动画处理。

a span {
  color: #666;
  position: absolute;
  font-family: "Chelsea Market", cursive;
  bottom: 0;
  left: -15px;
  right: -15px;
  padding: 15px 7px;
  z-index: -1;
  font-size: 14px;
  border-radius: 5px;
  background: #fff;
  visibility: hidden;
  opacity: 0;
  -o-transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -webkit-transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -moz-transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
} /* 当图标处于悬停状态时,文本将弹出 */
a:hover span {
  bottom: 130px;
  visibility: visible;
  opacity: 1;
}

CSS3 Cubic-Bezier曲线由四个点p0,p1,p2和p3定义。 p0 点是曲线的起点,而 p3 点是曲线的终点。曲线越线性,运动就越僵硬(或不那么流畅)。

如果一个点一开始是正数,而下一个点是负数,那么运动一开始就会很慢。当点值变得比之前的点值高时,运动加快。

这就是 CSS 中 Cubic-Bezier 点的含义。由于动画短,所以动作很细微。弹出框从正方形底部开始时缓慢开始,然后开始加速到顶部。

尽管您可以创建没有 Cubic-Bezier 曲线过渡的动画,但动画的差异如下:

有 Cubic-Bezier 曲线过渡的动画

CSS3贝塞尔曲线示例:创建链接悬停动画效果

没有 Cubic-Bezier 曲线过渡的动画

CSS3贝塞尔曲线示例:创建链接悬停动画效果

可以看到,动画为悬停效果增添了生气。

最后一组 CSS 涉及样式化弹出框底部的小箭头。要了解有关在 CSS 中如何制作三角形的更多信息,请查看此 CSS 技巧文章。

总结

我们创建了一个简约的按钮样式链接。链接具有基本的背景悬停效果,但我们并没有止步于此。我们添加了一个小弹出框来显示链接的文本。在 CSS3 Cubic-Bezier 塞尔曲线的帮助下,动画流畅且令人愉悦。

这类知识非常有用,可以作为你显示社交媒体帐户的网站设计的一部分。

本文示例演示和完整代码请访问如下地址,建议 PC 端打开 https://coding.zhanbing.site

以上就是CSS3贝塞尔曲线示例:创建链接悬停动画效果的详细内容,更多关于CSS3贝塞尔曲线的资料请关注三水点靠木其它相关文章!

HTML / CSS 相关文章推荐
实现CSS3中的border-radius(边框圆角)示例代码
Jul 19 HTML / CSS
纯CSS3制作的简洁蓝白风格的登录模板(非IE效果更好)
Aug 11 HTML / CSS
css3旋转木马_动力节点Java学院整理
Jul 12 HTML / CSS
HTML5 Canvas实现文本对齐的方法总结
Mar 24 HTML / CSS
详解HTML5新增标签
Nov 27 HTML / CSS
HTML5 Canvas像素处理使用接口介绍
Dec 02 HTML / CSS
canvas实现二维码和图片合成的示例代码
Aug 01 HTML / CSS
如何让pre和textarea等HTML元素去掉滚动条自动换行自适应文本内容高度
Aug 01 HTML / CSS
如何在Canvas上的图形/图像绑定事件监听的实现
Sep 16 HTML / CSS
HTML5 body设置全屏背景图片的示例代码
Dec 08 HTML / CSS
css3实现的加载动画效果
Apr 07 HTML / CSS
CSS filter 有什么神奇用途
May 25 HTML / CSS
CSS3实现菜单悬停效果
Nov 17 #HTML / CSS
详解CSS3:overflow属性
Nov 17 #HTML / CSS
详解css3中的伪类before和after常见用法
Nov 17 #HTML / CSS
CSS3+HTML5+JS 实现一个块的收缩与展开动画效果
Nov 17 #HTML / CSS
10种CSS3实现的loading动画,挑一个走吧?
Nov 16 #HTML / CSS
详解CSS3媒体查询响应式布局bootstrap 框架原理实战(推荐)
Nov 16 #HTML / CSS
CSS3 实现穿梭星空动画
Nov 13 #HTML / CSS
You might like
WindowsXP中快速配置Apache+PHP5+Mysql
2008/06/05 PHP
说明的比较细的php 正则学习实例
2008/07/30 PHP
php 获取文件行数的方法总结
2016/10/11 PHP
PHP中获取文件创建日期、修改日期、访问时间的方法
2016/11/05 PHP
基于jquery的给文章加入关键字链接
2010/10/26 Javascript
jQuery延迟加载图片插件Lazy Load使用指南
2015/03/25 Javascript
Angular实现form自动布局
2016/01/28 Javascript
一句jQuery代码实现返回顶部效果(简单实用)
2016/12/28 Javascript
JavaScript的setter与getter方法
2017/11/29 Javascript
基于ajax及jQuery实现局部刷新过程解析
2020/09/12 jQuery
解决vue 使用axios.all()方法发起多个请求控制台报错的问题
2020/11/09 Javascript
基于Python实现一个简单的银行转账操作
2016/03/06 Python
Python cookbook(数据结构与算法)实现对不原生支持比较操作的对象排序算法示例
2018/03/15 Python
基于python OpenCV实现动态人脸检测
2018/05/25 Python
详解多线程Django程序耗尽数据库连接的问题
2018/10/08 Python
opencv实现静态手势识别 opencv实现剪刀石头布游戏
2019/01/22 Python
用Python逐行分析文件方法
2019/01/28 Python
在Python中如何传递任意数量的实参的示例代码
2019/03/21 Python
pandas中遍历dataframe的每一个元素的实现
2019/10/23 Python
python实现的多任务版udp聊天器功能案例
2019/11/13 Python
Python如何实现在字符串里嵌入双引号或者单引号
2020/03/02 Python
python利用os模块编写文件复制功能——copy()函数用法
2020/07/13 Python
python virtualenv虚拟环境配置与使用教程详解
2020/07/13 Python
python为什么要安装到c盘
2020/07/20 Python
利用HTML5的新特点实现图片文件异步上传
2014/05/29 HTML / CSS
StubHub意大利:购买和出售全球演唱会和体育赛事门票
2017/11/21 全球购物
英国邮购活的植物主要供应商:Gardening Direct
2019/01/28 全球购物
班级聚会策划书
2014/01/16 职场文书
主管竞聘书范文
2014/03/31 职场文书
信息技术课后反思
2014/04/27 职场文书
勤俭节约演讲稿
2014/05/08 职场文书
外贸业务员求职信
2014/06/16 职场文书
纪检干部对照检查材料
2014/08/22 职场文书
升国旗演讲稿
2014/09/05 职场文书
听课评课活动心得体会
2016/01/15 职场文书
Go缓冲channel和非缓冲channel的区别说明
2021/04/25 Golang