Css按钮动画问题

2022-01-28 06:18:12 标签 htmlcss

我有一个这样的切换:

如果我点击这个,它会从左到右,它会从左到右,但我想从左到右,不重复

这是我的代码:

.main-toggle {
  border-radius: 30px;
  width: 200px;
  height: 50px;
  border: none;
  background-color: grey;
}
.sub-toggle {
  position: absolute;
  left: 15px;
  border-radius: 30px;
  width: 50px;
  height: 40px;
  border: none;
  top: 13px;
  background-color: black;
}
.sub-toggle:focus {
  -webkit-animation-name: run;
  -webkit-animation-duration: 1s;
}
@keyframes run {
  50% {
    left: 20%;
  }
<button class="main-toggle">
  <button class="sub-toggle"></button>
</button>

###你可以使用过渡代替动画。此外,你不应该筑巢button tags - use a div instead for the outer toggle.

标签-使用div instead for t而不是外部的开关。

工作的例子:

.main-toggle {
  position: relative;
  border-radius: 30px;
  width: 200px;
  height: 50px;
  border: none;
  background-color: grey;
}
.sub-toggle {
  position: absolute;
  left: 15px;
  border-radius: 30px;
  width: 50px;
  height: 40px;
  border: none;
  top: 5px;
  background-color: black;
  transition: left 1s;
}
.sub-toggle:focus {
  left: 135px;
}
<div class="main-toggle">
  <button class="sub-toggle"></button>
</div>

继续添加-webkit-animation-fill-mode: forwards to your focus class. R去你的重点课堂。在这里阅读更多关于填充模式的内容。还有一些其他的过渡属性和MDN已经为他们做了一些出色的演示。看看这里…

阅读全文

▼ 版权说明

相关文章也很精彩
推荐内容
更多标签
相关热门
全站排行
随便看看

错说 cuoshuo.com —— 程序员的报错记录

部分内容根据CC版权协议转载;网站内容仅供参考,生产环境使用务必查阅官方文档

辽ICP备19011660号-5

×

扫码关注公众号:职场神器
发送: 1
获取永久解锁本站全部文章的验证码