文字折叠效果
html代码：
由于平台原因这里无法展现html代码，如有需求请联系我
css代码：
* { margin: 0px; padding: 0px; } body { background-color: aquamarine; width: 100%; height: 100vh;/* vh:将视口平分为100份，100vh就占满视口*/ display: flex;/*弹性盒模型，必须指定高度，利用弹性盒模型，是div在视口的正中间 */ } #char1 { /*width: 100px;*/ height:100px; background-color: red; margin: auto; border-radius: 95px; padding: 0 50px; } /*当鼠标悬浮的时候，显示隐藏的审判标签*/ #char1:hover>span.my-hide{ opacity: 1; /* width:auto; */ width :16px;当想要过度显示span时，不要使用width：auto;要是用确定数值的方式 } .my-span{ color: white; font-size: 30px; line-height: 6.25rem; display: inline-block; /* 添加样式数值在变幻时的过渡效果 */ transition: 1s; } /* 隐藏字母的样式 */ .my-hide{ opacity: 0; width:0px; }