特效概述线条动态：动态边框：线条动态效果图原理及代码:before和:after伪元素指定文档树前后的内容元素的内容。由于输入标签不是可插入内容的容器。所以这里的下划线是无法通过伪元素实现的。需要使用其他dom节点。
Web前端开发学习Q-q-u-n：784783012，分享开发工具，零基础，进阶视频教程，希望新手少拿绕道而行，包裹在外面父元素div要设置为inline-block，否则宽度会满屏。div{位置：相对；display:inline-block;}input标签需要禁用默认样式：input{outline:none;边框：无；background:#fafafa;}span标签实现了“左进右出”的动态，需要改变transform-origin方向。为了避免回流重绘，使用scaleX来实现宽度变化的视觉效果。输入?跨度{位置：绝对;左：0；右：0；底部：0；高度：1px；背景色：#262626；转换：scaleX（0）；变换原点：右中心；transition:transform0.3sease-in-out;}input:focus~span{transform:scaleX(1);}transform-origin:leftcenter;}动态边框效果图的原理和代码如动态图所示，共有4个边框。所以除了input元素外，还需要准备另外4个dom。为了便于定位，嵌套一个父元素。
Web前端开发学习Q-Q-U-N：784783012，分享开发工具，零基础，进阶视频教程，希望新手少走弯路和“穿越动态”，类似“穿越动态”，input和div样式基本都是相同。为了好看，改变padding属性。div{位置：相对；显示：内联块；填充：3px；}输入{大纲：无；边框：无；背景：#fafafa；padding:3px;}对于其他4个span元素，它们的position属性、animation属性、颜色都是一样的：.bottom,.top,.left,.right{position:absolute;背景色：#262626；transition:transform0.1sease-in-out;}对于.bottom和.top，它们的变化方向是水平的；对于.left和.right，它们的变化方向是垂直的。.bottom,.top{左：0;右：0；高度：1px；转换：scaleX(0);}.left,.right{top:0;底部：0；宽度：1px；transform:scaleY(0);}下面是处理延迟的特效。在动态图中，动画按照下、右、上、左的顺序依次变化。transition-delay属性用于实现动画延迟。.bottom{底部：0;transform-origin:rightcenter;}input:focus~.bottom{变换：scaleX(1);transform-origin:leftcenter;}.top{top:0;变换原点：左中心；transition-delay:0.2s;}input:focus~.top{transform:scaleX(1);transform-origin:rightcenter;}.right{transform-origin:topcenter;右：0；transition-delay:0.1s;}input:focus~.right{transform:scaleY(1);transform-origin:bottomcenter;}.left{left:0;变换原点：底部中心；transition-delay:0.3s;}input:focus~.left{transform:scaleY(1);transform-origin:topcenter;}Web前端开发学习Q-q-u-n：784783012，分享开发工具，零基础，进阶视频教程，希望新手少走弯路
