gpt4 book ai didi

javascript - 不运行 CSS 的成功动画教程

转载 作者:太空宇宙 更新时间:2023-11-04 05:46:49 26 4
gpt4 key购买 nike

我正在学习使用动画创建成功复选标记的教程。我已经创建了所有元素,例如警报框等,但在制作动画时遇到了问题。

这是我正在关注的代码示例:Link

我试图在我的计算机上将 HTML 部分和 JS 放在一起,并将 css 放在 style.css 工作表中,但不起作用:(

这是 HTML 文档:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
<title>Test</title>

<script>
$("button").click(function () {
$(".check-icon").hide();
setTimeout(function () {
$(".check-icon").show();
}, 10);
});
</script>
</head>
<body>
<div class="success-checkmark">
<div class="check-icon">
<span class="icon-line line-tip"></span>
<span class="icon-line line-long"></span>
<div class="icon-circle"></div>
<div class="icon-fix"></div>
</div>
</div>
<center>
<button id="restart">Restart Animation</button>
</center>
</body>
</html>

我没有复制 css,因为它与链接和长代码相同..

它给了我一个白屏和很多关于代码检查的警告:

Code inspection

因为我做错了什么吗?

谢谢你的帮助,

杰瑞

最佳答案

您的代码中缺少 jQuery,请尝试将其添加到 <head> 中部分。

编辑:您还使用了错误的 .css 文件。我认为您从教程中复制了未编译的 SCSS。要解决此问题,请返回 CodePen 示例并在 CSS 部分的右上角打开上下文菜单并单击“查看编译的 CSS”。然后将 CSS 复制到 style.css 中

这是一个可行的解决方案:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Test</title>
<link rel="stylesheet" href="style.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script>
$(() => {$("button").click(function () {
$(".check-icon").hide();
setTimeout(function () {
$(".check-icon").show();
}, 10);
});});
</script>
</head>
<body>
<div class="success-checkmark">
<div class="check-icon">
<span class="icon-line line-tip"></span>
<span class="icon-line line-long"></span>
<div class="icon-circle"></div>
<div class="icon-fix"></div>
</div>
</div>
<center>
<button id="restart">Restart Animation</button>
</center>
</body>
</html>

关于javascript - 不运行 CSS 的成功动画教程,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58647571/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com