CSS 动态提示框

​​在这里插入图片描述

<template>
<div class="terminal-loader"><div class="terminal-header"><div class="terminal-title">提示框</div><div class="terminal-controls"><div class="control close"></div><div class="control minimize"></div><div class="control maximize"></div></div></div><div class="text">温馨提示!</div>
</div></template><script></script><style>
@keyframes blinkCursor {50% {border-right-color: transparent;}
}@keyframes typeAndDelete {0%,10% {width: 0;}45%,55% {width: 200rpx;} /* adjust width based on content */90%,100% {width: 0;}
}.terminal-loader {border: 0.1em solid #333;background-color: #1a1a1a;color: #0f0;font-family: "Courier New", Courier, monospace;font-size: 1em;padding: 1.5em 1em;width: 200rpx;margin: 100px auto;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);border-radius: 4px;position: relative;overflow: hidden;box-sizing: border-box;height: auto;
}.terminal-header {position: absolute;top: 0;left: 0;right: 0;height: 1.5em;background-color: #333;border-top-left-radius: 4px;border-top-right-radius: 4px;padding: 0 0.4em;box-sizing: border-box;
}.terminal-controls {float: right;
}.control {display: inline-block;width: 0.6em;height: 0.6em;margin-left: 0.4em;border-radius: 50%;background-color: #777;
}.control.close {background-color: #e33;
}.control.minimize {background-color: #ee0;
}.control.maximize {background-color: #0b0;
}.terminal-title {float: left;line-height: 2em;color: #eee;font-size: 15rpx;
}.text {display: inline-block;white-space: nowrap;overflow: hidden;border-right: 0.2em solid green; /* Cursor */animation: typeAndDelete 4s steps(11) infinite,blinkCursor 0.5s step-end infinite alternate;margin-top: 1.5em;word-wrap: break-word;
}</style>

教学视频地址

点击跳转教学视频

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/586856.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Matlab】BP 神经网络时序预测算法

资源下载&#xff1a; https://download.csdn.net/download/vvoennvv/88681507 一&#xff0c;概述 BP 神经网络是一种常见的人工神经网络&#xff0c;也是一种有监督学习的神经网络。其全称为“Back Propagation”&#xff0c;即反向传播算法。BP 神经网络主要由输入层、隐藏层…

网络通信之TCP和UDP-入门2

TCP/IP协议族为运输层指明了两个协议&#xff1a;TCP&#xff08;优点是可靠&#xff0c;缺点慢 &#xff09;和UDP&#xff08;优点快&#xff0c;缺点没有纠错&#xff09;&#xff0c;它们都是作为应同程序和网络操作的中介物。 TCP连接的建立和释放&#xff1a; https://zh…

SpringValidation自定义注解以及分组校验

SpringValidation的参数校验使用可参考&#xff1a;【SpringMVC应用篇】Spring Validation 参数校验-CSDN博客 目录 1. 引入依赖 2. 自定义注解校验 2.1 创建Validation类 2.2 创建注解对象 2.3 使用注解 3. 分组校验 3.1 实体类内部定义接口 3.2 在参数上指定分组 1. …

git回滚操作,常用场景

文章目录 git回滚操作1.git reset --hard 【版本号】2.回滚后的版本v2又想回到之前的版本v32.1 git reflog 3.git checkout -- 文件名4.git reset HEAD 文件名 git回滚操作 假设我们现在有三个版本 现在回滚一个版本 1.git reset --hard 【版本号】 发现只剩下两个版本了 2.…

51单片机的中断相关知识

51单片机的中断相关知识点 一、中断概念和功能 概念 程序执行过程中CPU会遇到一些特殊情况&#xff0c;是正在执行的程序被“中断”&#xff0c;cpu中止原来正在执行的程序&#xff0c;转到处理异常情况或特殊事件的程序去执行&#xff0c;结束后再返回到原被中止的程序处(断…

计算机网络——计算大题(七)

前言&#xff1a; 最近也是在准备计算机考试&#xff0c;我们的考试形式是上机考试&#xff0c;所以可能有些计算题是会给提供思路的&#xff0c;前面已经对本学期的计算机网络知识有了一个简单的认识与了解&#xff0c;现在我们就来对计算大题进行一个学习吧&#xff0c;这里的…

中医电子处方系统,西医个体诊所门诊卫生室病历记录查询软件教程

中医电子处方系统&#xff0c;西医个体诊所门诊卫生室病历记录查询软件教程 一、软件程序问答 1、电子处方软件如何快速开单&#xff1f; 如下图&#xff0c;软件以 佳易王诊所电子处方管理系统V17.1版本为例说明 在开电子处方的时候可以按单个药品开&#xff0c;也可以直…

面试 Java 基础八股文五问五答第六期

面试 Java 基础八股文五问五答第六期 作者&#xff1a;程序员小白条 相信看了本文后&#xff0c;对你的面试是有一定帮助的&#xff01; ⭐点赞⭐收藏⭐不迷路&#xff01;⭐ 1&#xff09;什么是跨域&#xff1f; 跨域问题是指在浏览器中&#xff0c;由于同源策略的限制&am…

【开源】基于Vue+SpringBoot的二手车交易系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 数据中心模块2.2 二手车档案管理模块2.3 车辆预约管理模块2.4 车辆预定管理模块2.5 车辆留言板管理模块2.6 车辆资讯管理模块 三、系统设计3.1 E-R图设计3.2 可行性分析3.2.1 技术可行性分析3.2.2 操作可行性3.2.3 经济…

结构体:子网掩码

#include<iostream> using namespace std; union IP //创建共用体 {unsigned char a[4];unsigned int ip; }; IP getIP() //获取ip函数 {int a, b, c, d;scanf_s("%d.%d.%d.%d", &a, &b, &c, &d);IP address;address.a[3] a; address.a[2] …

Linux lpq命令教程:如何有效地查看打印队列状态(附实例教程和注意事项)

Linux lpq命令介绍 lpq命令是Linux系统中的内置命令&#xff0c;用于列出所有可用打印机的状态。如果在命令行上没有指定打印机或类&#xff0c;则会显示默认目标上排队的作业。interval选项允许你在队列为空之前连续报告队列中的作业&#xff1b;每隔interval秒显示一次作业列…

阿里后端实习二面

阿里后端实习二面 记录面试题目&#xff0c;希望可以帮助到大家 类加载的流程&#xff1f; 类加载分为三个部分&#xff1a;加载、连接、初始化 加载 类的加载主要的职责为将.class文件的二进制字节流读入内存(JDK1.7及之前为JVM内存&#xff0c;JDK1.8及之后为本地内存)&…

计算机网络【EPOLL 源码详解】

IO多路复用 在以前&#xff0c;传统的网络编程是多线程模型&#xff0c;一个线程单独处理一个请求。 然而&#xff0c;线程是很昂贵的资源&#xff1a; 线程的创建和销毁成本很高&#xff0c;linux的线程实际上是特殊的进程&#xff1b;因此通常会使用线程池来减少线程创建和…

5. 数据结构

5. 数据结构 本章详细讨论了你已经学过的一些知识&#xff0c;同样也添加了一些新内容。 5.1. 关于列表更多的内容 Python 的列表数据类型包含更多的方法。这里是所有的列表对象方法&#xff1a; list.append(x) 把一个元素添加到链表的结尾&#xff0c;相当于 a[len(a):]…

已加入git本地版本库的文件如何移除

针对已经加入本地版本库的文件&#xff08;文件颜色为绿色&#xff09;&#xff0c;gitignore是无法进线忽略的&#xff0c;需要先清理git缓存&#xff0c;释放已经加入版本控制的文件&#xff0c;方法如下&#xff1a; 进入文件所在目录&#xff0c;选择文件&#xff0c;右键…

迷宫问题的对比实验研究(代码注释详细、迷宫及路径可视化)

题目描述 对不同的迷宫进行算法问题&#xff0c;广度优先、深度优先、以及人工智能上介绍的一些算法&#xff1a;例如A*算法&#xff0c;蚁群算法等。 基本要求&#xff1a; &#xff08;1&#xff09;从文件读入9*9的迷宫&#xff0c;设置入口和出口&#xff0c;分别采用以上方…

关于WPF MVVM 的详细使用过程以及注意的问题

WPF MVVM 是一种常用的设计模式&#xff0c;在 WPF 应用程序中使用它可以更好地分离界面逻辑和业务逻辑&#xff0c;并且更容易进行单元测试和重构。下面是深入理解 WPF MVVM 的详细使用过程以及注意的问题。 一、MVVM 的基本概念 MVVM 是 Model-View-ViewModel 的缩写&#…

springboot(ssm校园组团平台 高校组团系统 Java系统

springboot(ssm校园组团平台 高校组团系统 Java系统 开发语言&#xff1a;Java 框架&#xff1a;ssm/springboot vue JDK版本&#xff1a;JDK1.8&#xff08;或11&#xff09; 服务器&#xff1a;tomcat 数据库&#xff1a;mysql 5.7&#xff08;或8.0&#xff09; 数据库…

2023年终总结

前言&#xff1a; 嘻嘻&#xff0c;12月底广州降温了又到了写年终总结的时间&#xff0c;这也是我第二年写年终总结。今年的年终总结主要记录了我大三下学期和大四上学期这两个时间段的学习和收获&#xff0c;也是我尝试走出校园&#xff0c;接触社会的第一年&#xff08;感触…

MybatisPlus之常用插件的使用

系列文章目录 提示&#xff1a;这里可以添加系列文章的所有文章的目录&#xff0c;目录需要自己手动添加 MybatisPlus之常用插件的使用 提示&#xff1a;写完文章后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 系列文章目录前言一、插件概…