CSS3的transition实现下划线。让我们看一下我们的演示以了解转换。这是CSS3中的一种新样式，可以实现动画的过渡。通常在添加从一种样式过渡到另一种样式的效果时使用。过渡属性transition：简写属性，用于在一个属性中设置四个过渡属性。transition-property：指定应用过渡的CSS属性的名称。transition-duration：定义过渡效果需要多长时间。默认为0。transition-timing-function：指定过渡效果的时序曲线。默认值为“轻松”。linear：指定以相同速度开始和结束的过渡效果（等于cubic-bezier(0,0,1,1)）ease：指定缓慢开始，然后变得更快，然后缓慢结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1))ease-in：指定以慢速开始的过渡效果（等于cubic-bezier(0.42,0,1,1)）ease-out：指定以慢速开始的过渡效果endsataslowspeed(equaltocubic-bezier(0,0,0.58,1))ease-in-out：指定以慢速开始和结束的过渡效果（等于cubic-bezier(0.42,0,0.58,1))cubic-bezier(n,n,n,n):在cubic-bezier函数中定义自己的值。可能的值是0到1之间的数值。transition-delay：指定过渡效果何时开始。默认为0。transition:width1slinear2s;/*简写示例*//*等同于以下*/transition-property:width;transition-duration:1s;transition-timing-function:linear;transition-delay:2s;tranformpropertytranslate()从当前元素移动根据给定的左侧（X轴）和顶部（Y轴）位置的参数定位。rotate()将元素顺时针旋转给定的度数。允许负值，这样元素逆时针旋转。scale()元素增减的大小取决于width（X轴）和height（Y轴）的参数：skew()包含两个参数值，分别代表X轴的倾斜角度和Y轴分别，如果第二个第一个参数为空，则默认为0，负参数表示向相反方向倾斜。matrix()矩阵方法有六个参数，包含旋转、缩放、移动（平移）和倾斜功能。要达到我们需要的效果，这里当然直接放出代码了。代码中有注释方便理解/*csscode*/h2{position:relative;填充：15px；文本对齐：居中；}按钮{宽度：100px；高度：40px；边界半径：15px；边框：无；背景：#188FF7；颜色：#fff；大纲：无；游标：指针；字体粗细：粗体；}按钮：悬停{背景：#188EA7；}.container{宽度：600px；显示：弹性；弹性方向：列；对齐项目：居中；保证金：0自动；}.line{位置：绝对；左：0；底部：0；高度：3px；宽度：100%；过渡：变换.5s；背景：#188EA7；颜色：#188EA7；转换：scaleX（0）；z-指数：1111；}@keyframeschangeColor1{来自{颜色：#000；}到{颜色：#188EA7;}}@keyframeschangeColor2{来自{颜色：#188EA7;}到{颜色：#000;}}
