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();
相关推荐
孩子 你要相信光10 分钟前
css之一个元素可以同时应用多个动画效果
前端·css
萌萌哒草头将军11 分钟前
Oxc 和 Rolldown Q4 更新计划速览!🚀🚀🚀
javascript·vue.js·vite
huangql52021 分钟前
npm 发布流程——从创建组件到发布到 npm 仓库
前端·npm·node.js
Qlittleboy35 分钟前
uniapp如何使用本身的字体图标
javascript·vue.js·uni-app
Days205037 分钟前
LeaferJS好用的 Canvas 引擎
前端·开源
小白菜学前端1 小时前
vue2 常用内置指令总结
前端·vue.js
林_深时见鹿1 小时前
Vue + ElementPlus 自定义指令控制输入框只可以输入数字
前端·javascript·vue.js
GDAL1 小时前
Knockout.js 任务调度模块详解
javascript·knockout
椒盐螺丝钉1 小时前
Vue组件化开发介绍
前端·javascript·vue.js
koooo~1 小时前
v-model与-sync的演变和融合
前端·javascript·vue.js