倒计时动效

1. 效果

在这里插入图片描述

2. html

<div class="count"><span>3</span><span>2</span><span>1</span>
</div>

3. css

body {width: 100vw;height: 100vh;overflow: hidden;display: flex;justify-content: center;align-items: center;
}.count {position: relative;width: 180px;height: 180px;font-family: Consolas, Monaco, monospace;font-size: 100px;border: 5px solid #333333;border-radius: 50%;overflow: hidden;
}.count span {display: block;width: 100%;height: 180px;line-height: 180px;text-align: center;animation: count 5s steps(5, end) forwards, shark 1s .8s 5;
}.count::after {content: 'Go!';position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);opacity: 0;font-size: 70px !important;animation: go .5s 3s forwards;
}@keyframes count {to {transform: translateY(calc(-5 * 180px));}
}@keyframes shark {0% {opacity: 1;}20% {opacity: 0;font-size: 40px;}
}@keyframes go {to {font-size: 70px;opacity: 1;}
}

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

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

相关文章

利用console提高写bug的效率

前端面试题库 &#xff08;面试必备&#xff09; 推荐&#xff1a;★★★★★ 地址&#xff1a;前端面试题库 自从入坑前端后&#xff0c;日常写bug就没离开过console。 要说用得多&#xff0c;不如说是console.log用得多&#xff0c;console.warn和console.erro…

【高光谱图像的去噪算法】通过全变异最小化对受激拉曼光谱图像进行去噪研究(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

STM32--ADC模数转换

文章目录 ADC简介逐次逼近型ADCADC框图转换模式数据对齐转换时间校准ADC基本结构ADC单通道工程代码&#xff1a; ADC简介 STM32的ADC&#xff08;Analog-Digital Converter&#xff09;模拟-数字转换器&#xff0c;是一种逐次逼近型模拟数字转换器&#xff0c;可以将引脚上连续…

Docker容器:docker基础概述、安装、网络及资源控制

文章目录 一.docker容器概述1.什么是容器2. docker与虚拟机的区别2.1 docker虚拟化产品有哪些及其对比2.2 Docker与虚拟机的区别 3.Docker容器的使用场景4.Docker容器的优点5.Docker 的底层运行原理6.namespace的六项隔离7.Docker核心概念 二.Docker安装 及管理1.安装 Docker1.…

百华劳保|听厂家聊聊如何检测防水劳保鞋?

说起防水劳保鞋大家可能并不陌生&#xff0c;在有积水或水利工程这些工作场景中使用&#xff0c;是防止水渗透鞋子的安全防护鞋。许多企业会为员工发放防水劳保鞋&#xff0c;在采购时一般都需要进行防水测试&#xff0c;提供相对应的检测报告。今天百华小编与大家聊聊都是如何…

vue3+ts-tsconfig.json报错Option ‘importsNotUsedAsValues’

vue3ts-tsconfig.json报错Option ‘importsNotUsedAsValues’ is deprecated and will stop functioning in TypeScript 5.5. Specify compilerOption ‘“ignoreDeprecations”: “5.0”’ to silence this error. Use ‘verbatimModuleSyntax’ instead 自我记录 翻译 选项…

OpenGL —— 1、Vs2017搭建glad、glfw环境,并附代码测试

GLFW 简介           GLFW是一个开源的多平台库&#xff0c;用于OpenGL&#xff0c;OpenGL ES和 桌面上的 Vulkan 开发。它提供了一个简单的 API 来创建 窗口、上下文和表面&#xff0c;接收输入和事件。 GLFW是用C语言编写的&#xff0c;支持Windows&#xff0c;mac…

音视频FAQ(三):音画不同步

摘要 本文介绍了音画不同步问题的五个因素&#xff1a;编码和封装阶段、网络传输阶段、播放器中的处理阶段、源内容产生的问题以及转码和编辑。针对这些因素&#xff0c;提出了相应的解决方案&#xff0c;如使用标准化工具、选择强大的传输协议、自适应缓冲等。此外&#xff0…

SpringCloud Gateway:status: 503 error: Service Unavailable

使用SpringCloud Gateway路由请求时&#xff0c;出现如下错误 yml配置如下&#xff1a; 可能的一种原因是&#xff1a;yml配置了gateway.discovery.locator.enabledtrue&#xff0c;此时gateway会使用负载均衡模式路由请求&#xff0c;但是SpringCloud Alibaba删除了Ribbon的…

深度学习入门-3-计算机视觉-卷积神经网络

一、计算机视觉 1.概述 计算机视觉作为一门让机器学会如何去“看”的学科&#xff0c;具体的说&#xff0c;就是让机器去识别摄像机拍摄的图片或视频中的物体&#xff0c;检测出物体所在的位置&#xff0c;并对目标物体进行跟踪&#xff0c;从而理解并描述出图片或视频里的场…

el-table 实现动态表头 静态内容 根据数据显示动态输入框

直接放代码了 <el-table:data"form.tableDataA"borderstripestyle"width: 100%; margin-top: 20px"><el-table-columnv-for"(category, categoryIndex) in form.tableDataA":key"categoryIndex":label"category.name&qu…

SHELL 基础 显示字符颜色, 修改历史命令,Linux里的命令 执行顺序

echo 打印命令 &#xff1a; 显示字符串 &#xff1a; [rootserver ~]# echo this is SHELL language this is SHELL language [rootserver ~]# echo this is SHELL language this is SHELL language [rootserver ~]# echo "this is SHELL language" this is SH…

Curson 编辑器

Curson 汉化与vacode一样 Curson 自带chat功能 1、快捷键ctrlk(代码中编辑) 2、快捷键ctrll 右侧打开窗口

MySQL- sql语句基础

文章目录 1.select后对表进行修改&#xff08;delete&#xff09;2.函数GROUP_CONCAT()3.使用正则表达式3.DATE_FORMAT()4.count() 加条件关于GROUP BY 使用可能忽悠而导致查询结果错误的点 1.select后对表进行修改&#xff08;delete&#xff09; 报错&#xff1a;You can’t…

前端学习记录~2023.8.3~JavaScript重难点实例精讲~第5章 DOM与事件

第 5 章 DOM与事件 前言5.1 DOM选择器5.1.1 传统原生JavaScript选择器&#xff08;1&#xff09;通过id定位&#xff08;2&#xff09;通过class定位&#xff08;3&#xff09;通过name属性定位&#xff08;4&#xff09;通过标签名定位 5.1.2 新型的querySelector选择器和quer…

【论文阅读】 Model Sparsity Can Simplify Machine Unlearning

Model Sparsity Can Simplify Machine Unlearning 背景主要内容Contribution Ⅰ&#xff1a;对Machine Unlearning的一个全面的理解Contribution Ⅱ&#xff1a;说明model sparsity对Machine Unlearning的好处Pruning方法的选择sparse-aware的unlearning framework Experiments…

AI 绘画Stable Diffusion 研究(十一)sd图生图功能详解-美女换装

免责声明: 本案例所用安装包免费提供&#xff0c;无任何盈利目的。 大家好&#xff0c;我是风雨无阻。 为了让大家更直观的了解图生图功能&#xff0c;明白图生图功能到底是干嘛的&#xff0c;能做什么事情&#xff1f;今天我们继续介绍图生图的实用案例-美女换装的制作。 对于…

实验一 ubuntu 网络环境配置

ubuntu 网络环境配置 【实验目的】 掌握 ubuntu 下网络配置的基本方法&#xff0c;能够通过有线网络连通 ubuntu 和开发板 【实验环境】 ubuntu 14.04 发行版FS4412 实验平台 【注意事项】 实验步骤中以“$”开头的命令表示在 ubuntu 环境下执行&#xff0c;以“#”开头的…

Android 命令行如何运行 JAR 文件

​ 最近有位老哥问了一个问题&#xff0c;说如果将java的jar文件在Android中执行&#xff1f;这个其实很简单的一个问题&#xff0c;直接写个App放里面不就可以了么&#xff1f;但是人家说没有App&#xff0c;直接使用命令行去运行。说明这个需求的时候&#xff0c;把我给整懵了…

无需公网IP——搭建web站点

文章目录 概述使用 Raspberry Pi Imager 安装 Raspberry Pi OS设置 Apache Web 服务器测试 web 站点安装静态样例站点将web站点发布到公网安装 Cpolar内网穿透cpolar进行token认证生成cpolar随机域名网址生成cpolar二级子域名将参数保存到cpolar配置文件中测试修改后配置文件配…