时间戳

首页 > 解决方案 > 日本动漫js在javascript中发光一个div

javascript - 日本动漫js在javascript中发光一个div

问题描述

基本上，我有一个希望它发光的 div。我使用 CSS 实现了这一点，但想切换到 javascript。

这是我的 CSS 方法：

@keyframes glowing{
            0% { box-shadow: 0 0 3px 0px #001bae; }
            50% { box-shadow: 0 0 6px 2px #001bae; }
            100% { box-shadow: 0 0 3px 0px #001bae;}
}
.CountryLoc{
            position:absolute;
            height:2px;
            width:2px;
            background:#001bae;
            border-radius: 100%;
            display:block;
            box-shadow: 0 0 6px 1px #001bae;
            animation: glowing 2000ms infinite;
}

如果您想实时查看我当前的方法，请访问：https ://neehack.com/map

我想在上面切换到 javascript 日本动漫。

我能够使用下面的脚本淡出盒子阴影发光，但它不会再次发光/淡出100% { box-shadow: 0 0 3px 0px #001bae;}

 anime({
                targets:'.CountryLoc',
                'box-shadow':'0 0 6px 0px #001bae',
                duration:1000,
                loop:true
});

标签： javascriptanime.js

解决方案

我不了解 Anime.js，但使用Web Animation API，您可以相当轻松地翻译 CSS 动画。下面的示例采用您的关键帧并用于Element.animate()设置动画。

const keyframes = [
  { boxShadow: '0 0 3px 0px #001bae' },
  { boxShadow: '0 0 6px 2px #001bae' },
  { boxShadow: '0 0 3px 0px #001bae' }
];

const timing = {
  duration: 2000,
  iterations: Infinity;
};

const targets = document.querySelectorAll('.CountryLoc');
targets.forEach(target => target.animate(keyframes, timing);

尽管尚不清楚您为什么要进行切换。CSS 是大多数性能最高的选项，您不需要任何动态动画。

推荐阅读