庄泽峰
<Puppeteer自动化工具>

Puppeteer 是一个由 Google 开发的 Node.js 库，它提供了一个高级 API 来控制 Chrome 或 Chromium 浏览器的自动化。它可以用于模拟用户在浏览器中的交互行为，例...

标签: Puppeteer
2023-12-4 16:36 
评论(0)  浏览(139)  AI

庄泽峰
<CSS3文字逐渐显现> 

<!DOCTYPE html>
<html>
<head>
<style>
@keyframes fadeIn {
  0% { opacity: 0; }
  20% { opacity: 0.5; }
  100% { opacity: 1; }
}

.fade-in {
  animation: fadeIn 5s ease-in-out;
  animation-fill-mode: forwards;
  opacity: 0.5;
}
</style>
</head>
<body>
  <h1>
    <span class="fade-in">G</span>
    <span class="fade-in">P</span>
    <span class="fade-in">T</span>
    <span class="fade-in">S</span>
  </h1>
</body>
</html>
标签: CSS3
2023-12-2 14:28 
评论(0)  浏览(116)  AI

庄泽峰
<CSS3分叉生长的树> 

<!DOCTYPE html>
<html>
<head>
    <title>分叉生长的树</title>
    <style>
        body {
            background-color: #000;
        }

        .tree {
            position: relative;
            width: 200px;
            height: 400px;
            margin: 100px auto;
        }

        .branch {
            position: absolute;
            width: 20px;
            height: 100px;
            background-color: #8B4513;
            bottom: 0;
            left: 50%;
            transform-origin: bottom center;
            animation: grow 10s infinite;
        }

        .branch:before {
            content: "";
            position: absolute;
            width: 12px;
            height: 50px;
            background-color: #8B4513;
            bottom: 0;
            left: 50%;
            transform-origin: bottom center;
            transform: rotate(-30deg);
            animation: grow 12s infinite;
        }

        .branch:after {
            content: "";
            position: absolute;
            width: 8px;
            height: 30px;
            background-color: #8B4513;
            bottom: 0;
            left: 50%;
            transform-origin: bottom center;
            transform: rotate(30deg);
            animation: grow 20s infinite;
        }

        @keyframes grow {
            0% {
                height: 0;
            }
            50% {
                height: 300px;
            }
            100% {
                height: 300px;
            }
        }
    </style>
</head>
<body>
    <div class="tree">
        <div class="branch"></div>
    </div>
</body>
</html>

本段代码来自 https://phoncent.com/html5css
标签: CSS3
2023-11-30 16:31 
评论(0)  浏览(125)  AI

庄泽峰
<HTML点击就变大消失的小球> 

<!DOCTYPE html>
<html>
<head>
  <title>点击就变大消失的小球</title>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
    }

    .ball {
      width: 50px;
      height: 50px;
      background-color: red;
      border-radius: 50%;
      position: relative;
      cursor: pointer;
    }

    .explode {
      animation: explode 0.5s forwards;
    }

    @keyframes explode {
      0% {
        transform: scale(1);
      }
      100% {
        transform: scale(10);
        opacity: 0;
      }
    }
  </style>
</head>
<body>
  <div class="ball"></div>

  <script>
    document.querySelector('.ball').addEventListener('click', function() {
      this.classList.add('explode');
    });
  </script>
</body>
</html>
标签: HTML
2023-11-30 09:40 
评论(0)  浏览(136)  AI

庄泽峰
<学过HTML、CSS和JavaScript后，需要学PHP吗？>

学过HTML、CSS和JavaScript后，需要学PHP吗？这个主要看个人兴趣。 学习PHP是一个很好的选择，如果你有兴趣进一步学习服务器端开发和构建动态网站。PHP是一种流行的服务器端编程语言，广...

标签: HTML CSS PHP 小学生学编程 JavaScript
2023-6-27 09:52 
评论(0)  浏览(227)  AI

庄泽峰
<学会创建网页后，进一步要学习什么？>

一旦你掌握了基本的网页创建技能，你可以进一步学习以下内容： 响应式设计：学习如何创建响应式网页，使网页在不同设备和屏幕尺寸上呈现良好的用户体验。 CSS框架：了解流行的CSS框架（如Bootstra...

标签: 网页语言 HTML CSS 小学生学编程 JavaScript
2023-6-27 08:01 
评论(0)  浏览(230)  AI

庄泽峰
<学习创建一个简单的网页项目>

学习HTML、CSS和JavaScript后，将它们结合起来学习可以帮助小学生更好地理解网页开发的全貌和实践。 一种常见的方式是通过创建一个简单的网页项目，结合HTML、CSS和JavaScript来...

标签: 网页语言 HTML CSS 小学生学编程 JavaScript
2023-6-27 08:01 
评论(0)  浏览(203)  AI

热门文章

最新评论