使用伪类:after加闪烁的光标以及下划线

程序员文章站 2022-06-01 08:37:04

...

需求

实习过程都是开发关于银行理财产品、手机银行方向的业务，所以金额输入框是常见的开发需求。
一般我们不会使用HTML自带的input输入框，而是使用div模拟金额输入，要使得div更像金额输入框，就需要有一个闪烁的光标。(动画做的不好望谅解哈~)

使用伪类:after加闪烁的光标以及下划线

利用加闪烁光标

这里需要一点css的动画功底，涉及到animation、transform

<!DOCTYPE html>
<html>
<head>
    <title>:after加闪烁光标</title>
    <meta charset="utf-8">
    <style type="text/css">
        #input{
            position: relative;
        }
        @keyframes blink {
          0%, 100% {
            background-color: #000;
          }
          50% {
            background-color: transparent;
          } 
        }
        #input:after {
            position: absolute;
            content: '';
            display: inline-block;
            width: 2px;
            height: 18px;
            top: 50%;
            transform: translateY(-50%);
            animation: blink 1.2s infinite steps(1, start);
        }
    </style>
</head>
<body>
    <div id="input">test</div>
</body>
</html>

其实直接利用一个新的div标签，设置其border，以及div的动画也可以达到这个效果，不过一般规范点的代码都会用伪类来实现，都很少用一个没有意义的多余的div标签。类似的需求还有，给一个框设置下划线，也可以用伪类来实现。

利用伪类加下划线

代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>:after加下划线</title>
    <meta charset="utf-8">
    <style type="text/css">
        #input{
            position: relative;
        }
        @keyframes blink {
          0%, 100% {
            background-color: #000;
          }
          50% {
            background-color: transparent;
          } 
        }
        #input:after {
            position: absolute;
            content: '';
            width: 30px;
            height: 1px;
            bottom: 0;
            background: #000;
            left: 0;
        }
    </style>
</head>
<body>
    <div id="input">test</div>
</body>
</html>

效果
使用伪类:after加闪烁的光标以及下划线

我想说的话

学习进步离不开网友的支持，希望大家以后多多支持，能够指出文中不足与疑惑的点，我会为大家一一解答。有兴趣的小伙伴可以加入QQ群：852590787
使用伪类:after加闪烁的光标以及下划线

相关标签：利用伪类模拟闪烁光标模拟input输入框利用伪类添加下划线

上一篇：浅析Yii2缓存的使用_php实例

下一篇： laravel向视图传递变量的几种方法