Codepen"有趣的按钮"小项目知识点总结

1.项目介绍

该项目总共包含16个按钮，鼠标悬浮时会触发不同的动画效果。项目链接完成的项目地址项目链接

1.1 项目基础代码

项目的HTML代码如下

html 复制代码

<div class="wrapper">
  <button class="custom-btn btn-1">Read More 1</button>
  <button class="custom-btn btn-2">Read More 2</button>
  <button class="custom-btn btn-3"><span>Read More 3</span></button>
  <button class="custom-btn btn-4"><span>Read More 4</span></button>
  <button class="custom-btn btn-5"><span>Read More 5</span></button>
  <button class="custom-btn btn-6"><span>Read More 6</span></button>
  <button class="custom-btn btn-7"><span>Read More 7</span></button>
  <button class="custom-btn btn-8"><span>Read More 8</span></button>
  <button class="custom-btn btn-9">Read More 9</button>
  <button class="custom-btn btn-10">Read More 10</button>
  <button class="custom-btn btn-11">Read More 11</button>
  <button class="custom-btn btn-12"><span>Click!</span><span>Read More 12</span></button>
  <button class="custom-btn btn-13">Read More 13</button>
  <button class="custom-btn btn-14">Read More 14</button>
  <button class="custom-btn btn-15">Read More 15</button>
  <button class="custom-btn btn-16">Read More 16</button>
</div>

项目中将所有按钮的公共样式都放在同一个类custom-btn中，代码如下。

css 复制代码

.custom-btn {
  width: 120px;
  height: 35px;
  display: inline-block;
  position: relative;
  margin: 25px 25px 25px 25px;
  color: #FFF;
  background: transparent;
  border-radius: 5px;
  cursor: pointer;
}

2.项目内容

在该部分中，对动画效果类似的按钮抽取1-2个案例进行描述

2.1 按钮1

2.1.1 实现效果

触发hover时，按钮的背景会旋转180°。效果如下面两张图所示。

-------->

2.1.2 实现思路

给按钮添加伪元素实现初始状态的背景效果，通过绝对定位结合width: 100%; height:100%属性实现
给:hover:after设置transform属性给伪元素添加动画
由于按钮宽高不一致，会导致翻转过程中超出按钮区域，使用overflow: hidden解决该问题

2.1.3 实现代码

css 复制代码

.btn-9 {
  border: none;
  overflow: hidden;
}
.btn-9:after {
  position: absolute;
  content: " ";
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #1fd1f9;
  background-image: linear-gradient(315deg, #1fd1f9 0%, #b621fe 74%);
  transition: all 1s ease;
}
.btn-9:hover:after {
  transform: scale(2) rotate(180deg);
}

2.2 按钮13

2.2.1 实现效果

鼠标悬浮在按钮上，新背景色从上到下移动并填满整个按钮区域的动画效果；鼠标离开按钮时，新背景色从上到下移动直到完全消失。效果如下图所示。

-------->

2.2.2 实现思路

设置CSS伪元素------:after添加动画样式通过绝对定位控制其初始位置；
通过伪类:hover控制显示与隐藏；
给伪类添加:after伪元素实现鼠标经过触发动画；

2.2.3 实现代码

由于动画效果出现是从上到下，:hover:after可以用来设定伪元素初始位置，所以设置top:0属性；当鼠标离开按钮动画消失方向也是从上到下，所以:after伪元素设置bottom:0

css 复制代码

.btn-13 {
  background-color: #89d8d3;
  background-image: linear-gradient(315deg, #89d8d3 0%, #03c8a8 74%);
  border: none;
  z-index: 0;
}

.btn-13:after {
  position: absolute;
  content: "";
  width: 100%;
  height: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  border-radius: 5px;
  background-color: #4dccc6;
  background-image: linear-gradient(315deg, #4dccc6 0%, #96e4df 74%);
  box-shadow: -7px -7px 20px 0px #fff9, -4px -4px 5px 0px #fff9, 7px 7px 20px 0px #0002, 4px 4px 5px 0px #0001;
  transition: all 0.3s ease;
}

.btn-13:hover {
  color: #fff;
}

.btn-13:hover:after {
  top: 0;
  height: 100%;
}

2.3 按钮14

2.2.1 实现效果

鼠标悬浮在按钮上，新背景色从下到上移动并填满整个按钮区域的动画效果；鼠标离开按钮时，新背景色从下到上移动直到完全消失。效果如下面两张图所示。

-------->

2.2.2 实现思路

该按钮的实现思路与按钮13大体相同，差别在于触发动画后填充和消失的方向不同，按钮14动画的出现和消失方向都是从下到上；

2.2.3 实现代码

对应的给:hover:after设置bottom: 0; top: auto;属性，:after设置top: 0;控制动画方向。

css 复制代码

.btn-14 {
  background: rgb(255,151,0);
  border: none;
  z-index: 1;
}

.btn-14:after {
  position: absolute;
  content: "";
  width: 100%;
  height: 0;
  top: 0;
  left: 0;
  z-index: -1;
  border-radius: 5px;
  background-color: #4dccc6;
  background-image: linear-gradient(315deg, #4dccc6 0%, #96e4df 74%);
  box-shadow: -7px -7px 20px 0px #fff9, -4px -4px 5px 0px #fff9, 7px 7px 20px 0px #0002, 4px 4px 5px 0px #0001;
  transition: all 0.3s ease;
}

.btn-14:hover {
  color: #FFF;
}

.btn-14:hover:after {
  top: 100%;
  bottom: 0;
  height: 100%;
}

按钮（15、16）与按钮（13、14）大同小异，仅动画出现和消失方向改为了横向。这里就不再用篇幅描述。

2.4 按钮1

2.4.1 实现效果

触发hover时，按钮的背景色发生改变。效果如下图所示。

-------->

2.4.2 实现思路

该按钮通过给伪类:hover设置对应样式即可。实现思路比较简单，就直接上代码。其中linear-gradient属性

2.4.3 实现代码

css 复制代码

.btn-1 {
    background: rgb(6,14,131);
    background: linear-gradient(0deg, rgba(6,14,131,1) 0%, rgba(12,25,180,1) 100%);
    border: none;
}

.btn-1:hover {
    background: rgb(0,3,255);
    background: linear-gradient(0deg, rgba(0,3,255,1) 0%, rgba(2,126,251,1) 100%);
}

按钮2与按钮1类似，鼠标悬浮后会给按钮添加阴影效果，用box-shadow实现。

2.5 按钮3

2.5.1 实现效果

触发hover时，按钮的四周边缘出现线条，分别从左下和右上角开始填满四周。效果如下图所示。

--------> -------->

2.5.2 实现思路

首先上下左右四个边框线需要4个伪元素，通过给按钮以及span标签添加:after以及:before伪元素达到目的
通过设置伪元素的初始状态宽高0%以及:hover状态的对应宽高为100%，从而实现悬浮后填满整个按钮边框
通过transition属性给伪元素添加动画过渡效果

2.5.3 实现代码

css 复制代码

.btn-3 {
  background: rgb(0,172,238);
  background: linear-gradient(0deg, rgba(0,172,238,1) 0%, rgba(2,126,251,1) 100%);
  line-height: 35px;
  padding: 0;
  border: none;
}

.btn-3 span {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 100%;
}

.btn-3:before,
.btn-3:after {
  position: absolute;
  content: "";
  right: 0;
  top: 0;
  background: rgba(2,126,251,1);
  transition: all 0.5s ease;
}

.btn-3:before {
  height: 0%;
  width: 2px;
}

.btn-3:after {
  width: 0%;
  height: 2px;
}

.btn-3:hover {
  box-shadow: none;
  background: transparent;
}

.btn-3 span:hover {
  color: rgba(2,126,251,1);
}

.btn-3:hover:before {
  height: 100%;
}
.btn-3:hover:after {
  width: 100%;
}

.btn-3 span:before,
.btn-3 span:after {
  position: absolute;
  content: "";
  left: 0;
  bottom: 0;
  background: rgba(2,126,251,1);
  transition: all 0.5s ease;
}
.btn-3 span:before {
  width: 2px;
  height: 0%;
}
.btn-3 span:after {
  width: 0%;
  height: 2px;
}
.btn-3 span:hover:before {
  height: 100%;
}
.btn-3 span:hover:after {
  width: 100%;
}

2.6 按钮5

2.6.1 实现效果

触发hover后，按钮顶部和底部会出现两条延伸的边框线。效果如下图所示。

--------> -------->

2.6.2 实现思路

与按钮3边框线类似，通过给伪元素:after绝对定位和left: 0, bottom: 0固定在按钮左下角以及:before绝对定位和top: 0, right: 0固定在按钮右上角
通过:hover:after，:hover:before设置width: 100%实现鼠标悬浮填满按钮顶部和底部边框
通过transition实现动画过渡效果

2.6.3 实现代码

css 复制代码

.btn-5 {
  line-height: 35px;
  background: rgb(255,27,0);
  background: linear-gradient(0deg, rgba(255,27,0,1) 0%, rgba(251,75,2,1) 100%);
  padding: 0;
  border: none;
}

.btn-5:hover {
  color: rgb(255,27,0);
  background: transparent;
  box-shadow: none;
}

.btn-5:before {
  position: absolute;
  top: 0;
  right: 0;
  height: 2px;
  width: 0;
  content: "";
  background: rgb(255,27,0);
  transition:400ms ease all;
}

.btn-5:after {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0;
  content: "";
  background: rgb(255,27,0);
  transition: 1s ease all;
}

.btn-5:hover:after, .btn-5:hover:before {
  width: 100%;
}

2.7 按钮11

2.7.1 实现效果

每隔一段时间出现从左至右的白色渐变动画，效果如下图所示。

-------->

2.7.2 实现思路

通过给伪元素设置animation属性添加动画,通过scale变化伪元素大小，rotate旋转伪元素

2.7.3 实现代码

css 复制代码

.btn-11 {
  border: none;
  background: rgb(251,33,117);
  background: linear-gradient(0deg, rgba(251,33,117,1) 0%, rgba(234,76,137,1) 100%);
  color: #fff;
  overflow: hidden;
}
.btn-11:before {
  position: absolute;
  content: "";
  display: inline-block;
  left: 0;
  width: 30px;
  height: 100%;
  background-color: #fff;
  animation: btn11 3s ease-in-out infinite;
}
@keyframes btn11 {
  0% {
    transform: scale(0) rotate(45deg);
    opacity: 0;
  }
  60% {
    transform: scale(0) rotate(45deg);
    opacity: 0.5;
  }
  80% {
    transform: scale(4) rotate(45deg);
    opacity: 1;
  }
  100% {
    transform: scale(50) rotate(45deg);
    opacity: 0;
  }
}

3.知识拓展

对项目涉及到的部分知识进行拓展学习

项目中按钮的动态效果主要是通过transition、transform、animation三个属性实现。由于平时用得较少，导致对这三个属性不太熟悉，借此机会拓展熟悉一下这三个CSS动画属性

3.1 transition属性

transition设定元素属性变化时的过渡效果，对应为4个属性的缩写，分别是transition-property、transition-duration、transition-timing-function、transition-delay，属性解释如下表

属性	解释
transition-property	设置元素过渡的属性
transition-timing-function	过渡效果的变化速度曲线
transition-duration	定义过渡效果持续时间
transition-delay	定义过渡效果开始的延迟时间

3.2 transform属性

transform属性针对元素本身进行移动、缩放、旋转、扭曲操作。分别对应以下几种属性名

属性	效果	例子	解释
rotate	旋转	`transform: rotate(30deg)`	顺时针旋转30°
skew	扭曲	`transform: skew(30deg,10deg)`	x方向旋转30°，y方向旋转10°
scale	缩放	`transform: scale(2, 1.5)`	x方向放大2倍，y方向放大1.5倍
translate	移动	`transform: translate(100px,20px)`	向右平移100px，向左平移20px

旋转、移动、缩放都比较好理解，扭曲的变化方式不太好理解。下图为transform: skew(30deg)的示例，以元素中心点transform-origin为基点旋转30°

3.3 animation

animation针对动画效果引入了"帧"概念，可以对一段动画中帧的效果进行定义。

animation属性是一个缩写，其包含下列属性

arduino 复制代码

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

其中各属性的解释如下表

属性	解释
name	动画关键帧的名称
duration	动画执行时间
timing-function	动画执行速度曲线,可取ease、linear等值
delay	动画执行延迟时间
iteration-count	动画循环次数，infinite表循环执行
direction	动画播放方向，根据定义帧可以顺放或者倒放
fill-mode	元素播放前后状态
play-state	动画播放状态

其中，animation动画需要结合@keyframes关键字定义动画的关键帧样式，以下是一个动画关键帧定义代码

css 复制代码

@keyframe animationName{
    from {
        width: 200px;
        opacity: 0;
    }
    50% {
        width: 100px;
        opacity: 0.9;
    }
    to {
        width: 150px;
        opacity: 0;
    }
}

上述代码定义了一个名为animationName的动画关键帧，包含三个关键帧。from等同于0%代表动画起始状态的元素样式，50%代表动画执行一半的关键帧，to等同于100%表示动画结束状态的元素样式。

3.4 总结

animation 动画-关键帧、往复性

transition 过渡-属性、触发动作、一次性

transform 变换-复杂的变换参数，包含旋转、移动、缩放、扭曲

除了CSS可以实现动画，还有JS的方式实现动画，后续会抽时间针对JS实现动画的方法进行拓展学习。

参考文章

Codepen“有趣的按钮”小项目知识点总结

Codepen"有趣的按钮"小项目知识点总结

1.项目介绍

1.1 项目基础代码

2.项目内容

2.1 按钮1

2.1.1 实现效果

2.1.2 实现思路

2.1.3 实现代码

2.2 按钮13

2.2.1 实现效果

2.2.2 实现思路

2.2.3 实现代码

2.3 按钮14

2.2.1 实现效果

2.2.2 实现思路

2.2.3 实现代码

2.4 按钮1

2.4.1 实现效果

2.4.2 实现思路

2.4.3 实现代码

2.5 按钮3

2.5.1 实现效果

2.5.2 实现思路

2.5.3 实现代码

2.6 按钮5

2.6.1 实现效果

2.6.2 实现思路

2.6.3 实现代码

2.7 按钮11

2.7.1 实现效果

2.7.2 实现思路

2.7.3 实现代码

3.知识拓展

3.1 transition属性

3.2 transform属性

3.3 animation

3.4 总结

参考文章