前端动画专题(三):撩人的按钮特效

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/AsuraDong/article/details/98179238

本文来自「心谭博客」《动画设计·按钮特效》,更多文章放在了Github

欢迎交流和Star

特效一览

滑箱

果冻

脉冲

闪光

气泡

滑箱特效

效果图

原理

因为 button 元素可以使用 before/after 伪元素,所以借助伪元素,可以实现动态图中的遮盖层。

为了避免回流重绘,滑箱的运动方向是垂直方向,所以使用scaleY属性。对于动画的方向,需要借助transform-origin改变动画原点。

代码实现

html:

<button>xin-tan.com</button>

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属性并且让其生效,要保证其大于 ::beforez-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);
}

参考链接

更多文章

展开阅读全文

纯代码绘制漂亮特效动画按钮

12-29

[img=http://hi.csdn.net/attachment/201112/29/209260_1325145431S9Jj.png][/img]rnrn[code=VB.NET]Imports System.ComponentModelrn _rnPublic Class DSButtonrn Private _ButtonColor As Color = Color.Whitern Private SF As New System.Drawing.StringFormatrn Private _Text As Stringrn rn Public Property ButtonColor As Colorrn Getrn Return _ButtonColorrn End Getrn Set(ByVal value As Color)rn _ButtonColor = valuern MakeRoundedRect(RoundRectValue, Me, Color.FromArgb(255, ButtonColor.R / 255 * 50, ButtonColor.G / 255 * 50, ButtonColor.B / 255 * 50))rn End Setrn End Propertyrn Public Property RoundRectValue As Integer = 10rn Private nIndex As Integer = 0rn Private IsMouseEnter As Boolean = Falsern Public Property IsShowAnimate As Boolean = Falsern Public Property ButtonText As Stringrn Getrn Return _Textrn End Getrn Set(ByVal value As String)rn _Text = valuern MakeRoundedRect(RoundRectValue, Me, Color.FromArgb(255, ButtonColor.R / 255 * 50, ButtonColor.G / 255 * 50, ButtonColor.B / 255 * 50))rn End Setrn End Propertyrn Private _TextColor As Color = Color.Whitern Public Property TextColor As Colorrn Getrn Return _TextColorrn End Getrn Set(ByVal value As Color)rn _TextColor = valuern MakeRoundedRect(RoundRectValue, Me, Color.FromArgb(255, ButtonColor.R / 255 * 50, ButtonColor.G / 255 * 50, ButtonColor.B / 255 * 50))rn End Setrn End Propertyrnrn Private Sub DSButton_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Loadrn SetStyle(ControlStyles.UserPaint, True)rn SetStyle(ControlStyles.AllPaintingInWmPaint, True)rn SetStyle(ControlStyles.ResizeRedraw, True)rn SetStyle(ControlStyles.Selectable, True)rn SF.LineAlignment = StringAlignment.Centerrn SF.Alignment = StringAlignment.Centerrn MakeRoundedRect(RoundRectValue, Me, Color.FromArgb(255, ButtonColor.R / 255 * 50, ButtonColor.G / 255 * 50, ButtonColor.B / 255 * 50))rn End Subrn Private Sub MakeRoundedRect(ByVal Rounded As Integer, ByVal Ct As Control, ByVal ButtonColor As Color)rn If Ct.BackgroundImage IsNot Nothing Then Ct.BackgroundImage.Dispose()rn Ct.BackgroundImage = New Bitmap(Ct.Width, Ct.Height)rn Dim WW, HH As Integerrn WW = Ct.Width - 1rn HH = Ct.Height - 1rn Using G As Graphics = Graphics.FromImage(Ct.BackgroundImage)rn G.SmoothingMode = Drawing2D.SmoothingMode.AntiAliasrn G.TextRenderingHint = Drawing.Text.TextRenderingHint.ClearTypeGridFitrn Using Gp As New Drawing2D.GraphicsPathrn Gp.AddArc(New Rectangle(0, 0, Rounded, Rounded), 180, 90)rn Gp.AddArc(New Rectangle(WW - Rounded, 0, Rounded, Rounded), -90, 90)rn Gp.AddArc(New Rectangle(WW - Rounded, HH - Rounded, Rounded, Rounded), 0, 90)rn Gp.AddArc(New Rectangle(0, HH - Rounded, Rounded, Rounded), 90, 90)rn Gp.AddLine(New Point(0, HH - Rounded), New Point(0, Rounded / 2))rn Using Lg As New Drawing2D.LinearGradientBrush(New Point(0, 0), New Point(0, HH), ControlPaint.Dark(ButtonColor, 0.5), ButtonColor)rn G.FillPath(Lg, Gp)rn G.DrawPath(Pens.Black, Gp)rn End Usingrn End Usingrn WW = WW - 3rn HH = HH - 3rn Using Gp As New Drawing2D.GraphicsPathrn Gp.AddArc(New Rectangle(3, 3, Rounded, Rounded), 180, 90)rn Gp.AddArc(New Rectangle(WW - Rounded, 3, Rounded, Rounded), -90, 90)rn Gp.AddArc(New Rectangle(WW - Rounded, HH / 2 - Rounded - 1, Rounded, Rounded), 0, 90)rn Gp.AddArc(New Rectangle(3, HH / 2 - Rounded - 1, Rounded, Rounded), 90, 90)rn Using Lg As New Drawing2D.LinearGradientBrush(New Point(0, 0), New Point(0, HH / 2), Color.FromArgb(220, 255, 255, 255), Color.FromArgb(50, 255, 255, 255))rn G.FillPath(Lg, Gp)rn End Usingrn End Usingrn Using Gp As New Drawing2D.GraphicsPathrn Gp.AddEllipse(New Rectangle(3, HH / 2 + 10, WW, HH / 2))rn Using Lg As New Drawing2D.PathGradientBrush(Gp)rn Lg.CenterColor = Color.FromArgb(150, 255, 255, 255)rn Lg.SurroundColors = New Color() Color.Transparentrn Gp.FillMode = Drawing2D.FillMode.Windingrn G.FillPath(Lg, Gp)rn End Usingrn End Usingrn Tryrn If _Text.Length <> 0 Then G.DrawString(_Text, Me.Font, New SolidBrush(TextColor), New Rectangle(0, 0, Me.Width, Me.Height), SF)rn Catchrn End Tryrn End Usingrn End Subrnrn Private Sub DSButton_MouseClick(ByVal sender As Object, ByVal e As System.Windows.Forms.MouseEventArgs) Handles Me.MouseClickrn End Subrnrn Private Sub DSButton_MouseDown(ByVal sender As Object, ByVal e As System.Windows.Forms.MouseEventArgs) Handles Me.MouseDownrn If e.Button = MouseButtons.Left Thenrn MakeRoundedRect(RoundRectValue, Me, Color.Black)rn End Ifrn End Subrnrn Private Sub DSButton_MouseEnter(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.MouseEnterrn If DesignMode = False Thenrn IsMouseEnter = Truern Timer1.Enabled = Truern End Ifrn End Subrnrn Private Sub DSButton_MouseLeave(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.MouseLeavern If DesignMode = False Thenrn IsMouseEnter = Falsern Timer1.Enabled = Truern End Ifrn End Subrnrn Private Sub DSButton_MouseUp(ByVal sender As Object, ByVal e As System.Windows.Forms.MouseEventArgs) Handles Me.MouseUprn MakeRoundedRect(RoundRectValue, Me, _ButtonColor)rn End Subrnrn Private Sub DSButton_SizeChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.SizeChangedrn If Me.IsHandleCreated Thenrn MakeRoundedRect(RoundRectValue, Me, ButtonColor)rn End Ifrn End Subrnrn Private Sub Timer1_Tick(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Timer1.Tickrn Select Case IsMouseEnterrn Case Truern If IsShowAnimate = True Thenrn nIndex = IIf(nIndex + 30 >= 225, 255, nIndex + 30)rn If nIndex >= 255 Then Timer1.Enabled = Falsern Elsern nIndex = 255rn Timer1.Enabled = Falsern End Ifrn Case Falsern nIndex = IIf(nIndex - 20 <= 50, 50, nIndex - 20)rn If nIndex <= 50 Then Timer1.Enabled = Falsern End Selectrn Tryrn MakeRoundedRect(RoundRectValue, Me, Color.FromArgb(255, ButtonColor.R / 255 * nIndex, ButtonColor.G / 255 * nIndex, ButtonColor.B / 255 * nIndex))rn Catchrn End Tryrn End SubrnEnd Classrn[/code]rn[url=http://download.csdn.net/detail/dylike/3981190]源码下载[/url]rn 论坛

没有更多推荐了,返回首页