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();
相关推荐
落笔画忧愁e几秒前
扣子Coze纯前端部署多Agents
前端
海天胜景3 分钟前
vue3 当前页面方法暴露
前端·javascript·vue.js
GISer_Jing10 分钟前
前端面试常考题目详解
前端·javascript
Boilermaker19921 小时前
【Java EE】SpringIoC
前端·数据库·spring
中微子1 小时前
JavaScript 防抖与节流:从原理到实践的完整指南
前端·javascript
天天向上10242 小时前
Vue 配置打包后可编辑的变量
前端·javascript·vue.js
芬兰y2 小时前
VUE 带有搜索功能的穿梭框(简单demo)
前端·javascript·vue.js
好果不榨汁2 小时前
qiankun 路由选择不同模式如何书写不同的配置
前端·vue.js
小蜜蜂dry2 小时前
Fetch 笔记
前端·javascript
拾光拾趣录2 小时前
列表分页中的快速翻页竞态问题
前端·javascript