前端开发的小动画

在一周的小‘放松’后还是迎来了两周一度的考核周，熬夜又要开始了...

我们开始时的慢肝注定接下来的日子不会太简单，给本就不早睡的我多了一件熬夜的理由。

在最近的前端项目过程中，模拟网页总是给予了我太多的惊喜，后端的交互固然重要但对于前端而言，漂亮的页面不正是我们所向往的吗？

在前端项目开发中我们可能想让我们的页面更加好看，夺人眼球，简单的小动画是必不可少的，在此我简单的举例两个花朵浮动动画和按钮点击动画。

1.花朵浮动

//html代码 
<div class="flowerTran">
                <img src="../../花.png" alt="打赏">
                <b></b>
            </div>

//关键CSS代码
.flowerTran {
  margin: 0 auto;
  height: 75px;
  overflow: hidden;
  position: relative;
  width: 100px;
  text-align: center;
  z-index: 1;
}
.flowerTran img {
  height: 60px;
  width: 60px;
  left: 20px;
  top: 40px;
  position: absolute;
  transition: top .8s ease-out;
}
.flowerTran img:hover {
  top: 5px;
}
 .flowerTran b {
  background: #d67772;
  bottom: 0;
  height: 1.5px;
  left: 10px;
  margin: 0 auto;
  position: absolute;
  width: 80px;
  z-index: 2;
}

2.按钮点击开关

  <div class="appearNum">
            <!-- 开关 -->
            <p class="switch">
                <!-- 设置圆点 -->
                <span class="circle"></span>
            </p>
        </div>

CSS

.appearNum {
  margin-left: 20px;
}
.appearNum .switch {
  display: inline-block;
  width: 60px;
  height: 30px;
  border-radius: 25px;
  cursor: pointer;
  position: relative;
  border: 1px whitesmoke solid;
  background-color: #bababa;
}

.appearNum .switch .circle {
  width: 20px;
  height: 20px;
  position: absolute;
  left: 5px;
  top: 5px;
  background-color: gray;
  border-radius: 50%;
  transition: all .4s;
}

JS代码

// 开关
const switchText = document.querySelector('.switch');
const circle = document.querySelector('.circle');
let switchIt = 1;
switchText.addEventListener('click', function () {
    if (switchIt == 1) {
        switchText.style.background = '#00FF7F';
        circle.style.left = '35' + 'px';
        circle.style.background = 'white';
        switchIt = 0
    } else {
        switchText.style.background = '#bababa';
        circle.style.left = '5' + 'px';
        circle.style.background = 'gray';
        switchIt = 1;
    }
})

前端的小动画也是让用户给我们加分的小‘确幸’，其中肯定包含对CSS伪类和过渡的基本知识，所以在我接下来的项目中，在完成项目的前提下，我将了解更多的css知识。努力使自己的页面变更‘高级’，更能使人眼前一亮的感觉。在项目合作中我们也会遇到很多问题，但再坚持一会儿，黎明就在前方。

　　有一种精神，在你失意的时候，它教你学会坚强。在你受到挫折的时候，教你学会面对，在你受打击的时候，教你学会站起。它，就是坚持。