Question

我正在尝试制作一个切换按钮，当切换打开和关闭时显示不同的字母。然而，这些字母不会随着我添加的css动画淡入淡出。

这是codepen。我想制作一个＆＃39; A＆＃39;淡出和＆＃39; Z＆＃39;在切换时淡入，反之亦然。

.bubble:after {
    content: 'A';
    position: absolute;
    top: 50%;
    margin-top: -15px;
    margin-left: -2px;

    left: 50%;
    border-radius: 2px;
    opacity: 0;
    animation:fadeIn ease-in 1;
    animation-fill-mode:forwards;
    animation-duration:1s;
}

#bubble:checked + .bubble:after {
    content: 'Z';
    position: absolute;
    top: 50%;
    margin-top: -15px;
    margin-left: -2px;
    left: 50%;
    border-radius: 2px;
    opacity: 0;
    animation:fadeIn ease-in 1;
    animation-fill-mode:forwards;
    animation-duration:1s;
}

@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

我最初的目标是得到像this这样没有libary依赖的东西，但我不知道如何在按钮手柄覆盖图标时更改图标的颜色。任何实施的想法也将受到赞赏。

Answer 1

我为<?xml version="1.0"?> <xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema"> <xs:element name="A"> <xs:complexType> <xs:all> <xs:element name="B" minOccurs="0" maxOccurs="unbounded" type="xs:string"/> <xs:element name="C" minOccurs="0" maxOccurs="1" type="xs:string"/> </xs:all> </xs:complexType> </xs:element> </xs:schema>添加了颜色：

.bubble

然后，我将颜色变化添加到这样的切换动画中：

.bubble{    /* label, 움직인 후 bubble 최종 shape */
  position:absolute;
  z-index:2;
  top:50%;
  left:50%;
  height:100px;
  width:100px;
  color: white;
  transform:translate3d(-75%,-50%,0);
  margin-left:-50px;
  background:#BBBBBB;
  border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
  border-right: 0px solid #BBBBBB;
  border-left: 0px solid #BBBBBB;
  animation: toggle-reverse 1s 1;  /* 오른쪽에서 왼쪽 */
}

.bubble:after {
  content: 'A';
  position: absolute;
  top: 50%;
  margin-top: -15px;
  margin-left: -2px;
  left: 50%;
  border-radius: 2px;
  opacity: 1;
  color: inherit;
}

#bubble:checked + .bubble{ /* input 이 check 된 상태 에서 그 다음의 bubble 즉 label */
  animation: toggle 1s 1;  /* 왼쪽 에서 오른쪽 */
  transform:translate3d(6%,-50%,0); 
  background: #3CCC97;   
}

#bubble:checked + .bubble:after {
  content: 'Z';
  position: absolute;
  opacity: 1;
}

当切换打开和关闭时，CSS淡入和淡出不同的字母

1 个答案: