css 上下设置垂直对齐按钮的动画

whlutmcx 于 2023-04-08 发布在其他

关注(0)|答案(1)|浏览(140)

我有一个垂直对齐的按钮，需要动画到顶部（即使是一点点也可以），然后回到原来的位置。
Codepen：https://jsfiddle.net/ay53dfn2/5/
我已经看到一些例子，动画按钮时，它是水平的，但它没有任何效果时，我使按钮垂直

.test {
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  transform-origin: bottom right;
}

<button class="test">Click</button>

css

来源：https://stackoverflow.com/questions/75937710/animate-a-vertical-aligned-button-up-and-down

1条答案

按热度按时间

nnsrf1az1#

像这样的吗

.test {
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  transform-origin: bottom right;
}

.test:focus {
  animation-name: move;
  animation-duration: 1s;
  animation-iteration-count: 1
  color: red;
}

@keyframes move {
  from {
    transform: scale(1);
    opacity: 1;
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    transform-origin: bottom right;
  }
  50% {
    transform: scale(0.75);
    opacity: 0.25;
  }
  to {
    transform: scale(1);
    opacity: 1;
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    transform-origin: bottom right;
  }
}

<button class="test" onclick="this.classList.add('clicked')">Click</button>

赞(0）回复(0）举报 2023-04-08

我来回答

css 上下设置垂直对齐按钮的动画

1条答案

相关问题

热门标签

最新问答