前言：在网页中看到了好多特效，有js的也有css的，我们都知道三者相辅相成，初学者首学html+css，光知道js可以实现动态效果，那么css也可以实现动画效果。今天咱们学一个简单的下划线从中间到两边的动画效果。别眨眼！


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
      .div{
        width: 200px;
        height: 50px;
        background-color: #ddd;
        margin: 0 auto;
        position: relative;
      }
      .div::after{
        content: "";
        width: 0;
        height: 5px;
        background-color: blue;
        position: absolute;
        top: 100%;
        left: 50%;
        transition: all 0.8s;
      }
      .div:hover::after{
        left: 0%;
        width: 100%;
      }
</style>
</head>
<body>
<div class="div"></div>
</body>
</html>



在这里主要和大家说一下transition这个属性:

有的时候网页中的元素会因为我们鼠标的运动而发生形状的改变，这个时候，我们就要对于元素用到Transition ，从而对于元素的过渡状态进行一一的设置。

css特效：制作一个简单的特效，你的网页又上了一个档次！_css

哪个属性都并非完美，都存在一定的缺陷，该属性也并非例外

transition需要事件触发，无法再加载时完成； 

transition是一次性的，无法设置重复发生，除非事件一再触发；

transition只能定义开始状态和结束状态，不能定义中间状态；