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();
相关推荐
Setsuna_F_Seiei7 分钟前
CocosCreator 游戏开发 - 利用 AssetsBundle 技术对小游戏包体积进行优化
前端·cocos creator·游戏开发
黄毛火烧雪下18 分钟前
高效的项目构建和优化之前端构建工具
前端
90后的晨仔1 小时前
在 macOS 上轻松获取 GIF 图片总时长:多种实用方法详解
前端
技术钱1 小时前
vue3前端解析excel文件
前端·vue.js·excel
mapbar_front1 小时前
顺利通过试用期:避开三大陷阱,掌握三个关键点
前端·面试
掘金安东尼1 小时前
Transformers.js:让大模型跑进浏览器
开发语言·javascript·ecmascript
why技术1 小时前
1K+Star的开源项目能给一个在校大学生带来什么?
前端·人工智能·后端
@PHARAOH1 小时前
HOW - localstorage 超时管理方案
前端·javascript·vue.js
im_AMBER2 小时前
React 05
开发语言·前端·javascript·笔记·学习·react.js·前端框架
showker2 小时前
ecstore等产品开启缓存-后台及前台不能登录原因-setcookie+session问题
java·linux·前端