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

文章目录


效果图


html

html 复制代码
<div class="container">
    <div class="ball"></div>
    <input type="range" min="0" max="1" step="0.01" />
</div>

style

css 复制代码
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

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();
相关推荐
GIS之路7 分钟前
GeoTools 结合 OpenLayers 实现空间查询
前端
轻语呢喃7 分钟前
每日LeetCode:合并两个有序数组
javascript·算法
陳有味_ChenUvi7 分钟前
使用 pnpm 优雅搭建 Monorepo 仓库
前端·npm·前端工程化
旷世奇才李先生10 分钟前
XML DOM 安装使用教程
xml·前端·chrome
程序员秘密基地17 分钟前
基于html,css,vue,vscode,vs2022,asp.net,aspnet,.net,c#,mysql数据库,在线健身,俱乐部管理系统
前端·vue.js·后端·mysql·asp.net
Mintopia19 分钟前
Three.js 画布纹理:像素世界的魔法编织术
前端·javascript·three.js
天天摸鱼的java工程师19 分钟前
当我成为面试官,我才知道当年那些面试官其实并不是在难为我,而是在考察我面对问题的拆解能力
前端·后端·面试
袁煦丞23 分钟前
泰拉瑞亚远程联机魔法:cpolar内网穿透实验室第617个成功挑战
前端·程序员·远程工作
玲小珑26 分钟前
Next.js 教程系列(十二)API Routes:构建轻量级后端服务
前端·next.js
JinSo32 分钟前
EasyEditor AI 聊天助手:让低代码开发更简单
前端·javascript·github