【小白记录】CSS实现鼠标滑过边框动画

一、属性介绍

justify-content 属性用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式

align-content 属性对齐交叉轴上的各项（垂直）。

transition 属性允许你在元素状态改变时控制过渡效果。

transition-delay属性指定过渡效果开始之前的延迟时间，以秒或毫秒为单位。

transition-timing-function 属性指定过渡效果的速度曲线。它可以是 linear（线性）、ease（渐入渐出）、ease-in（渐入）、ease-out（渐出）、ease-in-out（先渐入后渐出）等等。

:hover在鼠标移到链接上时添加的特殊样式。

二、代码实现

*{
#初始化页面
  margin: 0;
  padding: 0;
}
.huanyinganniu{
 display: flex;
  justify-content: center;
  align-items: first baseline;
  width:100vw;
  height:50vh;
}
.huanyinganniu a{
  position: relative;
  display: block;
  width: 140px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  margin: 40px;
  color: plum;
  text-decoration: none;
  font-size: 20px;
#动画过渡，all是所有元素 0.3s是完成时间 最后是方式先渐入后渐出
  transition: all 0.3s ease-in-out;
}
.huanyinganniu a::before,
.huanyinganniu a::after{
#将两伪元素相同类型写在一起
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  border: 2px solid plum;
#最后的0.3s是延迟时间
  transition: all 0.3s ease-in-out 0.3s;
}
.huanyinganniu a::before{
  top: 0;
  left: 0;
#删除左边元素的右、下边框
  border-right: 0;
  border-bottom: 0;
}
.huanyinganniu a::after{
  right: 0;
  bottom: 0;
#删除右边元素的左、上边框
  border-top: 0;
  border-left: 0;
}
.huanyinganniu a:hover{
  background-color: plum;
  color: #000;
  box-shadow: 0 0 50px plum;
#below是下倒影 1px是倒影和元素的相隔距离 最后是渐变色
  -webkit-box-reflect: below 1px linear-gradient(transparent,rgba(0,0,0,0.3));
#延迟时间
  transition-delay: 0.4s;
}
.huanyinganniu a:hover::before,
.huanyinganniu a:hover::after{
  width: 138px;
  height: 58px;
  transition-delay: 0s;
}

实现结果

指针未指向时

指针指向时

 三、目前进度

目前已完成欢迎页的设置，登录页和注册页。