特效一览
<强> 划线动态 强 ：
划线动态
效果图
原理和代码
<代码> :在> :在> 输入> <前> <代码> & lt; div> & lt;输入类型=拔谋尽?比; & lt; span> & lt;/span> & lt;/div> 网络前端开发学习Q-q-u-n: 784783012,分享开发工具,零基础,进阶视频教程,希望新手少走弯的路> 之前
包裹在外的父元素 <代码> div> inline-block> <前> <代码> div { 位置:相对; 显示:inline-block; }> 之前
<代码> 输入> <前> <代码> 输入{ 大纲:没有; 边界:没有; 背景:# fafafa; }> 之前
<代码> 跨度> transform-origin> scaleX> <前> <代码> 输入~跨度{ 位置:绝对的; 左:0; 右:0; 底部:0; 身高:1 px; background - color: # 262626; 变换:scaleX (0); transform-origin:对中心; 过渡:变换0.3 s ease-in-out; } 输入:专注~跨度{ 变换:scaleX (1); transform-origin:左中心; }> 之前
动态边框
效果图
原理和代码
如动态图所示,有4条边框。所以除了 <代码> 输入> <前> <代码> & lt; div> & lt;输入类型=拔谋尽北? & lt;跨类="底"祝辞& lt;/span> & lt;跨类=罢贰钡淖４? lt;/span> & lt;跨类=岸ゼ丁弊４? lt;/span> & lt; span> & lt;/div> 网络前端开发学习Q-q-u-n: 784783012,分享开发工具,零基础,进阶视频教程,希望新手少走弯的路> 之前
和“划线动态”类似,输入和div的样式基本一样。为了好看,改一下填充属性。
<前> <代码> div { 位置:相对; 显示:inline-block; 填充:3 px; } 输入{ 大纲:没有; 边界:没有; 背景:# fafafa; 填充:3 px; }> 之前对于其他4个跨度元素,它们的位置属性,动画属性,以及颜色都是相同的:
<前> <代码> .bottom, .top, .left, 铃声{ 位置:绝对的; background - color: # 262626; 过渡:变换0.1 s ease-in-out; }> 之前对于。直底和上,它们的变化方向是水平,对于。离开和铃声,它们的变化方向是垂直。
<前> <代码> .bottom, .top { 左:0; 右:0; 身高:1 px; 变换:scaleX (0); } .left, 铃声{ 上图:0; 底部:0; 宽度:1 px; 变换:写入scaleY (0); }>
