效果图:
<div class="a"></div>
<style>
.a{
position: fixed;
left: -30px;
bottom: 100px;
color: red;
padding: 15px;
width: 30px;
height: 30px;
background: lightpink;
text-align: center;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
opacity: 0.6;
transition: 0.2s;
}
.a:after{
content: '学理习论'
}
.a:hover{
cursor: pointer;
transition: 0.2s;
opacity: 1;
transform: translateX(30px);
}
.a:hover:after{
content: '理论学习'
}
</style>
有问题欢迎指出!!!