Question

我想在我网站的右上角添加一个菜单按钮 - 只是一个带图标的简单圆圈。我想以一定的高度和宽度加载，然后稍后自动缩小到另一个高度和宽度 - 所有这些都没有任何用户交互。

这可能吗？

那里有任何CSS专家吗？

非常感谢，

Answer 1

您可以使用 CSS3动画 进行此操作：

＆＃13;

div {
  width: 50px;
  height: 50px;
  background: #00f;
  border-radius: 50%;
  animation-name: shrink; /* "calling" the animation */
  animation-duration: 1s; /* adjust */
  animation-timing-function: linear; /* specifies the speed curve of an animation / also try other values */
  animation-delay: 3s; /* adjust */
  animation-fill-mode: forwards; /* retains in the state set by the last keyframe */
}

@keyframes shrink { /* let's call it "shrink" */
  0%   {width: 50px; height: 50px}
  100% {width: 25px; height: 25px} /* final state */
}

＆＃13;

<div><div>

＆＃13;

尝试并根据您的需求进行调整。

注意：还有其他动画属性＆amp;这些值可以让你仔细看看你能做些什么。

无需交互即可自动缩小按钮

1 个答案: