十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
本篇内容主要讲解“web前端怎么实现撩人的按钮特效”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“web前端怎么实现撩人的按钮特效”吧!
公司主营业务:成都网站设计、网站制作、移动网站开发等业务。帮助企业客户真正实现互联网宣传,提高企业的竞争能力。成都创新互联公司是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化,感谢他们对我们的高要求,感谢他们从不同领域给我们带来的挑战,让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。成都创新互联公司推出长宁免费做网站回馈大家。
滑箱:
果冻:
脉冲:
闪光:
气泡:
因为 button 元素可以使用 before/after 伪元素,所以借助伪元素,可以实现动态图中的遮盖层。
为了避免回流重绘,滑箱的运动方向是垂直方向,所以使用scaleY
属性。对于动画的方向,需要借助transform-origin
改变动画原点。
html:
css:
button { outline: none; border: none; z-index: 1; position: relative; color: white; background: #40a9ff; padding: 0.5em 1em; } button::before { content: ""; z-index: -1; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: #fa541c; transform-origin: center bottom; transform: scaleY(0); transition: transform 0.4s ease-in-out; } button:hover { cursor: pointer; } button:hover::before { transform-origin: center top; transform: scaleY(1); }
果冻特效可以分割成 5 个部分,所以无法简单通过
transition
来实现,要借助animation
。并且动画触发的时间点是鼠标移入的时候,因此
animation
要在:hvoer
中声明。
button { z-index: 1; color: white; background: #40a9ff; outline: none; border: none; padding: 0.5em 1em; } button:hover { cursor: pointer; animation: jelly 0.5s; }
下面开始编写 jelly 动画的特效。这个动画可以分解为 4 个部分:「初始 => 挤高 => 压扁 => 回到初始状态」。挤高 和 压扁这里都是通过scale
来实现的,代码如下:
@keyframes jelly { 0%, 100% { transform: scale(1, 1); } 33% { transform: scale(0.9, 1.1); } 66% { transform: scale(1.1, 0.9); } }
上面的动态已经仿真不错了,如果将 4 部分变成 5 部分:「初始 => 挤高 => 压扁 => 挤高 => 回到初始状态」。视觉上会有一种弹簧的特效,就像手压果冻后的效果:
@keyframes jelly { 0%, 100% { transform: scale(1, 1); } 25%, 75% { transform: scale(0.9, 1.1); } 50% { transform: scale(1.1, 0.9); } }
首先,还是去掉 button 的默认样式。注意设置 button 的z-index
属性并且让其生效,要保证其大于
::before
的
z-index
属性,防止 dom 元素被伪元素覆盖。
button { position: relative; z-index: 1; border: none; outline: none; padding: 0.5em 1em; color: white; background-color: #1890ff; } button:hover { cursor: pointer; }
剩下的就是设置伪元素。因为脉冲特效给人的感觉是“镂空”放大。因此,变化对象是
border
属性。而镂空的效果,是通过透明背景来实现的。
button::before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; bottom: 0; right: 0; border: 4px solid #1890ff; transform: scale(1); transform-origin: center; }
动画启动时间是鼠标移入,border 上变化的是颜色变淡和大小变小,透明度也逐渐变成 0。
button:hover::before { transition: all 0.75s ease-out; border: 1px solid#e6f7ff; transform: scale(1.25); opacity: 0; }
⚠️ transition 和 transform 是放在hover
状态下的伪元素,目的是让动画瞬间回到初始状态。
实现上依然是借助伪元素,闪光特效更多注重的是配色,动画方面实现的核心是利用rotate
来实现「倾斜」的效果,利用translate3d
来实现「闪动」的效果。
button { outline: none; border: none; z-index: 1; position: relative; color: white; background: #262626; padding: 0.5em 1em; overflow: hidden; --shine-width: 1.25em; } button::after { content: ""; z-index: -1; position: absolute; background: #595959; /* 核心代码:位置一步步调整 */ top: -50%; left: 0%; bottom: -50%; width: 1.25em; transform: translate3d(-200%, 0, 0) rotate(35deg); /* */ } button:hover { cursor: pointer; } button:hover::after { transition: transform 0.5s ease-in-out; transform: translate3d(500%, 0, 0) rotate(35deg); }
⚠️translate3d
除了避免重绘回流,还能启用 GPU 加速,性能更高。但之前为了方便讲述,一般使用的是translate
属性。
首先,还是禁用 button 元素的默认样式,并且调整一下配色:
button { outline: none; border: none; cursor: pointer; color: white; position: relative; padding: 0.5em 1em; background-color: #40a9ff; }
由于 button 的伪元素层级是覆盖 button 的,所以要设置
z-index
属性,防止伪元素遮盖显示。毕竟只想要背景色的遮盖,字体不需要遮盖。在上面的样式中添加:
button { z-index: 1; overflow: hidden; }
最后处理的是伪元素的变化效果。特效是从中心向四周蔓延,所以应该让其居中。
对于大小变化,还是利用scale
属性。
因为是圆形,所以将border-radius
设置为 50%即可。
button::before { z-index: -1; content: ""; position: absolute; top: 50%; left: 50%; width: 1em; height: 1em; border-radius: 50%; background-color: #9254de; transform-origin: center; transform: translate3d(-50%, -50%, 0) scale(0, 0); transition: transform 0.45s ease-in-out; } button:hover::before { transform: translate3d(-50%, -50%, 0) scale(15, 15); }
示例代码中的气泡特效是从中间向四周扩散,如果想要从左上角向右下角扩散呢?例如下图所示:
处理过程很简单,只需要改变一下气泡的初始位置即可。
button::before { z-index: -1; content: ""; position: absolute; width: 1em; height: 1em; border-radius: 50%; background-color: #9254de; /* 变化位置的代码 */ top: 0; left: 0; transform-origin: center; transform: scale3d(0, 0, 0); transition: transform 0.45s ease-in-out; /* *********** */ } button:hover::before { transform: scale3d(15, 15, 15); }
到此,相信大家对“web前端怎么实现撩人的按钮特效”有了更深的了解,不妨来实际操作一番吧!这里是创新互联网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!