1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33
| <!--主要代码:--> <style> div{width: 200px;margin: 100px auto;} span{ display: block; position: relative; font-size: 20px; transition: all 250ms ease; margin: 20px; cursor: pointer; } span:hover{ color: orangered; } span:after{ content: ""; width: 140px; height: 2px; background: #4d90c4; position: absolute; bottom: -3px; left: 0px; transform-origin: center center;/*设置元素基点位置*/ transform: scaleX(0); /*设置元素X轴缩放*/ transition: all 250ms ease; /*缓慢变化*/ } span:hover:after{ /*hover之后再使元素X轴放大1倍*/ transform: scaleX(1) } </style> <div> <span>鼠标移动到这里</span> </div>
|