开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

我如何在垂直堆栈中画4个正方形来回移动？

在垂直堆栈中画4个正方形来回移动，可以通过前端开发技术实现。以下是一个可能的解决方案：

HTML和CSS布局：使用HTML创建一个容器元素，设置其高度和宽度，以及相应的CSS样式，使其成为一个垂直堆栈。然后使用CSS创建4个正方形的子元素，设置它们的样式，使其成为正方形并排列在垂直堆栈中。
JavaScript动画：使用JavaScript编写动画逻辑。可以使用CSS的transform属性和transition属性来实现平滑的动画效果。通过改变正方形的位置属性，可以实现它们在垂直堆栈中来回移动。
事件监听：为了让正方形能够响应用户的操作，可以使用JavaScript添加事件监听器。例如，可以监听鼠标点击事件或触摸事件，以便在用户点击正方形时改变它们的位置。
示例代码：

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      height: 400px;
      width: 100px;
      position: relative;
    }
    .square {
      width: 100px;
      height: 100px;
      position: absolute;
      background-color: red;
      transition: transform 0.5s ease;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="square" id="square1"></div>
    <div class="square" id="square2"></div>
    <div class="square" id="square3"></div>
    <div class="square" id="square4"></div>
  </div>

  <script>
    const squares = document.querySelectorAll('.square');
    let direction = 1;
    let position = 0;

    function animateSquares() {
      position += direction * 100;
      if (position >= 300 || position <= 0) {
        direction *= -1;
      }
      squares.forEach(square => {
        square.style.transform = `translateY(${position}px)`;
      });
    }

    setInterval(animateSquares, 1000);
  </script>
</body>
</html>

这段代码创建了一个垂直堆栈容器，其中包含4个红色正方形。通过JavaScript的定时器和CSS的transform属性，每秒钟正方形在垂直方向上来回移动。可以根据需要调整容器和正方形的样式。

请注意，以上代码仅为示例，实际实现可能需要根据具体需求进行调整。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

详解视觉误差对UI设计的影响和解决方案

视觉误差会对UI造成什么样的影响，业界内流行的解决方案又有哪些，本文将以超过五十个例子为你讲解。希望学习UI的朋友通过这篇文章可以解决这个问题。俗话说眼见为实，但其实我们的眼睛经常欺骗我们。眼睛通过光的反射接收信息，然后经过一次「脑补」最终形成我们所谓「看见」的图像。脑补这个过程会因为各种原因的影响导致我们对于「看见」的事物的理解产生偏差。这一点对图形化操作界面的设计非常影响。既然无法绕过，设计师就要学会如何去「适配」人类的视觉惯性画出“正确”的界面。

01

PS基础之移动工具和分布对齐

如果感觉小方块之间的间距还是偏大或偏小，只要改变两端方块的距离（移上或移下），再使用垂直分布调整即可

02

使用 SVG 和 JS 创建一个由星形变心形的动画

序言：首先，这是一篇学习 SVG 及 JS 动画不可多得的优秀文章。我非常喜欢 Ana Tudor 写的教程。在她的教程中有大量使用 SVG 制作的图解以及实时交互 DEMO，可以说教程的所有细枝末节都可以成为学习 SVG 以及 JS 画图的资料。另一方面，这篇教程也非常枯燥，因为教程的主要篇幅是关于几何图形的数学计算，不过上过中学的人都能理解。全篇翻译完，我觉得我几乎重新温习了一遍中学的几何知识，顺便学了点英语词汇。最后还要感叹一下，想要灵活运用 SVG 画图，深厚的数学功底是不可或缺的，同时还要有敏锐

05

MFC绘图小实验(1)

这学期开了一门计算机图形学的课程，感觉蛮有趣的，所以想把书上的那些样例程序都实现一遍，了解基本的绘图原理和要点。 1，使用用户自定义的映射模式，设置窗口大小和视区相等的二维坐标系。视区中x轴水平向右为正，y轴垂直向上为正，原点位于屏幕客户区中心。 void CTestoneView::OnDraw(CDC* pDC) { CTestoneDoc* pDoc = GetDocument(); ASSERT_VALID(pDoc); // TODO: add draw code for

06

在编程中发现数学之美——使用Python小龟绘制多边形

在使用数学知识画出很酷的各种图形之前，你需要先学习Python编程语言的基础知识。本文将会带你熟悉以下编程概念：循环、变量、函数、使用小龟模块绘制图像。本文假设你已经安装了Python，如果没有，欢迎你访问我的在线编程学习网站www.icoding.pub，你可以在编程入门—使用python语言开发游戏课程中下载Python并学习安装过程和Python基础操作。本文是在Python编程中发现数学之美的第一章内容，其余内容会陆续发布在www.icoding.pub，欢迎关注。

05

【编程课堂】海龟作图

0、前言 turtle 是 python 内置的一个比较有趣味的模块，俗称海龟作图，它是基于 tkinter 模块打造，提供一些简单的绘图工具，海龟作图最初源自 20 世纪 60 年代的 Logo 编程语言，之后一些很酷的 Python 程序员构建了 turtle 库，让其他程序员只需要 import turtle，就可以在 Python 中使用海龟作图。 1、基本功能介绍在海龟作图中，我们可以编写指令让一个虚拟的（想象中的）海龟在屏幕上来回移动。这个海龟带着一只钢笔，我们可以让海龟无论移动到哪都使用

07

Excel技巧：在工作表中绘制完美的形状

“绘图”工具栏中的椭圆形工具很难使用。如果开始在单元格的左上角绘制矩形，形状将从该角开始。但是，如果在同一个点开始画一个圆，画的椭圆将不会完全包含单元格中的文本。此外，为什么没有圆形和正方形？有朋友觉得很难画出完美的圆形和正方形。

01

海龟图c语言编程,【编程课堂】海龟作图

turtle是 python 内置的一个比较有趣味的模块，俗称海龟作图，它是基于 tkinter 模块打造，提供一些简单的绘图工具，海龟作图最初源自 20 世纪 60 年代的 Logo 编程语言，之后一些很酷的 Python 程序员构建了 turtle 库，让其他程序员只需要 import turtle，就可以在 Python 中使用海龟作图。

01

Python中的高级turtle（海龟）作图（续）

四、填色 color 函数有三个参数。第一个参数指定有多少红色，第二个指定有多少绿色，第三个指定有多少蓝色。比如，要得到车子的亮红色，我们用 color(1,0,0)，也就是让海龟用百分之百的红色画笔。这种红色、绿色、蓝色的混搭叫做RGB(Red,Green,Blue)。因为红绿蓝是色光上的三原色，任何颜色都可以通过改变三原色的比重来调配出来。虽然我们不是在计算机屏幕上混合颜料（我们用的是光！），但我们可以把RGB方案想象成三个颜料桶，一个红的，一个绿的和一个蓝的。每个桶里都是满的，我们可以看成满桶的值

06

Canvas 绘制镂空的正方形以及非零环绕填充规则

绘画的方法一：画四条线，然后设置线的宽度很宽，组合为一个镂空的正方形。绘画的方法二：画两个嵌套的正方形，采用非零环绕填充规则进行颜色的填充。

01

CAD2020软件安装教程-cad软件全版本下载地址

AutoCAD是目前计算机辅助设计领域最流行的CAD软件，此软件功能强大、使用方便，在国内外广泛应用于机械、建筑、家居、纺织等诸多行业。

03

算法创作|跟奥巴马一起编程

美国总统奥巴马不仅呼吁所有人都学习编程，甚至以身作则编写代码，成为美国历史上首位编写计算机代码的总统。2014 年底，为庆祝“计算机科学教育周”正式启动，奥巴马编写了很简单的计算机代码：在屏幕上画一个正方形。现在你也跟他一起画吧！

03

OpenGL ES正交投影实现方法（三）

本文实例为大家分享了OpenGL ES正交投影展示的具体代码，供大家参考，具体内容如下

02

实验3 OpenGL几何变换

（1）阅读实验原理，运行示范实验代码，掌握OpenGL程序平移、旋转、缩放变换的方法；

02

Avalonia中的线性渐变画刷LinearGradientBrush

在WPF中使用Shape实现复杂线条动画后，尝试在Avalonia中也实现同样效果。尽管官方提供了从WPF到Avalonia的快速入门文档，但由于第一次使用Avalonia，体验过程中并不是很顺利，主要是卡在线性渐变画刷LinearGradientBrush的使用上。Avalonia中的线性渐变画刷与WPF中的略有差异，但相关文档并不多，故将此次经历记录下来并分享，希望能帮助大家少走弯路。

01

团体程序设计天梯赛-练习集 L1-015 跟奥巴马一起画方块

美国总统奥巴马不仅呼吁所有人都学习编程，甚至以身作则编写代码，成为美国历史上首位编写计算机代码的总统。2014年底，为庆祝“计算机科学教育周”正式启动，奥巴马编写了很简单的计算机代码：在屏幕上画一个正方形。现在你也跟他一起画吧！

02

小程序—九宫格心形拼图

感觉很有趣，就上网查了查怎么做，大部分的说法就是用美图秀秀的拼图功能来做，在微信小程序中也有专门做心形拼图的小程序，我都试了试之后，感觉还可以更加简单一些，于是我就自己做了个小程序。

01

潘石屹用Python解决100个问题 | 葵花绘图

程序的主要逻辑部分是2层循环。2个循环的内循环，是画一个正方形即画笔向前画100个像素，形成一条边。然后画笔转动90度，是个直角，再画100个像素，形成第二条边。这样话4次就组成了一个正方形。而外层的循环，每次沿顺时针方向移动10度，然后再调用内层循环画正方形。

02

python菜鸟教程 | 葵花绘图

程序的主要逻辑部分是2层循环。2个循环的内循环，是画一个正方形即画笔向前画100个像素，形成一条边。然后画笔转动90度，是个直角，再画100个像素，形成第二条边。这样话4次就组成了一个正方形。而外层的循环，每次沿顺时针方向移动10度，然后再调用内层循环画正方形。

02

Android OpenGL ES(三)-平面图形

前两章，其实我们已经明白了绘制平面图形的套路了。接下来我们按照套路继续画其他的图形。

03

1036. 跟奥巴马一起编程(15)

美国总统奥巴马不仅呼吁所有人都学习编程，甚至以身作则编写代码，成为美国历史上首位编写计算机代码的总统。2014年底，为庆祝“计算机科学教育周”正式启动，奥巴马编写了很简单的计算机代码：在屏幕上画一个正方形。现在你也跟他一起画吧！

01

【通俗易懂】机器学习中 L1 和 L2 正则化的直观解释

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/red_stone1/article/details/80755144

01

【通俗易懂】机器学习中 L1 和 L2 正则化的直观解释[通俗易懂]

机器学习中，如果参数过多，模型过于复杂，容易造成过拟合（overfit）。即模型在训练样本数据上表现的很好，但在实际测试样本上表现的较差，不具备良好的泛化能力。为了避免过拟合，最常用的一种方法是使用使用正则化，例如 L1 和 L2 正则化。但是，正则化项是如何得来的？其背后的数学原理是什么？L1 正则化和 L2 正则化之间有何区别？本文将给出直观的解释。

03

青少年编程：用Python探究数学（2）

在上一篇中，绘制了一个正方形，但是，其中要不断重复某些语句。幸亏是正方形，如果是更多边的图形，重复就更多了。在Python语言中，为了让重复的事情做起来不那么烦人，就设计了一种名字为for循环的循环语句。注意，for循环，只是循环语句中的一种。

03

PTA 1036 跟奥巴马一起编程 (15 分)

美国总统奥巴马不仅呼吁所有人都学习编程，甚至以身作则编写代码，成为美国历史上首位编写计算机代码的总统。2014 年底，为庆祝“计算机科学教育周”正式启动，奥巴马编写了很简单的计算机代码：在屏幕上画一个正方形。现在你也跟他一起画吧！

00

PTA 1036 跟奥巴马一起编程 (15 分)

美国总统奥巴马不仅呼吁所有人都学习编程，甚至以身作则编写代码，成为美国历史上首位编写计算机代码的总统。2014 年底，为庆祝“计算机科学教育周”正式启动，奥巴马编写了很简单的计算机代码：在屏幕上画一个正方形。现在你也跟他一起画吧！

01

跟奥巴马一起编程 C语言

美国总统奥巴马不仅呼吁所有人都学习编程，甚至以身作则编写代码，成为美国历史上首位编写计算机代码的总统。2014 年底，为庆祝“计算机科学教育周”正式启动，奥巴马编写了很简单的计算机代码：在屏幕上画一个正方形。现在你也跟他一起画吧！

02

canvas 快速入门

在本文中，我们将学习Canvas的特性，包括如何在HTML文档中引入Canvas以及在Canvas上绘制图形和各种对象。我们也将学习如何修改绘制在Canvas上的图形和对象，以及如何擦除它们。最后，将通过一个例子来学习如何将Canvas，尺寸设置为浏览器窗口的大小。

02

编程小白 | 每日一练（188）

这道理放在编程上也一并受用。在编程方面有着天赋异禀的人毕竟是少数，我们大多数人想要从编程小白进阶到高手，需要经历的是日积月累的学习，那么如何学习呢？当然是每天都练习一道题目！！

【PAT乙级】跟奥巴马一起编程

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

01

PAT（乙级）1036.跟奥巴马一起编程（15）

美国总统奥巴马不仅呼吁所有人都学习编程，甚至以身作则编写代码，成为美国历史上首位编写计算机代码的总统。2014 年底，为庆祝“计算机科学教育周”正式启动，奥巴马编写了很简单的计算机代码：在屏幕上画一个正方形。现在你也跟他一起画吧！

02

【Leetcode -463.岛屿的周长 - 476.数字的补码】

题目：给定一个 row x col 的二维网格地图 grid ，其中：grid[i][j] = 1 表示陆地， grid[i][j] = 0 表示水域。网格中的格子水平和垂直方向相连（对角线方向不相连）。整个网格被水完全包围，但其中恰好有一个岛屿（或者说，一个或多个表示陆地的格子相连组成的岛屿）。

01

【GPLT】L1-015 跟奥巴马一起画方块

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

00

1036 跟奥巴马一起编程 (15 分)

美国总统奥巴马不仅呼吁所有人都学习编程，甚至以身作则编写代码，成为美国历史上首位编写计算机代码的总统。2014 年底，为庆祝“计算机科学教育周”正式启动，奥巴马编写了很简单的计算机代码：在屏幕上画一个正方形。现在你也跟他一起画吧！

01

html5爱心代码_html爱心花瓣代码

今天小颖给大家分享一个用CSS画的爱心，底下有代码和制作过程，希望对大家有所帮助。

技术 | Python从零开始系列连载（二十三）

为了解答大家学习Python时遇到各种常见问题，小灯塔特地整理了一系列从零开始的入门到熟练的系列连载，每周五准时推出，欢迎大家学积极学习转载~

03

1036 跟奥巴马一起编程 (15 分)

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

02

海龟绘图简单科普(审核求过求过)

著名人物爱因斯坦曾说过，兴趣是最好的老师，句话在编程方面也同样适用。大部分人如果没有所谓的情节、入门、回报的话。相对于python，很多人对这一方面都是不感冒的，更不要谈一开始就要去背某些命令、函数之类的。虽然，python之简单被行内人士称为。。。。。但是乍一看一大坨代码任谁都是会有点发怵的。所以本节文章抛弃函数字典等概念，带大家来进行图形化的学习。提到python图形化处理，就必须要提到一个模块—海龟绘图(turtle)

04

KTurtle编程使用入门

KTurtle 是一个KDE开发的 Turtle Graphics(海龟绘图法) 教育编程环境，通过控制海龟的行进，在屏幕上绘制出相应图案的技术。它是根据开源的 GNU通用公共许可证发布。它可以让孩子通过可视化方式学会基本的编程思维，并掌握一定的数学、几何等知识。它的结构非常简单，非常适合儿童学习。

03

PAT (Basic Level) Practice （中文）1036 跟奥巴马一起编程 (15 分)

美国总统奥巴马不仅呼吁所有人都学习编程，甚至以身作则编写代码，成为美国历史上首位编写计算机代码的总统。2014 年底，为庆祝“计算机科学教育周”正式启动，奥巴马编写了很简单的计算机代码：在屏幕上画一个正方形。现在你也跟他一起画吧！

03

Python之turtle模块初体验

前面已经炫过别人用turtle这个包画的小猪佩奇了。接下来我们正式开始学习这个神奇的模块。后面我们可以自己试着画一些有意思的东西。

02

力扣刷题之有效的正方形（每日一题7/29）

这是基本的要求。其实呢！提示我也没有去用，因为我采用的是完全的纯数学计算，用到了坐标的特点。比较暴力，代码快大，但是效率就是高。

01

PTA题解 ---跟奥巴马一起画方块

为了画出这样的正方形，我们可以编写一个C语言程序，根据输入的边长N和字符C来打印正方形。由于行间距比列间距大，输出的行数是列数的50%（四舍五入取整）。下面是实现这一功能的代码：

01

用计算机制作flash动画教案,Flash动画制作教案

以下是出国留学网小编整理的高中信息技术《Flash动画制作》教案，供大家浏览参考。更多相关内容请关注出国留学网教案栏目。

02

第142天：Size Marks下载安装和使用方法

1、下载Size marks：链接: https://pan.baidu.com/s/1breyMf1 密码: fjsn

03

程序员面试金典 - 面试题 16.13. 平分正方形（数学）

给定两个正方形及一个二维平面。请找出将这两个正方形分割成两半的一条直线。假设正方形顶边和底边与 x 轴平行。

02

Facebook Surround360 学习笔记--（2）算法原理

本文介绍了Surround 360开源全景拍摄和拼接软件，它通过使用17台相机同时拍摄，并利用其独特的算法将拍摄到的图片合成为一张完整的全景图。该软件具有高速处理、高精度的特点，能够生成高质量的3D全景图，使用户能够体验到身临其境的感觉。同时，该软件的源代码已经上传到GitHub上，供用户自由使用和研究。"

07

少博士趣学Python - 绘制有趣图形

另外，也可以使用官方的编辑器 IDLE https://www.python.org/downloads/

02

组和分组卷积

考虑一个正方形。它是对称的吗？它是如何对称的？它有多少对称性？它有什么样的对称性？

CSS画出一个爱心的案例

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>css画桃心</title> <style media="screen"> .heart-body { width: 200px; margin: 200px auto; position: relative; }

04

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭