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

web之利用延迟实现复杂动画、animation

文章目录

  • 效果图
  • html
  • style
  • JavaScript


效果图

cssAndJavaScript_complexAnimation


html

<div class="container"><div class="ball"></div><input type="range" min="0" max="1" step="0.01" />
</div>

style

body {display: flex;justify-content: center;
}.container {margin-top: 30px;
}.ball {--delay: 0s;width: 50px;height: 50px;border-radius: 50%;background-color: #ff0000;margin-bottom: 50px;animation: move 1s var(--delay) linear forwards paused;/* animation-play-state: running; *//* animation-play-state: paused; */
}@keyframes move {50% {transform: translate(100px) scale(1.5);}100% {transform: translate(200px) scale(1);}
}

JavaScript

// js方式实现(不考虑此方案)
// let inp = document.querySelector('input');
// inp.oninput = function () {
//     console.log(inp.value);
// }// 方式二(配合css实现)
let inp = document.querySelector('input'),ball = document.querySelector('.ball'),cal = () => ball.style.setProperty('--delay', `-${inp.value}s`);inp.oninput = cal;
cal();

相关文章:

web之利用延迟实现复杂动画、animation

文章目录 效果图htmlstyleJavaScript 效果图 html <div class"container"><div class"ball"></div><input type"range" min"0" max"1" step"0.01" /> </div>style body {display…...

TCP 和 UDP 的区别、TCP 是如何保证可靠传输的?

先来介绍一些osi七层模型 分为应用层、表示层、会话层、运输层、网络层、链路层、物理层。 应用层(数据)&#xff1a;确定进程之间通信的性质以及满足用户需要以及提供网络和用户应用&#xff0c;为应用程序提供服务&#xff0c;DNS&#xff0c;HTTP&#xff0c;HTTPS&#xf…...

鼠标悬停阴影的效果被旁边div挡住的解决办法

出现的问题 需求要求鼠标悬停某个图片上有阴影效果&#xff0c;但阴影被旁边相邻的div挡住了&#xff0c;如图所示 解决方案 给悬停的这块div增加2个css属性 $(this).css(position, relative); $(this).css(z-index, 200);新的效果如图所示 一直写后端&#xff0c;前端的…...

Go用两个协程交替打印100以内的奇偶数

方式1&#xff08;使用无缓冲的channel&#xff09; package mainimport ( "fmt" "time")var flagChan make(chan int)func wokr1() { for i : 1; i < 100; i { flagChan <- 666 // 塞入 if i%2 1 { fmt.Println("协程1打印:", i) …...

css 文字单行多行超出长度后显示 ...

0.超出… 1、单行文本超出 <div class"content">测试数据&#xff1a;css单行文本超出显示省略号--------</div><style> .content{width: 200px;height: 200px;overflow:hidden;white-space: nowrap;text-overflow: ellipsis;-o-text-overflow:el…...

C++将派生类赋值给基类

在 C/C++ 中经常会发生数据类型的转换,例如将 int 类型的数据赋值给 float 类型的变量时,编译器会先把 int 类型的数据转换为 float 类型再赋值;反过来,float 类型的数据在经过类型转换后也可以赋值给 int 类型的变量。 数据类型转换的前提是,编译器知道如何对数据进行取舍…...

海外问卷调查是做什么的?

大家好&#xff0c;我是橙河。现在我来给大家简单讲解一下海外问卷调查是做什么的&#xff1f; 多年以前&#xff0c;人们就开始在网上进行海外问卷调查了。最常见的方法是通过问卷网站、做问卷或者论坛进行调查&#xff0c;现在则更多地使用各种渠道进行调查。海外国家对于问…...

Redis——数据结构介绍

Redis是一个key-value的数据库&#xff0c;key一般是String类型&#xff0c;不过value的类型是多样的&#xff1a; String&#xff1a;hello wordHash&#xff1a;{name:"Jack",age:21}List&#xff1a;[A -> B -> C -> D]Set&#xff1a;{A,B,C}SortedSet…...

附录2-将三国演义按章节存储为不同的txt(bs4)

地址 《三国演义》全集在线阅读_史书典籍_诗词名句网 目录 1 项目分析 2 代码 1 项目分析 我们可以在首页中找到所有的章节 每一个章节是一个a标签&#xff0c;a标签连接到该章节的内容 但这个网站他有bug&#xff0c;章节都是乱套的&#xff0c;我们无视这种错误&#…...

现代C++中的从头开始深度学习:【6/8】成本函数

现代C中的从头开始深度学习&#xff1a;成本函数 一、说明 在机器学习中&#xff0c;我们通常将问题建模为函数。因此&#xff0c;我们的大部分工作都包括寻找使用已知模型近似函数的方法。在这种情况下&#xff0c;成本函数起着核心作用。 这个故事是我们之前关于卷积的讨论的…...

Vue——vue3中的ref和reactive数据理解以及父子组件之间props传递的数据

ref()函数 这是一个用来接受一个内部值&#xff0c;返回一个响应式的、可更改的 ref 对象&#xff0c;此对象只有一个指向其内部值的属性 .value。 作用&#xff1a;创建一个响应式变量&#xff0c;使得某个变量在发生改变时可以同步发生在页面上。 模板语句中使用这个变量时…...

新手如何备考PMP考试?

回头看来&#xff0c;从战略上来说&#xff1a; 备考第一重点&#xff1a;要有一个清晰的目标——我要过&#xff01; 第二重点&#xff1a;足够重视它——把它的优先级调整到仅次于工作&#xff1a;万籁俱寂&#xff0c;唯有学习。 第三重点&#xff1a;自律——有了第一点…...

FPGA输出lvds信号点亮液晶屏

1 概述 该方案用于生成RGB信号&#xff0c;通过lvds接口驱动逻辑输出&#xff0c;点亮并驱动BP101WX-206液晶屏幕。 参考&#xff1a;下面为参考文章&#xff0c;内容非常详细。Xilinx LVDS Output——原语调用_vivado原语_ShareWow丶的博客http://t.csdn.cn/Zy37p 2 功能描述 …...

算法面试-深度学习基础面试题整理(2023.8.29开始,每天下午持续更新....)

一、无监督相关&#xff08;聚类、异常检测&#xff09; 1、常见的距离度量方法有哪些&#xff1f;写一下距离计算公式。 1&#xff09;连续数据的距离计算&#xff1a; 闵可夫斯基距离家族&#xff1a; 当p 1时&#xff0c;为曼哈顿距离&#xff1b;p 2时&#xff0c;为欧…...

FireFox禁用HTTP2

问题 最近需要调试接口&#xff0c;但是&#xff0c;Chrome都是强制使用h2协议&#xff0c;即HTTP/2协议。为了排除h2协议排除对接口调用的影响&#xff0c;需要强制浏览器使用HTTP1协议。 解决 FireFox 设置firefox的network.http.http2.enabled为禁用&#xff0c;这样就禁…...

搭建HTTPS服务器

HTTPS代理服务器的作用与价值 HTTPS代理服务器可以帮助我们实现网络流量的转发和加密&#xff0c;提高网络安全性和隐私保护。本文将指导您从零开始搭建自己的HTTPS代理服务器&#xff0c;让您更自由、安全地访问互联网。 1. 准备工作&#xff1a;选择服务器与操作系统 a. 选…...

无人化在线静电监控系统的组成

无人化在线静电监控系统是一种用于检测和监控静电情况的系统&#xff0c;它可以自动地实时监测各个区域的静电水平&#xff0c;并在出现异常情况时发出报警信号。静电监控报警器则是该系统中的一个重要组成部分&#xff0c;用于接收和传达报警信号。 无人化在线静电监控系统通…...

element ui级联选择器数据处理

后端同事返回的级联选择器数据的children是childrens&#xff0c;而组件渲染只识别children&#xff0c;所以需要props自定义传入&#xff0c;代码如下 <el-form-item label"应用页面&#xff1a;" prop"appId"><el-cascader:props"{ child…...

zookeeper-3.6.4集群搭建

1、上传zookeeper安装包并解压 上传路径&#xff1a;/opt/software/ 解压路径&#xff1a;/opt/module/ 2、创建数据目录及日志目录 #数据目录&#xff1a;/data/zookeeper/data/ #3台机器创建存储目录&#xff1a; sudo mkdir -p /data/zookeeper/data#日志目录&#xff1a…...

15种下载文件的方法文件下载方法汇总超大文件下载

15种下载文件的方法&文件下载方法汇总&超大文件下载 15种下载文件的方法Pentesters经常将文件上传到受感染的盒子以帮助进行权限提升&#xff0c;或者保持在计算机上的存在。本博客将介绍将文件从您的计算机移动到受感染系统的15种不同方法。对于那些在盒子上存在且需要…...

使用docker在3台服务器上搭建基于redis 6.x的一主两从三台均是哨兵模式

一、环境及版本说明 如果服务器已经安装了docker,则忽略此步骤,如果没有安装,则可以按照一下方式安装: 1. 在线安装(有互联网环境): 请看我这篇文章 传送阵>> 点我查看 2. 离线安装(内网环境):请看我这篇文章 传送阵>> 点我查看 说明&#xff1a;假设每台服务器已…...

Appium+python自动化(十六)- ADB命令

简介 Android 调试桥(adb)是多种用途的工具&#xff0c;该工具可以帮助你你管理设备或模拟器 的状态。 adb ( Android Debug Bridge)是一个通用命令行工具&#xff0c;其允许您与模拟器实例或连接的 Android 设备进行通信。它可为各种设备操作提供便利&#xff0c;如安装和调试…...

前端倒计时误差!

提示:记录工作中遇到的需求及解决办法 文章目录 前言一、误差从何而来?二、五大解决方案1. 动态校准法(基础版)2. Web Worker 计时3. 服务器时间同步4. Performance API 高精度计时5. 页面可见性API优化三、生产环境最佳实践四、终极解决方案架构前言 前几天听说公司某个项…...

循环冗余码校验CRC码 算法步骤+详细实例计算

通信过程&#xff1a;&#xff08;白话解释&#xff09; 我们将原始待发送的消息称为 M M M&#xff0c;依据发送接收消息双方约定的生成多项式 G ( x ) G(x) G(x)&#xff08;意思就是 G &#xff08; x ) G&#xff08;x) G&#xff08;x) 是已知的&#xff09;&#xff0…...

可靠性+灵活性:电力载波技术在楼宇自控中的核心价值

可靠性灵活性&#xff1a;电力载波技术在楼宇自控中的核心价值 在智能楼宇的自动化控制中&#xff0c;电力载波技术&#xff08;PLC&#xff09;凭借其独特的优势&#xff0c;正成为构建高效、稳定、灵活系统的核心解决方案。它利用现有电力线路传输数据&#xff0c;无需额外布…...

CMake基础:构建流程详解

目录 1.CMake构建过程的基本流程 2.CMake构建的具体步骤 2.1.创建构建目录 2.2.使用 CMake 生成构建文件 2.3.编译和构建 2.4.清理构建文件 2.5.重新配置和构建 3.跨平台构建示例 4.工具链与交叉编译 5.CMake构建后的项目结构解析 5.1.CMake构建后的目录结构 5.2.构…...

dedecms 织梦自定义表单留言增加ajax验证码功能

增加ajax功能模块&#xff0c;用户不点击提交按钮&#xff0c;只要输入框失去焦点&#xff0c;就会提前提示验证码是否正确。 一&#xff0c;模板上增加验证码 <input name"vdcode"id"vdcode" placeholder"请输入验证码" type"text&quo…...

Golang dig框架与GraphQL的完美结合

将 Go 的 Dig 依赖注入框架与 GraphQL 结合使用&#xff0c;可以显著提升应用程序的可维护性、可测试性以及灵活性。 Dig 是一个强大的依赖注入容器&#xff0c;能够帮助开发者更好地管理复杂的依赖关系&#xff0c;而 GraphQL 则是一种用于 API 的查询语言&#xff0c;能够提…...

今日学习:Spring线程池|并发修改异常|链路丢失|登录续期|VIP过期策略|数值类缓存

文章目录 优雅版线程池ThreadPoolTaskExecutor和ThreadPoolTaskExecutor的装饰器并发修改异常并发修改异常简介实现机制设计原因及意义 使用线程池造成的链路丢失问题线程池导致的链路丢失问题发生原因 常见解决方法更好的解决方法设计精妙之处 登录续期登录续期常见实现方式特…...

Reasoning over Uncertain Text by Generative Large Language Models

https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829 1. 概述 文本中的不确定性在许多语境中传达,从日常对话到特定领域的文档(例如医学文档)(Heritage 2013;Landmark、Gulbrandsen 和 Svenevei…...