1.html
<div class="trans">
<p>大家加油</p>
</div>
2.css部分
.trans {
position: relative;
margin: 0 auto;
width: 800px;
height: 200px;
line-height: 200px;
background-color: pink;
color: white;
text-align: center;
font-size: 100px;
transition: 0.3s;
}
.trans::before,
.trans::after {
position: absolute;
content: '';
}
.trans:hover {
width: 1800px;
background-color: red;
}
.trans p {
display: inline;
letter-spacing: 10px;
visibility: hidden;
}
.trans:hover p {
visibility: visible;
letter-spacing: 50px;
transition: 0.3s linear all;
}
.trans::before {
content: '<';
left: 300px;
visibility: hidden;
}
.trans:hover::before {
visibility: visible;
left: 100px;
transition: 0.5s linear all;
}
.trans::after {
content: '>';
left: auto;
right: 300px;
visibility: hidden;
}
.trans:hover::after {
visibility: visible;
right: 100px;
transition: 0.5s linear all;
}