【日常记录】【CSS】利用动画延迟实现复杂动画

文章目录

    • 1、介绍
    • 2、原理
    • 3、代码
    • 4、参考链接

1、介绍

在这里插入图片描述

对于这个效果而言,最先想到的就是 监听滑块的input事件来做一些操作 ,但是会发现,对于某一个节点的时候,这个样式操作起来比较麻烦

在这里插入图片描述

只看这个代码的话,发现他用的是动画,那 动画与下面的滑块怎么联动?

2、原理

在css中,可以自定义动画

CSS animation 属性是 animation-name,animation-duration, animation-timing-function,animation-delay,animation-iteration-count,animation-direction,animation-fill-mode 和 animation-play-state 属性的一个简写属性形式。

animation-delay 是控制动画延迟的
正值表示动画应在指定的时间量过去后开始。默认值为 0s,表示动画应立即开始。
负值会导致动画立即开始,但是从动画循环的某个时间点开始。例如,如果你将 -1s 作为动画延迟时间,则动画将立即开始,但是将在动画序列的第 1 秒开始。如果你为动画延迟指定负值,但起始值是隐含的,则起始值取自应用动画到元素的时刻。

在这里插入图片描述

其实,核心就在这里,这样的话就可以 通过动画的延迟属性 与 滑块的input 事件联动,实时设置动画的延迟属性的值

animation-play-state 是控制动画运行还是暂停。

在这里插入图片描述

那其实就是说,我先可以先做好这个自定义动画,并且动画设置暂停,通过脚本来实时控制当前这个动画,延迟 多少秒,在那个时间点,开始执行

/* 举个例子,  @keyframes 后面跟的是 动画名称, */@keyframes faceColor {0% {background-color: tomato;}100% {background-color: #3cb371;}}

3、代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>input[type=range]::-webkit-slider-thumb {-webkit-appearance: none;}.container {width: 100%;height: 100vh;display: flex;flex-direction: column;justify-content: center;align-items: center;}.face {--delay: 0s;position: relative;width: 150px;height: 150px;border-radius: 50%;background-color: red;animation: faceColor 1s var(--delay) linear forwards paused;}.eye,.eye2 {position: absolute;top: 50px;left: 20px;width: 30px;height: 30px;background-color: #fff;border-radius: 50%;clip-path: polygon(0 90%, 100% 0, 100% 100%, 0% 100%);animation: eye 1s var(--delay) linear forwards paused;}.eye2 {top: 50px;right: 20px;left: unset;clip-path: polygon(0 0, 100% 90%, 100% 100%, 0% 100%);}.range {margin-top: 10px;}@keyframes faceColor {0% {background-color: tomato;}25% {background-color: orange;}50% {background-color: #1e90ff;}75% {background-color: orchid;}100% {background-color: #3cb371;}}@keyframes eye {0% {clip-path: polygon(0 90%, 100% 0, 100% 100%, 0% 100%);}25% {clip-path: polygon(0 70%, 100% 0, 100% 100%, 0% 100%);}50% {clip-path: polygon(0 50%, 100% 0, 100% 100%, 0% 100%);}75% {clip-path: polygon(0 20%, 100% 0, 100% 100%, 0% 100%);}100% {clip-path: polygon(0 0%, 100% 0, 100% 100%, 0% 100%);}}</style>
</head><body><div class="container"><div class="face"><div class="eye"></div><div class="eye2"></div></div><input type="range" name="" id="" max="1" min="0" step="0.01" class="range" value="0"></div><script>let rangeEl = document.querySelector('.range');let faceEl = document.querySelector('.face');faceEl.style.backgroundColor = 'red';rangeEl.addEventListener('input', function (e) {console.log(e);let value = this.value;faceEl.style.setProperty('--delay', '-' + value + 's');})</script>
</body></html>

4、参考链接

  • animation MDN
  • css-clip-path 在线裁剪工具

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

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

相关文章

超详细!Python中 pip 常用命令

相信对于大多数熟悉Python的人来说&#xff0c;一定都听说并且使用过pip这个工具&#xff0c;但是对它的了解可能还不一定是非常的透彻&#xff0c;今天小编就来为大家介绍10个使用pip的小技巧&#xff0c;相信对大家以后管理和使用Python当中的标准库会有帮助。 安装 当然在…

【算法一则】编辑距离 【动态规划】

题目 给你两个单词 word1 和 word2&#xff0c; 请返回将 word1 转换成 word2 所使用的最少操作数 。 你可以对一个单词进行如下三种操作&#xff1a; 插入一个字符 删除一个字符 替换一个字符 示例 1&#xff1a;输入&#xff1a;word1 "horse", word2 "…

16 - Debian如何配置vsftpd(1)实现匿名上传下载

作者&#xff1a;网络傅老师 特别提示&#xff1a;未经作者允许&#xff0c;不得转载任何内容。违者必究&#xff01; Debian如何配置vsftpd&#xff08;1&#xff09;实现匿名上传下载 《傅老师Debian小知识库系列之16》——原创 前言 傅老师Debian小知识库特点&#xff1a…

微信小程序获取蓝牙信标

/*** 搜索设备界面*/ import Dialog from vant/weapp/dialog/dialog; Page({data: {list: []},onPullDownRefresh: function () {wx.request({url: https://wwz.jingyi.icu/app/Explain/index,data: {scenic_id: 3},method: POST,success: (res) > {console.log(res);let th…

重磅!国内首个基于单张图片的3D人脸重建课程

3D人脸重建在计算机视觉和图形学中一直是一个经典且热门的研究方向&#xff0c;在游戏、影视、娱乐等众多行业也有着广泛的应用。早期人脸重建主要基于多视角相机或深度相机&#xff0c;随着深度学习的兴起&#xff0c;基于单张图片的人脸重建成为可能&#xff0c;且重建的精度…

数学建模---Matlab学习笔记

1.经典例题 &#xff08;1&#xff09;判断质数 给定一个大于100的数字&#xff0c;判断是否为质数 先设定布尔值是true,也就是假设这个数字是质数&#xff0c;利用for循环进行遍历直到n-1&#xff0c;如果被任意的数字整除&#xff0c;就说明不是质数&#xff0c;我们就把布…

2024 年排名前 5 的 CSS 框架

文章目录 1、Bootstrap2、Tailwind CSS3、Foundation4、Bulma5、UIKit 1、Bootstrap Bootstrap框架是由Twitter的设计师Mark Otto和Jacob Thornton合作开发的&#xff0c;于2011年8月在GitHub上发布。它是目前最受欢迎的前端框架之一&#xff0c;被广泛应用于各种Web项目中。Bo…

最新Latex2024安装教程 超简单

Latex是一款常用的论文写作工具&#xff0c;今天小菜介绍Latex的安装配置过程。 1. 来到官网下载镜像文件 https://www.tug.org/texlive/ 按步骤点击&#xff1a; 就会进入一个最近的镜像网站&#xff0c;选择textlive2024.iso即可 下载完成之后解压&#xff0c;安装路径…

Linux02(项目部署,手动和自动部署,JDK版本问题,安装软件,安装软件,安装JDK,Tomcat,MySQL,Irzsz)

目录 一、安装软件 1. 安装准备工作 1 Linux里的软件安装方式 2 上传软件到Linux 3 拍照虚拟机快照 2. 安装JDK 1 卸载自带jdk 2 解压JDK 3 配置环境变量 4 测试JDK 3. 安装Tomcat 1 解压Tomcat 2 修改防火墙设置 3 测试Tomcat 启动Tomcat 访问Tomcat 查看Tom…

git 小记

一、 github新建仓库 git clone 。。。。。。。。。。。 &#xff08;增删查补&#xff0c;修改&#xff09; git add . git commit -m "修改” git push (git push main) 二、branch 分支 branch并不难理解&#xff0c;你只要想像将代码拷贝到不同目录…

MongoDB的CURD(增删改查操作)

读者大大们好呀&#xff01;&#xff01;!☀️☀️☀️ &#x1f525; 欢迎来到我的博客 &#x1f440;期待大大的关注哦❗️❗️❗️ &#x1f680;欢迎收看我的主页文章➡️寻至善的主页 ✈️如果喜欢这篇文章的话 &#x1f64f;大大们可以动动发财的小手&#x1f449;&#…

刷代码随想录有感(34):前k个高频元素

本题代码涉及到了多个陌生概念&#xff0c;题干如下&#xff1a; 代码; class Solution { public:class mycomparison{//自定义规则&#xff0c;使优先队列可以自动排序public:bool operator()(pair<int, int> & lhs, pair<int, int> & rhs){return lhs.s…

第十五届蓝桥杯大赛软件赛省赛 C/C++ 大学 B 组(基础题)

试题 C: 好数 时间限制 : 1.0s 内存限制: 256.0MB 本题总分&#xff1a;10 分 【问题描述】 一个整数如果按从低位到高位的顺序&#xff0c;奇数位&#xff08;个位、百位、万位 &#xff09;上 的数字是奇数&#xff0c;偶数位&#xff08;十位、千位、十万位 &…

如何保障UDP传输中数据文件不丢失?

UDP协议因其低时延和高速传输的特性&#xff0c;在实时应用和大量数据传输领域中发挥着不可或缺的作用。但是&#xff0c;由于UDP是一种无连接的通讯协议&#xff0c;它并不确保数据包的顺序、完整性和可靠性。 为了解决UDP传输中数据一致性的问题&#xff0c;技术专家们进行了…

【Linux系统编程】第四弹---基本指令(二)

✨个人主页&#xff1a; 熬夜学编程的小林 &#x1f497;系列专栏&#xff1a; 【C语言详解】 【数据结构详解】【C详解】【Linux系统编程】 目录 1、echo指令 2、cat指令 3、more指令 4、less指令 4、head指令 5、tail指令 6、时间相关的指令 7、cal指令 8、find指…

Wix在国内受限?为何不使用中国版WIX自助建站,wix的国产替代工具

wix是一款知名的在线网站建站工具&#xff0c;能让用户在其网络上网站编辑器中拖放工具创建HTML5网站。用户可在他们的网站编辑器中加入额外的功能&#xff0c;例如社交网络按钮、电子商务功能、联系表格、电子报及社群论坛等。 但wix在国内不能用&#xff0c;或打开速度很慢&a…

npm命令卡在reify:eslint: timing reifyNode:node_modules/webpack Completed in 475ms不动

1.现象 执行npm install命令时&#xff0c;没有报错&#xff0c;卡在reify:eslint: timing reifyNode:node_modules/webpack Completed in 475ms不动 2.解决办法 &#xff08;1&#xff09;更换淘宝镜像源 原淘宝 npm 域名http://npm.taobao.org 和 http://registry.npm.ta…

git clone自动安装最新版本,如何选择安装自己想要的其他版本,最简单解决方法

比如本人最新在安装 git clone https://github.com/synthetik-technologies/blastfoam.git 本人想要其中的3.0版本&#xff0c;但是上面git clone默认是使用最新版本6.2.0 这时候可以先执行 git clone https://github.com/synthetik-technologies/blastfoam.git 然后由…

【C++】力扣OJ题:构建杨辉三角

Hello everybody!今天给大家介绍一道我认为比较经典的编程练习题&#xff0c;之所以介绍它是因为这道题涉及到二维数组的构建&#xff0c;如果用C语言动态构建二维数组是比较麻烦的&#xff0c;而用C中STL的vector<vector<int>>,就可以立马构建出来&#xff0c;这也…

React-Redux(一)

​&#x1f308;个人主页&#xff1a;前端青山 &#x1f525;系列专栏&#xff1a;React篇 &#x1f516;人终将被年少不可得之物困其一生 依旧青山,本期给大家带来React篇专栏内容:React-Redux&#xff08;一&#xff09; 目录 1、简介 2、三大原则&#xff08;重点&#xf…