「这是我参与11月更文挑战的第16天，活动详情查看：2021最后一次更文挑战」

前言

上篇完善了一下一些CSS的问题。今天想锦上添花学习加点特效，很不幸最初想模仿的名叫馨客栈的网站倒闭了。网络域名过期了，只能根据最初的印象做了。等再找找其他的网站再继续模仿其他优秀的细节~

鼠标悬浮动画

纯CSS动画实现，在可以跳转的a标签上悬浮出现从无到有的包围效果，看图：

这个悬浮框选择了VUE的绿色，本来使黑色的，哈哈，还不错
先亮CSS完整代码：

<style>
/*元素样式，这个我最不在行，先做一个简单的出来，后面慢慢打磨*/
ul {
  overflow: hidden;
} /* 这个是浏览器的原因默认会有边距和填充 */
/* *{ margin:0; padding:0; } */
#root {
  height: 100%;
  display: flex;
  flex-direction: row;
}
#part_left {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 350px;
  flex-shrink: 0;
  background-color: #e4e8ec;
}

#ico {
  display: flex;
  margin-top: 20px;
  justify-content: center;
}
img {
  width: 120px;
}
#jump {
  height: 180px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
#jump ul {
  display: flex;
  width: 100%;
  flex-wrap: wrap; /*项目允许换行*/
  justify-content: space-around;
  margin: 0;
  padding: 30px;
  text-align: center;
}
#jump ul li {
  list-style-type: none;
  margin-top: 12px;
  width: 80px;
  font-weight: 600;
  font-size: 22px;
}

#only_menu {
  display: flex;
}
#menu_list {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  margin: 0;
  justify-content: space-around;
  padding: 30px;
  text-align: center;
}

#menu_list li {
  list-style-type: none;
  margin-top: 12px;
  width: 80px;
  font-weight: 500;
  font-size: 25px;
}

#part_right {
  display: flex;
  width: 100%;
  top: 50px;
  right: 50px;
  background-color: #e4e8ec;
}
#url_list li {
  list-style-type: none;
}
.menu_target {
  list-style-type: none;
  font-weight: 800;
  font-size: 28px;
}
.url_list_data {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.url_list_data li {
  margin-top: 12px;
  margin-bottom: 18px;
  width: 200px;
  height: 40px;
  background: #e4e8ec;
  display: flex;
  justify-content: center;
  align-items: center;
}
.url_list_data li a {
  font-weight: 500;
  font-size: 25px;
}

.btn {
  position: relative;
  padding: 10px 20px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 10px;
  transition: all 0.5s;
}

.btn::after,
.btn::before {
  content: " ";
  width: 10px;
  height: 10px;
  position: absolute;
  border: 0px solid #e4e8ec;
  transition: all 1s;
}

.btn::after {
  top: -1px;
  left: -1px;
  border-top: 5px solid #41B883;
  border-left: 5px solid #41B883;
}

.btn::before {
  bottom: -1px;
  right: -1px;
  border-bottom: 5px solid #41B883;
  border-right: 5px solid #41B883;
}

.btn:hover {
  border-top-right-radius: 10px;
  border-bottom-left-radius: 10px;
}
.btn:hover::before,
.btn:hover::after {
  width: 100%;
  height: 100%;
}

部分HTML代码(只有右半部分的代码)：

    <div id="part_right">
      <!-- 右侧网站导航栏 -->
      <ul id="url_list">
        <li v-for="item in url_lists" :key="item.ID">
          <!-- v:for嵌套循环，循环里面就不能用id定位元素了，要用class -->
          <div class="one_part">
            <div class="menu_target">{{ item.Name }}</div>
            <div class="url_list_data card">
              <li
                v-for="url_data in item.UrlLists"
                :key="url_data.ID"
                class="data-container"
              >
                <a :href="url_data.URL" class="btn">{{ url_data.Name }}</a>
              </li>
            </div>
          </div>
        </li>
      </ul>
    </div>

总结

:before :after 选择器

CSS动画原理主要是使用了CSS伪元素,现在元素前后添加内容为空格高宽为10的文字：

.btn::after,
.btn::before {
  content: " ";
  width: 10px;
  height: 10px;
  position: absolute;
  border: 0px solid #e4e8ec;
  transition: all 1s;
}

然后使用:hover用来监听鼠标的悬浮状态，悬浮之前高宽都是:

  width: 10px;
  height: 10px;

悬浮之后扩充到100%：

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

最后使用# transition 属性来控制动画的过渡时长 最后这个绿色的狂并不是伪元素本身，而是它的border,尝试去掉了一个top，效果如图：

到此为止就实现了一个简单的动画设置，下篇来写一写VUE操作页面的基本方法，分析一下循环可以优化的地方，整合一下CSS,去掉一些多余的的CSS。