原生js实现悬浮播放图片帧动画效果代码-html代码-BFW代码库

原生js实现悬浮播放图片帧动画效果代码

代码语言：html

所属分类：动画

代码描述：原生js实现悬浮播放图片帧动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>原生Javascript播放图片序列帧动画</title>
</head>

<body>

    <style>
        .box{text-align: center;}
        .box>*{display: inline-block;}
        .hv-image-play{background-size: 100%;}
    </style>原生Javascript播放图片序列帧动画

    <h2 style="text-align: center;">
        示例 (把鼠标移动到图标上面)
    </h2>
    <style>
        .box{text-align: center;}
                .box>*{display: inline-block;}
                .hv-image-play{background-size: 100%;}
    </style>
    <div class="box" style="margin-top:2rem;">
        
        <div class="hv-image-play" style="width: 64px; height: 64px; background-image: url(//repo.bfw.wiki/bfwrepo/images/effect/611e2b5ae2a28.png&quot;); background-position-y: 0px;" keyframes="//repo.bfw.wiki/bfwrepo/images/effect/611e2b5ae2a28.png"></div>
        <div class="hv-image-play" style="width: 64px; height: 64px; background-image: url(//repo.bfw.wiki/bfwrepo/images/effect/611e2b5b36ac3.png&quot;); background-position-y: 0px;" keyframes="//repo.bfw.wiki/bfwrepo/images/effect/611e2b5b36ac3.png"></div>
        <div class="hv-image-play" style="width: 64px; height: 64px; background-image: url(//repo.bfw.wiki/bfwrepo/images/effect/611e2b5b5d4ca.png&quot;); background-position-y: 0px;" keyframes="//repo.bfw.wiki/bfwrepo/images/effect/611e2b5b5d4ca.png"></div>
        <div class="hv-image-play" style="width: 64px; height: 64px; background-image: url(//repo.bfw.wiki/bfwrepo/images/effect/611e2b5ba3ad6.png&quot;); background-position-y: 0px;" keyframes="//repo.bfw.wiki/bfwrepo/images/effect/611e2b5ba3ad6.png"></div>
        <div class="hv-image-play" style="width: 64px; height: 64px; background-image: url(//repo.bfw.wiki/bfwrepo/images/effect/611e2b5beb259.png&quot;); background-position-y: 0px;" keyframes="//repo.bfw.wiki/bfwrepo/images/effect/611e2b5beb259.png"></div>
        <div class="hv-image-play" style="width: 64px; height: 64px; background-image: url(//repo.bfw.wiki/bfwrepo/images/effect/611e2b5c45562.png&quot;); background-position-y: 0px;" keyframes="//repo.bfw.wiki/bfwrepo/images/effect/611e2b5c45562.png"></div>
        <div class="hv-image-play" style="width: 64px; height: 64px; background-image: url(//repo.bfw.wiki/bfwrepo/images/effect/611e2b5c8fcd2.png&quot;); background-position-y: 0px;" keyframes="//repo.bfw.wiki/bfwrepo/images/effect/611e2b5c8fcd2.png"></div>
        <div class="hv-image-play" style="width: 64px; height: 64px; background-image: url(//repo.bfw.wiki/bfwrepo/images/effect/611e2b5cd2cbb.png&quot;); background-position-y: 0px;" keyframes="//repo.bfw.wiki/bfwrepo/i.........完整代码请登录后点击上方下载按钮下载查看