实战-使用CSS3三次贝塞尔曲线创建动画链接悬停效果

当您将鼠标悬停在链接上时，span标签将成为弹出窗口。接下来，我们进入CSS。CSS样式和动画我们将div容器居中，以便两个链接在屏幕上居中。这也使得小弹出窗口的动画变得容易，因为它们将从链接的顶部弹出。div.container{显示：内联块；位置：绝对；顶部：50%；左：50%；-ms-transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);}接下来，我们为链接设置样式，创建一个简单的背景悬停效果，并定位社交媒体图标。一个{颜色：#fff;背景：#8a938b；边界半径：4px；文本对齐：居中；文字装饰：无；位置：相对；显示：内联块；宽度：120px；高度：100px；顶部：12px；边距：02px；-o-transition:all.5s;-webkit-transition:all.5s;-moz-transition:all.5s;;}a:hover{背景：#5a665e;}i{字体大小：45px;垂直对齐：中间；显示：内联块；位置：相对；做造型和动画。跨度{颜色：#666;位置：绝对；font-family:'ChelseaMarket',草书体；底部：0；左：-15px；右：-15px；填充：15px7px；-尺寸：14px；边界半径：5px；背景：#fff；可见性：隐藏；不透明度：0；-o-transition:all.5scubic-bezier(0.68,-0.55,0.265,1.55);:所有.5s立方贝塞尔(0.68,-0.55,0.265,1.55);-moz-transition:all.5scubic-bezier(0.68,-0.55,0.265,1.55);transition:all.5scubic-bezier(0.68,-0.55,0.265,1.55);}/*图标悬停时弹出文字*/a:hoverspan{bottom:130px;能见度：可见；opacity:1;}CSS3Cubic-Bezier曲线由定义的四个点p0、p1、p2和p3组成。点p0是曲线的起点，点p3是曲线的终点。曲线越线性，运动越僵硬（或流动性越差）。如果一开始一个点为正，下一个为负，则运动开始时会很慢。当点值变得高于之前的点值时，移动速度会加快。这就是Cubic-Bezier点在CSS中的含义。由于动画很短，动作很微妙。弹出窗口从正方形底部缓慢开始，然后开始加速向顶部移动。尽管您可以创建不带Cubic-Bezier过渡的动画，但这些动画有如下不同之处：具有Cubic-Bezier过渡的动画可以在没有Cubic-Bezier过渡的情况下看到，并且该动画为悬停效果增添了活力。最后一组CSS涉及样式化弹出窗口底部的小箭头。要了解有关如何在CSS中制作三角形的更多信息，请查看这篇CSS技巧文章。最后，我们创建了一个简约的按钮样式链接。链接具有基本的背景悬停效果，但我们并没有就此止步。我们添加了一个小弹出框来显示链接的文本。借助CSS3三次贝塞尔曲线，动画流畅且赏心悦目。作为显示社交媒体帐户的网站设计的一部分，这种知识非常有用。本文示例演示和完整代码请访问以下地址。PC端推荐打开https://coding.zhanbing.site