用html+css画一个正方形 4条线从左到右从上到下跑动

好的，下面是用 HTML 和 CSS 画一个正方形，然后让其四条边从左到右、从上到下跑动的代码：

HTML：

<div class="square"></div>

CSS：

.square {
  width: 100px;
  height: 100px;
  border: 2px solid black;
  position: relative;
  animation: move 3s linear infinite;
}

@keyframes move {
  0% { top: 0; left: 0; }
  25% { top: 0; left: 100px; }
  50% { top: 100px; left: 100px; }
  75% { top: 100px; left: 0; }
  100% { top: 0; left: 0; }
}

这段代码会生成一个边长为 100px 的正方形，四条边由粗黑线构成，然后应用了一个名为“move”的动画，通过改变 top 和 left 的值来让其从左到右、从上到下地跑动。

相关问题

用html+css画一个正方形 4条线从左到右从上到下跑动 要求：是边框跑动 盒子不动

好的，以下是用HTML和CSS做一个滚动边框的正方形的代码：

<div class="square">
  <div class="border top"></div>
  <div class="border right"></div>
  <div class="border bottom"></div>
  <div class="border left"></div>
</div>

.square {
  width: 200px;
  height: 200px;
  position: relative;
  overflow: hidden;
}

.border {
  position: absolute;
  border: 2px solid black;
}

.top {
  top: 0;
  left: -200px;
  width: 0;
  height: 0;
  border-top: none;
  border-right: none;
}

.right {
  top: -200px;
  right: 0;
  width: 0;
  height: 0;
  border-right: none;
  border-bottom: none;
}

.bottom {
  bottom: 0;
  right: -200px;
  width: 0;
  height: 0;
  border-bottom: none;
  border-left: none;
}

.left {
  bottom: -200px;
  left: 0;
  width: 0;
  height: 0;
  border-left: none;
  border-top: none;
}

.border.anim {
  animation: scroll 2s linear infinite;
}

@keyframes scroll {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(200px, 0);
  }
  50% {
    transform: translate(200px, 200px);
  }
  75% {
    transform: translate(0, 200px);
  }
  100% {
    transform: translate(0, 0);
  }
}

.top.anim {
  animation-delay: 0s;
}

.right.anim {
  animation-delay: 0.5s;
}

.bottom.anim {
  animation-delay: 1s;
}

.left.anim {
  animation-delay: 1.5s;
}

在这段代码中，我们用一个`div`元素作为正方形的容器，并设置其`position`属性为`relative`，并设置`overflow`属性为`hidden`以防止边框滚动时跑出容器范围。然后，我们用`div`元素作为边框，并分别设置其`position`属性为`absolute`，以及四个方向上的位置和边框样式。我们将四条边框的宽度和高度都设置为0，以便用CSS的`transform`属性控制其滚动。最后，我们使用CSS的`animation`属性将四条边框分别进行滚动动画，并使用不同的`animation-delay`属性来使其错开滚动。

css写一个按钮移动移出从左到右的渐变背景动画

可以使用CSS3的transition和linear-gradient属性实现一个从左到右的渐变背景动画，以下是示例代码：

HTML代码：

<button class="gradient-btn">按钮</button>

CSS代码：

.gradient-btn {
  background-image: linear-gradient(to right, #f9d423, #ff4e50);
  background-size: 200% auto;
  transition: all 0.5s ease-out;
}

.gradient-btn:hover {
  background-position: right center;
}

解释：

* `background-image: linear-gradient(to right, #f9d423, #ff4e50);` 设置按钮的背景为从左到右的渐变色，使用了CSS3的linear-gradient属性。
* `background-size: 200% auto;` 设置背景大小为原来的两倍，这样在移动时可以展示整个渐变过程。
* `transition: all 0.5s ease-out;` 设置按钮的所有属性在0.5秒内平滑过渡，使用了CSS3的transition属性。
* `.gradient-btn:hover { background-position: right center; }` 设置鼠标移入时背景位置从左边移到右边，这里使用了CSS3的:hover伪类。

效果如下：