主页 / 问题 / 1580496
Accepted
axmed2004
Asked:2024-05-16 18:27:02 +0000 UTC2024-05-16 18:27:02 +0000 UTC

带有等待动画的复选框开关

  • 772

开关处的边框动画不会随着位置的变化而起作用。禁用时， animation: rotation 1s linear infinite;滑块会移动

@keyframes rotation {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    } 

    input{
        position: relative;
        -webkit-appearance:none;
        width: 60px;
        height: 6px;
        background: #e4e4e4;
        border-radius: 5px;
        cursor: pointer;

    }

    input:before{
        content: "";
        position: absolute;
        top:-12px;
        left:0;
        width: 30px;
        height: 30px;
        background:#ccc;
        border-radius: 50%;
        transition: 0.5s;
        border:1px solid #ccc;
    }

    input:checked:before{
        transform: translateX(30px);
        background:#ffbd45;
        border: 1px solid #ffbd45;
        border-bottom-color: #FF3D00;
        //animation: rotation 1s linear infinite;
    }

    input.c1:checked:after{
        width:0;
        border-radius: 10px;
        left:20%;
        transform: translate(30px,-50%);
    }
<input type="checkbox">

html

2 个回答

  1. 如果你想让动画播放的同时移动滑块，那么你需要添加滑块的最终位置

    input:checked:before{
        transform: translateX(30px);
        background:#ffbd45;
        border: 1px solid #ffbd45;
        border-bottom-color: #FF3D00;
        animation: rotation 1s linear infinite;
        left:100%; /*вот это*/
    }

    并且不要忘记注释是用 CSS 设计的/*code*/

    • 1
  2. Best Answer

    问题是您覆盖了动画中的transform属性的值，但是您需要以相同的顺序指定应用于元素的整个转换集，同时仅更改必要的值。

    幸运的是，最近独立管理转换已经成为可能：

    @keyframes rotation { to { rotate: 1turn; } }

input {
  -webkit-appearance: none;appearance: none;
  position: relative;
  height: 6px;
  width: 60px;
  background: #e4e4e4;
  border-radius: 5px;
  cursor: pointer;
}

input::before {
  content: '';
  position: absolute;
  top: -12px;
  left: 0;
  height: 30px;
  width: 30px;
  border: 1px solid #ccc;
  border-radius: 50%;
  background: #ccc;
  transition: 0.5s;
}

input:checked::before {
  border: 1px solid #ffbd45;
  border-bottom-color: #FF3D00;
  translate: 30px;
  background: #ffbd45;
  animation: rotation 1s linear infinite;
}
    <input type="checkbox">

    • 1

相关问题