欢迎光临
我们一直在努力

纯css 模拟焦点光标闪烁

本篇文章我们记录一下使用纯css 模拟文本框获取焦点后的光标闪烁效果

我们先看一下效果

 

html代码如下

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="http://www.freetechs.cn/tool/js/jquery-3.4.1.min.js"></script>
    <script src="mshare.js"></script>
    <title></title>
    <style type="text/css">
        .guangbiao {
            width: 20px;
            height: 50px;
            margin: 0 auto;
            border-left: .1em solid red;
            animation: cursorImg 1s infinite steps(1, start);
        }
        @keyframes cursorImg {
            0%,
            100% {
                opacity: 0;
            }
            50% {
                opacity: 1;
            }
        }
    </style>
</head>
<body>
    <div class="guangbiao"></div>
</body>
</html>

 

 

 

赞(0)
未经允许不得转载:自游互动 » 纯css 模拟焦点光标闪烁
分享到: 更多 (0)

自由技术,自由自在

项目合作联系我们