效果如下：
这个很简单，直接上代码，如果对字体图标不熟悉的同学可以看这篇文章：
(45条消息) CSS之如何从icomoon引入及使用字体图标_qwerty053的博客-****博客
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?w0aq5k');
src: url('fonts/icomoon.eot?w0aq5k#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?w0aq5k') format('truetype'),
url('fonts/icomoon.woff?w0aq5k') format('woff'),
url('fonts/icomoon.svg?w0aq5k#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
#one {
width: 300px;
height: 30px;
border-radius: 25px;
border: 2px solid pink;
margin: 40px auto;
}
#one::before {
content: "";
width: 0;
height: 30px;
border-radius: 25px;
background-color: rgb(151, 183, 241);
display: block;
transition: width 1.5s ease;
}
#one:hover::before {
width: 250px;
}
#two{
margin: 0 auto;
width: 100px;
height: 100px;
background-color: coral;
border-radius: 15px;
display: flex;
overflow: hidden;
}
#two div{
font-family: 'icomoon';
font-size:45px;
line-height: 100px;
margin-left: 23px;
letter-spacing: 30px;
transition: margin-left 0.3s ease-in,background-color 0.3s ease-in;
}
#two:hover div{
background-color: gainsboro;
margin-left:-59px;
}
</style>
</head>
<body>
<div id="one"></div>
<div id="two">
<div></div>
</div>
</body>
</html>