HTML 如何从Codepen获取代码并在本地使用

在本文中，我们将介绍如何从Codepen获取代码，并在本地使用。Codepen是一个Web开发平台，允许用户创建和共享HTML、CSS和JavaScript代码片段。有时，当我们看到Codepen上的一个很酷的项目或代码片段时，我们可能希望将其保存到本地计算机上，并在自己的项目中使用它。下面是一些简单的步骤来帮助我们实现这个目标。

阅读更多：HTML 教程

步骤一：定位所需Codepen项目

首先，我们需要在Codepen网站上找到所需的项目。可以使用Codepen的搜索功能来查找特定的项目，或者浏览页面上的热门项目和收藏夹。一旦找到了感兴趣的项目，我们需要确保该项目是公开可见的，以便能够访问和获取其中的代码。

步骤二：复制所需代码

在找到所需的项目后，我们需要复制项目中的源代码。在Codepen上，源代码通常分为三部分：HTML、CSS和JavaScript。我们可以点击项目编辑器的各个选项卡，以分别查看和复制这些代码。根据我们的需要，我们可以选择复制全部三个代码部分，或仅复制其中的一部分。

步骤三：创建本地HTML文件

一旦我们复制了所需的代码，接下来就是在本地计算机上创建一个HTML文件来保存这些代码。可以使用任何文本编辑器工具，如Notepad、Sublime Text或VS Code等。打开所选择的文本编辑器，并创建一个新的HTML文件。

步骤四：粘贴代码到HTML文件中

在新创建的HTML文件中，将之前复制的代码粘贴到合适的位置。将HTML代码粘贴到<body>标签中，CSS代码粘贴到<style>标签中，JavaScript代码粘贴到<script>标签中。确保代码粘贴到正确的位置，以确保它们能够正确地运行和相互交互。

步骤五：保存文件并在浏览器中打开

完成代码粘贴后，我们需要将文件保存为.html格式。选择一个有意义的文件名，并将文件后缀更改为.html。保存文件后，我们可以通过双击打开它，或者在浏览器中选择“文件”->“打开文件”来打开这个新的HTML文件。在浏览器中打开文件后，我们就能看到项目的效果和功能了。

示例

假设我们在Codepen上找到一个漂亮的简单时钟项目，下面是我们从中获取代码并在本地使用的示例。

代码片段如下：

HTML:
<div class="clock">
  <div class="hour hand"></div>
  <div class="minute hand"></div>
  <div class="second hand"></div>
</div>

CSS:
.clock {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 50px auto;
  border: 2px solid gray;
  border-radius: 50%;
  transform: rotate(90deg);
}

.hand {
  position: absolute;
  background-color: black;
  transform-origin: bottom center;
}

.hour {
  width: 8px;
  height: 70px;
  top: 65px;
  left: 96px;
}

.minute {
  width: 6px;
  height: 90px;
  top: 55px;
  left: 97px;
}

.second {
  width: 4px;
  height: 110px;
  top: 45px;
  left: 98px;
}

JavaScript:
function rotateClock(){
  const now = new Date();
  const second = now.getSeconds() * 6 - 90;
  const minute = now.getMinutes() * 6 - 90;
  const hour = now.getHours() * 30 - 90;

  document.querySelector('.second').style.transform = `rotate({second}deg)`;
  document.querySelector('.minute').style.transform = `rotate({minute}deg)`;
  document.querySelector('.hour').style.transform = `rotate(${hour}deg)`;
}

setInterval(rotateClock, 1000);