day34-Animated Countdown(动画倒计时)

50 天学习 50 个项目 - HTMLCSS and JavaScript

day34-Animated Countdown(动画倒计时)

效果

在这里插入图片描述

index.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Animated Countdown</title><link rel="stylesheet" href="style.css" />
</head><body><!-- 计数器 --><div class="counter"><div class="nums"><span class="in">3</span><span>2</span><span>1</span><span>0</span></div><h4>准备</h4></div><!-- 完成 --><div class="final"><h1>GO</h1><button id="replay">重播</button></div><script src="script.js"></script>
</body></html>

style.css

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');* {box-sizing: border-box;
}body {background: url('https://source.unsplash.com/random/1000x600') no-repeat center/100% 100%;font-family: 'Roboto', sans-serif;margin: 0;height: 100vh;overflow: hidden;
}/* 准备 */
h4 {font-size: 20px;margin: 5px;
}/* 计数器 */
.counter {position: fixed;/* 居中 */top: 50%;left: 50%;transform: translate(-50%, -50%);text-align: center;
}/* 隐藏计数器 */
.counter.hide {transform: translate(-50%, -50%) scale(0);animation: hide 0.2s ease-out;
}/* 隐藏计数器动画 */
@keyframes hide {0% {transform: translate(-50%, -50%) scale(1);}100% {transform: translate(-50%, -50%) scale(0);}
}/* 完成 默认隐藏 */
.final {position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%) scale(0);text-align: center;
}/* 完成 显示 */
.final.show {transform: translate(-50%, -50%) scale(1);animation: show 0.2s ease-out;
}/* 完成 显示动画 */
@keyframes show {0% {transform: translate(-50%, -50%) scale(0);}30% {transform: translate(-50%, -50%) scale(1.4);}100% {transform: translate(-50%, -50%) scale(1);}
}.nums {color: red;font-size: 50px;position: relative;overflow: hidden;width: 250px;height: 50px;
}/* 数字 */
.nums span {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%) rotate(120deg);/* 旋转中心为底部中心 */transform-origin: bottom center;
}/* 显示数字 */
.nums span.in {transform: translate(-50%, -50%) rotate(0deg);animation: goIn 0.5s ease-in-out;
}/* 隐藏数字 */
.nums span.out {animation: goOut 0.5s ease-in-out;
}/* 显示数字 动画 */
@keyframes goIn {0% {transform: translate(-50%, -50%) rotate(120deg);}30% {transform: translate(-50%, -50%) rotate(-20deg);}60% {transform: translate(-50%, -50%) rotate(10deg);}100% {transform: translate(-50%, -50%) rotate(0deg);}
}/* 隐藏数字 动画 */
@keyframes goOut {0% {transform: translate(-50%, -50%) rotate(0deg);}60% {transform: translate(-50%, -50%) rotate(20deg);}100% {transform: translate(-50%, -50%) rotate(-120deg);}
}

script.js

// 重点 position: fixed; transform animation keyframes   num.addEventListener('animationend'
// 1.获取元素节点 
const nums = document.querySelectorAll('.nums span') //数字
const counter = document.querySelector('.counter')  //计数器
const finalMessage = document.querySelector('.final') //完成
const replay = document.querySelector('#replay') //重播
// 执行动画
runAnimation()
// 初始化
function resetDOM() {// 计数器显示counter.classList.remove('hide')// 完成 隐藏finalMessage.classList.remove('show')// 全部数字的类为空nums.forEach((num) => {num.classList.value = ''})// 第一个数字显示nums[0].classList.add('in')
}
// 倒计时
function runAnimation() {nums.forEach((num, idx) => {const nextToLast = nums.length - 1// 添加了一个事件监听器,当动画结束时执行相应的回调函数。// 注意:一个数字有两个动画num.addEventListener('animationend', (e) => {// 前三个的数字 e.animationName 事件的动画名称if (e.animationName === 'goIn' && idx !== nextToLast) {// 隐藏console.log(idx);//0 1 2 num.classList.remove('in')num.classList.add('out')} else if (e.animationName === 'goOut' && num.nextElementSibling) {//前三个的数字console.log(idx);//0 1 2 num.nextElementSibling.classList.add('in')} else {//最后一个数字// 计数器隐藏counter.classList.add('hide')// 完成 显示finalMessage.classList.add('show')}})})
}
// 重播按钮 点击
replay.addEventListener('click', () => {// 初始化resetDOM()// 执行动画runAnimation()
})

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

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

相关文章

态势标绘专题介绍

介绍 这个专栏是专门针对基于Cesium来实现态势标绘的专题专栏,专栏主要实现了30余种态势几何形状的标绘和编辑、文本的标绘和编辑、图片的标绘和编辑以及简单模型的标绘,同时支持标绘结果的导出以及导入。包括最终编写成的一个完整的Vue3.2+TS+Cesium1.107.2的标绘组件。专栏…

从用户的角度谈GPT时代技术突破的两大关键逻辑

大家好,我是herosunly。985院校硕士毕业,现担任算法研究员一职,热衷于机器学习算法研究与应用。曾获得阿里云天池比赛第一名,CCF比赛第二名,科大讯飞比赛第三名。拥有多项发明专利。对机器学习和深度学习拥有自己独到的见解。曾经辅导过若干个非计算机专业的学生进入到算法…

EtherCAT转TCP/IP网关EtherCAT解决方案

你是否曾经为生产管理系统的数据互联互通问题烦恼过&#xff1f;曾经因为协议不同导致通讯问题而感到困惑&#xff1f;现在&#xff0c;我们迎来了突破性的进展&#xff01; 介绍捷米特JM-TCPIP-ECT&#xff0c;一款自主研发的Ethercat从站功能的通讯网关。它能够连接到Etherc…

通过FPGA实现基于RS232串口的指令发送并控制显示器中目标位置

目录 1.算法理论概述 串口通信模块 指令解析模块 位置控制模块 显示器驱动模块 2.部分核心程序 3.算法运行软件版本 4.算法运行效果图预览 5.算法完整程序工程 1.算法理论概述 通过FPGA实现基于RS232串口的指令发送并控制显示器中目标位置是一种常见的应用场景&#x…

Prompt 技巧指南-让 ChatGPT 回答更准确

随着 ChatGPT 等大型语言模型 (LLM)的兴起&#xff0c;人们慢慢发现&#xff0c;怎么样向 LLM 提问、以什么技巧提问&#xff0c;是获得更加准确的回答的关键&#xff0c;也由此产生了提示工程这个全新的领域。 提示工程(prompt engineering)是一门相对较新的领域&#xff0c;用…

java学习003

Java数组 Java 语言中提供的数组是用来存储固定大小的同类型元素&#xff0c;这一点和PHP语言的可变数组长度不同。 声明变量数组 首先必须声明数组变量&#xff0c;才能在程序中使用数组。下面是声明数组变量的语法&#xff1a; dataType[] arrayRefVar; // 首选的方法 或 …

云计算——云计算与虚拟化的关系

作者简介&#xff1a;一名云计算网络运维人员、每天分享网络与运维的技术与干货。 座右铭&#xff1a;低头赶路&#xff0c;敬事如仪 个人主页&#xff1a;网络豆的主页​​​​​ 目录 前言 一.虚拟化 1.什么是虚拟化 2.虚拟化技术作用 二.云计算与虚拟化的关系 三.虚…

华为eNSP:ospf的配置

一、拓扑图 二、路由器的配置 1、路由器依据规划配置接口IP AR1: <Huawei>system-view [Huawei]int g0/0/0 [Huawei-GigabitEthernet0/0/0]ip add 10.10.10.1 24 [Huawei-GigabitEthernet0/0/0]qu AR2: <Huawei>system-view [Huawei]int g0/0/0 [Huawei-Gi…

RabbitMQ消息可靠性问题及解决

说明&#xff1a;在RabbitMQ消息传递过程中&#xff0c;有以下问题&#xff1a; 消息没发到交换机 消息没发到队列 MQ宕机&#xff0c;消息在队列中丢失 消息者接收到消息后&#xff0c;未能正常消费&#xff08;程序报错&#xff09;&#xff0c;此时消息已在队列中移除 …

STM32(HAL库)驱动AD8232心率传感器

目录 1、简介 2、CubeMX初始化配置 2.1 基础配置 2.1.1 SYS配置 2.1.2 RCC配置 2.2 ADC外设配置 2.3 串口外设配置 2.4 GPIO配置 2.5 项目生成 3、KEIL端程序整合 3.1 串口重映射 3.2 ADC数据采集 3.3 主函数代码整合 4 硬件连接 5 效果展示 1、简介 本文通过STM32…

Linux文件处理命令

目录&#xff1a; linux系统与shell环境准备linux常用命令之文件处理Linux系统登录与文件操作 1.linux系统与shell环境准备 Linux 系统简介&#xff1a; Linux 内核最初只是由芬兰人林纳斯托瓦兹&#xff08;Linus Torvalds&#xff09;在赫尔辛基大学上学时出于个人爱好而…

分布式光伏并网防孤岛保护装置AM5SE-IS

分布式光伏并网防孤岛保护装置AM5SE-IS 应用场景 防孤岛原理&#xff1a;防孤岛保护装置检测到并网点有逆功率、频率突变、 等异常数据时&#xff0c;即发生孤岛现象时&#xff0c;装置可配合断路器快速切除并网点&#xff0c;使本站与电网侧快速脱离&#xff0c;保证整个电站…

blender 纹理材质

添加材质纹理需要哪五个节点&#xff1f; 映射节点&#xff1a;调整纹理的位置、大小、缩放&#xff1b; 纹理坐标&#xff1a;怎么映射&#xff0c;以什么方式去映射这张图&#xff0c;换句话说就是如何将 2D 的图片映射到 3D 的图像上&#xff1b;纹理坐标就是以什么坐标方式…

Flutter系列(3):如何将Flutter项目打包成Android安装包

将Flutter项目打包成Android安装包&#xff0c;主要步骤如下&#xff1a; 一、生成key 进入jdk的bin目录下&#xff1a; keytool -genkey -v -keystore D:\key.jks -keyalg RSA -keysize 2048 -validity 10000 -alias key 大概会有密码等参数&#xff0c;根据自身需要&#x…

Mysql数据库

目录 1.数据库 2.数据库分类与常见的数据库 3.SQL 3.1.DDL 数据库操作 表操作 3.2.DML 3.3.DQL 3.4.DCL 管理用户 权限控制 4.Mysql常用的数据类型 1.数据库 数据库:是“按照数据结构来组织、存储和管理数据的仓库”。是一个长期存储在计算机内的、有组织的、可共…

Spring MVC异常处理【单个控制异常处理器、全局异常处理器、自定义异常处理器】

目录 一、单个控制器异常处理 1.1 控制器方法 1.2 编写出错页面 1.3 测试结果 二、全局异常处理 2.1 一个有异常的控制器类 2.2 全局异常处理器类 2.3 测试结果 三、自定义异常处理器 3.1 自定义异常处理器 3.2 测试结果 往期专栏&文章相关导读 1. Maven系列…

只需3步,使用Stable Diffusion无限生产AI数字人视频

效果演示 先看效果&#xff0c;感兴趣的可以继续读下去。 没有找到可以上传视频的地方&#xff0c;大家打开这个网盘链接观看&#xff1a;https://www.aliyundrive.com/s/CRBm5NL3xAE 基本方法 搞一张照片&#xff0c;搞一段语音&#xff0c;合成照片和语音&#xff0c;同…

SpringBoot+jasypt-spring-boot-starter实现配置文件明文加密

1.使用环境 springboot:2.1.4.RELEASE JDK:8 jasypt-spring-boot-starter:3.0.2 2.引入依赖 !-- 配置文件加密 --> <dependency><groupId>com.github.ulisesbocchio</groupId><artifactId>jasypt-spring-boot-starter</artifactId><ver…

uni-app:请求后端数据uni.request

完整代码&#xff1a; onLoad() {uni.request({url: getApp().globalData.position Produce/select_employee,data: {username: getApp().globalData.username,},method: POST,dataType: json,success: res > {this.employee_name res.data.info.employee_name;// consol…

sketch如何在线打开?有没有什么软件可以辅助

Sketch 在线打开的方法有哪些&#xff1f;这个问题和我之前回答过的「Sketch 可以在线编辑吗&#xff1f;」是一样的答案&#xff0c;没有。很遗憾&#xff0c;Sketch 没有在线打开的方法&#xff0c;Sketch 也做不到可以在线编辑。那么&#xff0c;那些广告里出现的设计软件工…