有趣的css - 背景收缩动画按钮

艺股

于 2024-08-10 03:23:26 发布

阅读量20

点赞数

文章标签： css 前端

大家好，我是 Just，这里是「设计师工作日常」，今天分享的是借助 css transition 属性绘制出一个背景收缩交互的一个按钮。

最新文章通过公众号「设计师工作日常」发布。

整体效果

有趣的css - 背景收缩动画按钮_动效设计

知识点：
① 关于 transition 过渡属性的运用
② :before 、 :after 伪元素以及 content 的属性使用

思路：
创建按钮标签，然后当鼠标悬浮时，利用伪元素以及内阴影属性变化实现按钮背景变化。

核心代码部分，简要说明了写法思路；完整代码在最后，可直接复制到本地运行。

核心代码

html 代码

创建一个按钮标签。

css 部分代码

.btn56{
  width: 120px;
  height: 46px;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 2px;
  background: transparent;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border: 1px solid #457356;
  border-radius: 23px;
  color: #457356;
  box-sizing: border-box;
  transition: color 0.6s cubic-bezier(0.65, 0.05, 0.36, 1);
  overflow: hidden;
}
.btn56:before{
  content: '';
  position: absolute;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  display: block;
  transition: box-shadow 0.6s cubic-bezier(0.65, 0.05, 0.36, 1);
}
.btn56:after{
  content: attr(data-text);
  position: absolute;
  display: block;
  z-index: 5;
}
.btn56:hover{
  color: #fff;
}
.btn56:hover:before {
  box-shadow: inset 0 0 0 120px #457356;
}
.btn56:active{
  transform: scale(0.99) translateY(1px);
}

1、给 .btn56 标签增加样式，边框、字体颜色、以及背景设定透明，定义 overflow: hidden 属性，溢出部分隐藏。

2、利用 :before 创建伪元素，并且样式定义成一个圆形，设置 transition 属性，定义 box-shadow 过渡时间以及曲线。

3、利用 :after 创建伪元素，通过 content 属性搭配 attr 创建字体内容。

4、通过 :hover 和 :active 判断鼠标状态，根据鼠标状态来改变按钮样式，并且启动 transition 过渡效果。

完整代码如下

html 页面

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <title>背景收缩动画按钮</title>
  </head>
  <body>
    <div class="app">
      <div class="btn56" data-text="一个按钮"></div>
    </div>
  </body>
</html>

css 样式

/** style.css **/
.app{
  width: 100%;
  height: 100vh;
  background-color: #ffffff;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.btn56{
  width: 120px;
  height: 46px;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 2px;
  background: transparent;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border: 1px solid #457356;
  border-radius: 23px;
  color: #457356;
  box-sizing: border-box;
  transition: color 0.6s cubic-bezier(0.65, 0.05, 0.36, 1);
  overflow: hidden;
}
.btn56:before{
  content: '';
  position: absolute;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  display: block;
  transition: box-shadow 0.6s cubic-bezier(0.65, 0.05, 0.36, 1);
}
.btn56:after{
  content: attr(data-text);
  position: absolute;
  display: block;
  z-index: 5;
}
.btn56:hover{
  color: #fff;
}
.btn56:hover:before {
  box-shadow: inset 0 0 0 120px #457356;
}
.btn56:active{
  transform: scale(0.99) translateY(1px);
}