文章/答案/技术大牛

发布

社区首页 >问答首页 >Anime.js动画未启动

问Anime.js动画未启动
EN

Stack Overflow用户

提问于 2020-11-16 15:49:11

回答 1查看 158关注 0票数 2

我有个奇怪的麻烦。我在main.html中有以下代码

更新到animejs的链接和更改的CSS类引用

<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
<script>
anime({
  targets: '.square',
  backgroundColor: '#ffea00',
  borderRadius: '50%',
  duration: 3000,
  scale: 3,
  loop: true
});

</script>

<style type="text/css">
.square {
  width: 60px;
  height: 60px;
  margin: 10px;
  background-color: deepskyblue;
}
</style>
</head>

<body>

<div class="square"></div>

</body>
</html>

我希望我的广场会放大和圆形，但我得到的只是原来的深蓝色广场。换句话说，amine.js动画不会启动。

我的简单案例有什么问题？

我在main.html上打开MacOS上的Google。

html

anime.js

javascript

回答 1

Stack Overflow用户

发布于 2020-11-16 15:53:43

您需要为目标：targets: '.square'使用CSS选择器。

试试这个：

anime({
  targets: '.square',
  backgroundColor: '#ffea00',
  borderRadius: '50%',
  duration: 3000,
  scale: 3,
  loop: true
});

.square {
  width: 60px;
  height: 60px;
  margin: 10px;
  background-color: deepskyblue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>

<div class="square"></div>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/64861173

复制

相似问题

问Anime.js动画未启动
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Anime.js动画未启动EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Anime.js动画未启动
EN