原生js实现九宫格抽奖动画

最新推荐文章于 2025-09-15 10:30:00 发布

原创

最新推荐文章于 2025-09-15 10:30:00 发布 · 948 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

这篇博客介绍了如何使用原生JavaScript创建一个九宫格抽奖动画。通过点击‘抽奖’按钮，实现格子转动效果，并在结束后显示中奖号码。主要涉及CSS样式设计、JavaScript事件监听以及动态改变元素样式来实现动画效果。

原生js实现九宫格抽奖动画

样式及代码如下

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
  <style>
    .wrap {
   
   
      display: flex;
      flex-wrap: wrap;

    }

    .wrap li {
   
   
      width: 33.33%;
      height: 100px;
      background: pink;
      list-style: none;
      display: flex;
      justify-content: center;
      align-items:</