杭州程序员张张:实战|使用CSS3 Cubic-Bezier创建动画链接悬停效果

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

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

这是我们最后的效果：

让我们开始吧!

HTML部分

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

Instagram

Github

复制代码

当您将鼠标悬停在链接上时，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 .5s;

-webkit-transition: all .5s;

-moz-transition: all .5s;

transition: all .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 .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);

-webkit-transition: all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);

-moz-transition: all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);

transition: all .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曲线过渡的动画

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

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

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

总结

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

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

杭州程序员张张:实战|使用CSS3 Cubic-Bezier创建动画链接悬停效果相关推荐

创建font_使用CSS3 CubicBezier创建动画链接悬停效果
我们将使用CSS3动画过渡来创建简单但引人入胜的链接悬停效果,将鼠标悬停在链接上时,会弹出一个小弹出框.我们还将看一下CSS3 Cubic-Bezier(贝塞尔)曲线,它是CSS过渡,为弹出框提供了更 ...
寻找优秀的程序员之实战指南-2
寻找优秀的程序员之实战指南 --选自<软件随想录:程序员部落酋长Joel谈软件> [好消息]本书今天(12.10)互动有货,感兴趣的朋友可以逛逛去 [续]http://blog.csdn ...
寻找优秀的程序员之实战指南-1
寻找优秀的程序员之实战指南 --选自<软件随想录:程序员部落酋长Joel谈软件> [好消息]本书今天(12.10)互动有货,感兴趣的朋友可以逛逛去 2006 年 9 月 7 日 ,星期四 ...
好程序员web前端分享CSS3边框
好程序员web前端分享CSS3 边框,通过 CSS3,您能够创建圆角边框,向矩形添加阴影,使用图片来绘制边框 - 并且不需使用设计软件,比如 PhotoShop. 在本章中,您将学到以下边框属性: b ...
本周杭州程序员工资大调查，高于深圳和广州
今天晚上11点,爬了某招聘网站,获取近7日内杭州的程序员工资2344条.其中,有工资的2275条.本文分别统计了工资的分布,工资和学历,工作经验和公司的性质,规模,产业的关系. 这里的程序员包括普通程 ...
用c语言编写动态爱心树表白,程序员用HTML5制作的爱心树表白动画
HTML代码如下: 程序员用HTML5制作的爱心树表白动画- 柯乐义本页面采用HTML5技术,目前您的浏览器无法显示,请使用支持HTML5的浏览器查看本页. 亲爱的何文琪: 曾经, 有一份真挚的爱情 ...
Java程序员从笨鸟到菜鸟之(序言)+全部链接
http://blog.csdn.net/csh624366188 大学上了一年半,接触java也一年半了,虽然中间也有其他东西的学习,但是还是以java为主路线,想想这一年半,除去前半年几乎全玩了, ...
厉害了我的“猿”！杭州程序员手工打造波音 737 模拟驾驶舱
Python实战社群 Java实战社群长按识别下方二维码,按需求添加扫码关注添加客服进Python社群▲ 扫码关注添加客服进Java社群▲ 来源:央视新闻客户端 "经常有人问我,你咋 ...
从零学python黑马程序员_Python实战编程--从零学Python/Python应用编程丛书
导语内容提要黑马程序员编著的<Python实战编程--从零学Python>涵盖了Python开发的核心知识.其中,第1-13章主要讲解的是Python的核心语法,包括基本概念和语句.风 ...

杭州程序员张张:实战|使用CSS3 Cubic-Bezier创建动画链接悬停效果

杭州程序员张张:实战|使用CSS3 Cubic-Bezier创建动画链接悬停效果相关推荐

最新文章

热门文章