当前位置: 首页 > news >正文

uniapp实现光标闪烁(配合自己的键盘)

前言

因为公司业务需要,所以我们...

演示

其实就是Chat自动打字效果

代码

键盘请看这篇文件

<template>
<view class="list"><view class="title"><text>手机号码</text></view><view class="typewriter-content"><text class="value">{{mobile}}</text><text class="cursor">|</text></view>
</view>
</template>
<script>export default {data() {return {mobile: '',}},}
</script>
<style lang="scss" scoped>.list {margin-bottom: 16rpx;.typewriter-content {height: 40rpx;border-radius: 10rpx;border: 2rpx solid #222;display: flex;	align-items: center;.value {font-size: 16rpx;margin-left: 4rpx;color: #222;}.cursor {// 控制光标大小font-size: 20rpx;font-weight: bold;margin-left: 4rpx;animation: flash 1s linear infinite;color: #000;}@keyframes flash {0% {opacity: 1;}80% {opacity: 0;}100% {opacity: 1;}}}.title {// font-size: 24rpx;margin-top: -4rpx;margin-bottom: 8rpx;}
}
</style>

相关文章:

  • 北京网站建设多少钱?
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • 数据结构——考研笔记(一)绪论
  • 百日筑基第十八天-一头扎进消息队列1
  • Nature Communications|柔性高密度、高灵敏应变传感器阵列(柔性应变传感/界面调控/电子皮肤/柔性电子)
  • Backend - C# 基础知识
  • PyTorch 2-深度学习-模块
  • Java版Flink使用指南——自定义无界流生成器
  • 【爬虫】解析爬取的数据
  • [1]从概念到实践:电商智能助手在AI Agent技术驱动下的落地实战案例深度剖析(AI Agent技术打造个性化、智能化的用户助手)
  • 基于React 实现井字棋
  • vue vite+three在线编辑模型导入导出
  • Emacs有什么优点,用Emacs写程序真的比IDE更方便吗?
  • S5730 OSPF: 配置 OSPF 进程和区域
  • 硬盘模式vmd怎么改ahci_电脑vmd改ahci模式详细步骤
  • Visual Studio编译优化选项
  • PPTP、L2TP、IPSec、IPS 有什么区别?
  • 【Leetcode】104. 二叉树的最大深度
  • AHK 中 = 和 == 等比较运算符的用法
  • OSS Web直传 (文件图片)
  • php中curl和soap方式请求服务超时问题
  • Python实现BT种子转化为磁力链接【实战】
  • react-core-image-upload 一款轻量级图片上传裁剪插件
  • Travix是如何部署应用程序到Kubernetes上的
  • vue+element后台管理系统,从后端获取路由表,并正常渲染
  • webpack入门学习手记(二)
  • 浮动相关
  • 开源地图数据可视化库——mapnik
  • 前端攻城师
  • 前端性能优化--懒加载和预加载
  • 让你的分享飞起来——极光推出社会化分享组件
  • 线上 python http server profile 实践
  • 一份游戏开发学习路线
  • 一起来学SpringBoot | 第三篇:SpringBoot日志配置
  • 在electron中实现跨域请求,无需更改服务器端设置
  • ​LeetCode解法汇总2670. 找出不同元素数目差数组
  • # 日期待t_最值得等的SUV奥迪Q9:空间比MPV还大,或搭4.0T,香
  • #我与Java虚拟机的故事#连载13:有这本书就够了
  • (1)无线电失控保护(二)
  • (13)Latex:基于ΤΕΧ的自动排版系统——写论文必备
  • (arch)linux 转换文件编码格式
  • (C++20) consteval立即函数
  • (C语言)输入一个序列,判断是否为奇偶交叉数
  • (SERIES12)DM性能优化
  • (汇总)os模块以及shutil模块对文件的操作
  • (理论篇)httpmoudle和httphandler一览
  • (免费领源码)python+django+mysql线上兼职平台系统83320-计算机毕业设计项目选题推荐
  • (南京观海微电子)——COF介绍
  • (算法)Travel Information Center
  • (原創) 如何優化ThinkPad X61開機速度? (NB) (ThinkPad) (X61) (OS) (Windows)
  • (转)fock函数详解
  • (转)IIS6 ASP 0251超过响应缓冲区限制错误的解决方法
  • (转)Linux整合apache和tomcat构建Web服务器
  • (转)Oracle 9i 数据库设计指引全集(1)
  • 、写入Shellcode到注册表上线
  • ./configure,make,make install的作用
  • .NET Core MongoDB数据仓储和工作单元模式封装