console 命令行工具 X clear
console
<!DOCTYPE html>
<html>	
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style> 
*{
    margin: 0;
    padding: 0
}
.father{
    position: relative;
    overflow: hidden;
    width: 150px;
    height: 50px;
    margin: 100px auto;
    border: 1px solid #ccc;
    /* animation: animate 2s linear infinite */
}
.father::after{
    content: "";
    position: absolute;
    display: block;
    top: 50%;
    left: 50%;
    width:0;
    height:0;
    border-radius: 50%;
    transition: all 0.8s;
    background-color: blue;
}
.father:after{
    transform: translateX(-50%) translateY(-50%);
    /* height: 500px; */
}
.father:hover:after{
    height: 400px;
    width: 400px
}
</style>
</head>
<body>

<div class="father">
</div>


</body>
</html>