开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

我如何在垂直堆栈中画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属性，每秒钟正方形在垂直方向上来回移动。可以根据需要调整容器和正方形的样式。

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

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

有帮助

没帮助

相关·内容

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

移动工具案例1：用如下图层构造成一个自行车 2. 分布和对齐案例2：画双11图像案例3：电视案例 1....移动工具作用：可以移动图层，在图层面板中，选中要移动的图层，用移动工具拖动复制图层：选中要复制的图层，在使用移动工具时，按住alt键拖动鼠标，完成复制自动选择：勾选后，可以通过点击图像，直接定位到锁电机图像所在的图层...选中图层对图层居中对齐分布：三个以上的图层可以进行分布（排列的距离）先选中需要对齐、分布的图层或图层组，使用移动工具，在属性栏上，点对应的分布及对齐按钮案例2：画双11图像先把前景色调为白色...，背景色调为红色，选中矩形工具，固定大小为40px，Alt+Del 扣出一个正方形为40px的白色正方形，再使用移动工具选中小方块同时按住alt键和shift键拖拽出七八个正方形，如图： ?...也可以使用图层分组，快捷键：Ctrl+G，如： ?

1.4K2 0

MFC绘图小实验(1)

视区中x轴水平向右为正，y轴垂直向上为正，原点位于屏幕客户区中心。...然后使用GetPixel()函数依次读出该正方形内各像素点的颜色，在x轴正向的对称位置上重新绘制该正方形。...crColor，并在x轴正向的对称位置上绘制该正方形*/ for(y=-50;y<50;y++) for(x=-150;x<-50;x++) {...(&NewPen); //调用CDC类的SelectObject()成员函数将新画笔选入设备上下文，同时用pOldPen指针保存原画笔指针 pDC->MoveTo(p0); //将当前位置移动到直线段起点...2，如果不适用透明画刷，按照先画圆，后画椭圆、矩形的顺序绘制，因为图形使用默认的白色画刷填充，绘制结果只有矩形，圆和椭圆会被遮挡。 ?

1.7K6 1

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

大家好，又见面了，我是你们的朋友全栈君。...1、基本功能介绍在海龟作图中，我们可以编写指令让一个虚拟的(想象中的)海龟在屏幕上来回移动。这个海龟带着一只钢笔，我们可以让海龟无论移动到哪都使用这只钢笔来绘制线条。...通过编写代码，以各种很酷的模式移动海龟，我们可以绘制出令人惊奇的图片。使用海龟作图，我们不仅能够只用几行代码就创建出令人印象深刻的视觉效果，而且还可以跟随海龟看看每行代码如何影响到它的移动。...1.1 Turtle motion (运动控制) 本节中包含了运动控制中常用的一些函数 turtle.goto(x,y) 画笔定位到坐标(x,y) turtle.forward(distance) 向正方向运动...首先画一个边长为100的正方形，然后再以半径为50画出其3/4圆。

1.7K1 0

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

注意，forward()是我们从turtle小龟模块中引入函数中的其中一个。使小龟移动： foreward(100) 这里，括号中的100表示小龟移动的步数。...使用for循环画正方形上面的练习1-1中，你面临的挑战是使用forward()和right()画正方形。完成这个任务，你不得不重复forward(100)和right(90)四次。...恭喜你，你使用for循环画出了正方形。创建自定义函数我们写了画正方形的代码，我们可以使用个小魔术将代码保存起来，以后需要画正方形的时候随时调用。...练习1-2：正方形组成的圆。写程序，这个程序将画60个正方形，每画一个正方形后右转5度。程序中要使用循环语句。运行结果如图： ?...变量与数学函数表达式中的x相似。数学中的变量名字是一个字母，编程中你可以给变量取任何名字。类似与函数，我建议你的变量名称应该是有意义的，便于记忆和理解。

4K5 1

Canvas 奇妙历险（一）

阅读完本篇文章，我期望你对Canvas的基础API有一定的认识，在此基础上，结合自身情况做一些例子去巩固，不是一件蛮开心的事吗？前期工作前期工作中，介绍了canvas是什么，能够干什么？...) 搞特效：常用变换 ctx.transform(a, b, c, d, e, f) a 表示水平缩放. b 表示水平倾斜. c 表示垂直倾斜. d 表示垂直缩放. e 表示水平移动. f 表示垂直移动...那，刚开始我们去尝试练习下一些线性描点连线，这里的话我想到的是一个房子，它的实现过程如下，其实你只要记住一点，把二维坐标系的点位搞对，图像自然不是什么大问题，我这边没有精确的计算过，用眼睛瞄了下，画的矬别打我...我是不会画一群鸟在剩下的地方飞的，画需要留白的艺术，最后的话，美术老师会让我们在画上写上名字。...一个正方形好了，有四个顶点，那你至少是设置一个顶点是moveTo(x, y), 剩下的三个依据顺时针或者逆时针的顺序，去构成一个正方形，但是当你用stroke画的时候，它默认是不闭合的，就是说你还需要补一刀在它的起点处

8912 0

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

大家好，又见面了，我是你们的朋友全栈君。以下是出国留学网小编整理的高中信息技术《Flash动画制作》教案，供大家浏览参考。更多相关内容请关注出国留学网教案栏目。...选择矩形绘图工具，调整好边框及填充颜色，按住Shift键绘制正方形。 2. 使用线条工具，按住Shift键绘制正方形的两条对角线。参照书本p84图绘制其余线条，可画辅助线。...(注：移动过程中避免色块的重叠) 四：构建运动造型使用绘制完成的七巧板，构建运动造型。借助箭头工具来移动，定位板块。使用任意变形工具旋转板块。使用菜单命令进行水平及垂直翻转。...绘制七巧板的过程中，绘制直线时，直线与直线没有正确相交，出现相邻板块同色问题，经指导修改完成。...2：熟悉FLASH制作中的几个关键性的概念：图层、时间轴、帧等。 3：熟悉FLASH制作中的两种重要动画形式：形状渐变动画和运动渐变动画。

1K2 0

【编程课堂】海龟作图

1、基本功能介绍在海龟作图中，我们可以编写指令让一个虚拟的（想象中的）海龟在屏幕上来回移动。这个海龟带着一只钢笔，我们可以让海龟无论移动到哪都使用这只钢笔来绘制线条。...通过编写代码，以各种很酷的模式移动海龟，我们可以绘制出令人惊奇的图片。使用海龟作图，我们不仅能够只用几行代码就创建出令人印象深刻的视觉效果，而且还可以跟随海龟看看每行代码如何影响到它的移动。...1.1 Turtle motion （运动控制）本节中包含了运动控制中常用的一些函数 turtle.goto(x,y) 画笔定位到坐标(x,y) turtle.forward(distance) 向正方向运动...首先画一个边长为100的正方形，然后再以半径为50画出其3/4圆。...turtle.forward(100) turtle.left(90) 360 个正方形每隔 1 度排列，短短几行代码可以生成一个漂亮规则的图形。

3K7 1

Python 绘图魔法：用turtle库开启你的编程艺术之旅

2.1 正方形绘制要绘制正方形，肯定需要知道正方形的图形，相信大家对于这个肯定是没有问题的，拥有4条相同的边且4个角都为直角。...这也就是绘制正方形的关键，因为turtle是模拟一只海龟的的移动，只要让海龟的移动轨迹满足条件就可以了。...import turtle #导包 t = turtle.Turtle()#先创建对象 turtle.title('我是一个正方形哦~')# 为画布添加标题（可不写） for _ in range(4...难道在turtle中绘制圆，只能这样绘制正多边形吗，也不是，下一个图形就圆的绘制了。 2.3 同心圆的绘制绘制同心圆前，圆的绘制还是要知道的。...就像下面的五角星，你知道五角星怎么画吗？其实和正多边形没什么区别，找到角度就可以了。

1191 0

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

下面，我用一张图来说明如何在限定条件下，对 Ein 进行最小化的优化。如上图所示，蓝色椭圆区域是最小化 Ein 区域，红色圆圈是 w 的限定条件区域。...运动过程中，根据向量知识，只要 -∇Ein 与运行方向有夹角，不垂直，则表明 -∇Ein 仍会在 w 切线方向上产生分量，那么 w 就会继续运动，寻找下一步最优解。...，直接在原来的损失函数基础上加上权重参数的绝对值： L=Ein+λ∑j|wj| L = E i n + λ ∑ j | w j | L=E_{in}+\lambda\sum_j|w_j| 我仍然用一张图来说明如何在...Ein 优化算法不变，L1 正则化限定了 w 的有效区域是一个正方形，且满足 |w| 移动。...但是，w 不能离开红色正方形区域，最多只能位于正方形边缘位置。其推导过程与 L2 类似，此处不再赘述。 3.

1.4K3 0

R语言绘图001-基础参数

arrows(x0, y0,x1, y1, angle= 30,code=2)同上但加画箭头,如果code=2则在各(x0,y0)处画箭头,如果code=1则在各(x1,y1)处画箭头,如果code=...3则在两端都画箭头; angle控制箭头轴到箭头边的角度 abline(a,b)绘制斜率为b和截距为a的直线，abline(h=y)在纵坐标y处画水平线，abline(v=x)在横坐标x处画垂直线，abline...[0; 1]范围中（有些图形设备中也可以超出此范围），表示字符串以左下角为基准、根据自身的宽度和高度分别向左和向下移动的比例，默认为c(0.5, 0.5)。...例如c(0, 0)表示整个字符（串）的左下角对准设定的坐标点，而c(1, 0)则表示字符串横向移动了自身宽度的距离，而纵向不受影响。...；'o')同时画点和线，且相互重叠，这是它与type = 'b'的区别；'h')画铅垂线；'s') 画阶梯线，从一点到下一点时，先画水平线，再画垂直线；'S')也是画阶梯线，但从一点到下一点是先画垂直线

2.2K2 0

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

下面，我用一张图来说明如何在限定条件下，对 Ein 进行最小化的优化。 ? 如上图所示，蓝色椭圆区域是最小化 Ein 区域，红色圆圈是 w 的限定条件区域。...运动过程中，根据向量知识，只要 -∇Ein 与运行方向有夹角，不垂直，则表明 -∇Ein 仍会在 w 切线方向上产生分量，那么 w 就会继续运动，寻找下一步最优解。...正则化直观解释 L1 正则化公式也很简单，直接在原来的损失函数基础上加上权重参数的绝对值： L=Ein+λ∑j|wj|L=Ein+λ∑j|wj| L=E_{in}+\lambda\sum_j|w_j| 我仍然用一张图来说明如何在...Ein 优化算法不变，L1 正则化限定了 w 的有效区域是一个正方形，且满足 |w| 移动。...但是，w 不能离开红色正方形区域，最多只能位于正方形边缘位置。其推导过程与 L2 类似，此处不再赘述。 3.

4.2K1 0

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

原文：Creating a Star to Heart Animation with SVG and Vanilla JavaScript 译者：nzbin 在我上一篇文章中, 我讲解了如何使用纯...几何图形端点和控制点的初始状态的坐标用于画星星，结束状态的坐标用于画心形。每个坐标的范围是它的结束值与其初始值之间的差值。...在将这些坐标保存到数组的过程中，外圆的点（偶数点情况下）被保存了两次，因为实际上这两个控制点是重叠的（这种情况只针对星形），所以我们需要把这些重叠点移动到不同的位置以获得心形。...正方形 TAkBkS 的所有点坐标(live). 我们还可以知道的一点是，因为 TAkBkS 是正方形， AkBk 平行于 TS，TS 位于 y (垂直) 轴，因此线段 AkBk 是垂直的。...已知 TAk 是水平的，又因为正方形对角线垂直，所以线段 OkDk 是垂直的。所以 Ok 和 Dk 点的 x 坐标相等，我们已经计算过 Ok 点坐标是 ±R/√2 。

4.8K5 1

canvas 快速入门

canvas 快速入门在本文中，我们将学习Canvas的特性，包括如何在HTML文档中引入Canvas以及在Canvas上绘制图形和各种对象。...向右移动时，x坐标值会增加，向下移动时，y坐标值会增加。如果你想把图形绘制到正确的位置上，一定要理解这个坐标系统。...我绝对没有说谎。让我们马上修改本文开头所创建的正方形的颜色。...在前一个例子中，我们赋值了一个“rgb(红、绿、蓝)”颜色值，但是你也可以使用任何有效的 CSS 颜色值，如十六进制码（例如，#FF0000)或单词“red”。...在我们的例子中，我们将准备擦除的区域的原点（左上角）移动到正方形的左上角(40, 40)，并将准备擦除的区域的宽度和高度设置为正方形的宽度和高度（100）。其结果是只将正方形所在的特定区域清除。

1.7K2 0

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

每个人的感官可能都不一样，但对于我来说，调整尺寸后的两个图形看起来才是一样大的，至少也不会像图一一样，让人第一眼就认为正方形比较大。为什么会这样?因为我将圆的直径增加了 50px。 ?...说完了水平居中，垂直居中也有非常多的细节要注意。...这里告诉大家一个东西，对于大部分操作系统而言或者说较为成熟的设计语言而言，垂直居中必定以按钮文字的首一位大写字母的高度开始算起，但在 Sketch 中，所有的文字都会默认地带上行距，所以在制作文字按钮时...，无论是中文还是英文，一定要注意调整行距，这样才能做到你所需要的垂直居中。...好吧，希望你能够看出来左边那颗按钮是有问题的，实际上我在画这枚按钮的时候确实点了对齐，但是为什么还会出问题呢?跟文字按钮对齐一样，对齐的方式选错了。

1.3K1 0

CSS基础（二）

伪元素在网页中无法通过鼠标直接复制粘贴。....one::before{ content: '我'; display: inline-block; width: 100px;...方向属性名属性值含义水平 left 数字+px 距离左边的距离水平 right 数字+px 距离右边的距离垂直 top 数字+px 距离上边的距离垂直 bottom 数字+px 距离下边的距离...（圆角半径）赋值规则：从左上角顺时针开始赋值，没有赋值的看对角应用：正圆：盒子必须是正方形...属性：border-collapse:collapse; （给table标签加）八、CSS画三角形书写一个盒子 (宽高都为0)

1.8K2 0

photoshop 选框和套索工具

选框和套索工具介绍上一篇文章photoshop常用图片处理技巧中，我大概介绍了一些基本概念。本篇章就是再细化讲解一下。...简单来说套索工具就是多种用来画蚂蚁线的工具，结合起来就是有分选框工具和套索工具。我用photoshop CC 2019截图示例如下：选框工具： ? 套索工具： ?...这个矩形是随便大概框出来的，那么能否画出一个很好的正方形呢？按住Shift键，绘画正方形 ?...上图看出可以画出比较好的正方形了，但是有些时候需要画很精确的大小，靠一点点移动很好确定，能否输入宽高来绘画具体矩形呢？...但是，如果在绘画过程，能否移动一下图片呢？在绘画过程，按空格键就可以移动图片点击空格之后，鼠标就会变成小手，使用小手就可以拖动图片。因为截图工具无法截取鼠标的样子，这里就无法提供截图了。

9702 0

R语言画图时常见问题

大家好，又见面了，我是你们的朋友全栈君。 1 如何在同一画面画出多张图？...R中的绘图命令可以分为高水平（High level）、低水平（Low level）和交互式（Interactive）三种绘图命令。...简要地说，高水平绘图命令可以在图形设备上绘制新图；低水平绘图命令将在已经存在图形上添加更多的绘图信息，如点、线、多边形等；使用交互式绘图命令创建的绘图，可以使用如鼠标这类的定点装置来添加或提取绘图信息。...12画图时的参数 axis()：las设置坐标轴标签的方式（水平，垂直……）。 mtext()：为四个坐标轴添加标签。 text()：在给定坐标的位置写字。...type设置画图的类型（type=”n”表示不画数据）；axes设置是否画坐标轴。常用的参数还有：xlim和ylim，xaxt和yaxt。

4.7K2 0

【python自动化】Playwright基础教程(八)鼠标操作

「官方示列」 # 使用` page.mouse` 画一个100x100的正方形。...# 鼠标移动到（0,0）坐标 page.mouse.move(0, 0) # 按下鼠标 page.mouse.down() # 鼠标纵坐标向下移动100像素 page.mouse.move(0, 100...) # 鼠标横坐标向右移动100像素 page.mouse.move(100, 100) # 鼠标纵坐标向上移动100像素 page.mouse.move(100, 0) # 鼠标横坐标向左移动100像素...page.mouse.move(0, 0) # 释放鼠标 page.mouse.up() 「鼠标运行轨迹图」「实操」打开在线画图：https://draw.yunser.com/，根据官网的示列画一个正方形...wheel模拟鼠标滚动「使用方法」 mouse.wheel(delta_x, delta_y) 「参数」参数类型释义 delta_x float 要水平滚动的像素 delta_y float 要垂直滚动的像素

2.4K2 0

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

/replit.com 2. thonny 简单使用在 thonny 编辑下方shell窗口输入数学表达式，可以进行数学计算 print 函数可以打印输出字符串到屏幕打印10次我要学...缩进数量一样的代码称为一组代码块代码中的 i 是变量，可以存储数据让我们做一个练习吧，画出一个正方形，旋转 6 度后，接着画同样大小的正方形，重复60次 import turtle pen =...turtle.Pen() for i in range(60): # 画60个正方形 for j in range(4): # 画一个正方形的代码块，画4条边 pen.forward...(100) # 向前走100 pen.right(90) # 向右转90度 pen.right(6) # 画完了一个正方形，笔旋向右转6度我们可以调整上面程序里面的数字，看看能画出什么漂亮的图形...] # 循环使用这3种颜色 for i in range(100): # 画100次 pen.circle(5*i) # 圆的半径不断变大 pen.forward(i) # 画完了，笔会往前移动

6382 0

吐血整理：24种可视化图表优缺点对比，一图看懂！

我已经对《这份指南》进行了调整，使之与“交谈-画草图-创建原型”的框架相适应。至于我是怎样调整的，请参见下图。 01 2×2矩阵也叫矩阵，水平和垂直平分的方框，形成了四个象限。...优点：针对元素分类和“区域”创建的易于使用的组织原则缺点：在不同的空间间隔绘制象限内的项，暗示两者可能不存在统计关系 02 冲积图也称为流图，显示值怎样从一个点移动到另一个点的节点和流。...常用来比较同一指标下的不同群体，如10位不同CEO的薪酬。（当条形图垂直时也称为柱状图。）...通常用于描绘决策，数据如何在系统中移动，或者人们如何与系统交互，例如用户在网上购买产品的过程。（也称为决策树，它是流程图的一种类型。）...优点：显示详细比例分解的紧凑形式；克服了饼形图的许多楔形块的限制缺点：以细节为导向的形式，不适合快速理解；太多的类别会造成令人震惊但难以解析的视觉效果；通常需要能够精确排列正方形的软件 24 单位图

4.9K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭