CSS上下切换时淡入和淡出不同的字母

好的

我正在尝试制作一个切换按钮,该按钮在打开和关闭时显示不同的字母。但是,这些字母不会随我添加的CSS动画淡入淡出。

这是codepen我要使“ A”淡出,而使“ Z”淡入,反之亦然。

.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; } }

我最初的目标是要达到这样的这种不libary依赖关系,但我不知道如何改变图标的颜色时,才由按钮手柄覆盖。任何实现的想法也将被赞赏。

诺拉

我将颜色添加到.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;
}

然后,我将颜色更改添加到切换动画中,如下所示:

@keyframes toggle {
  0%   {
  transform:translate3d(-75%,-50%,0);
  border-right: 0 solid #BBBBBB;
  border-left: 0 solid #BBBBBB;
  background:#BBBBBB;
  border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
  height: 100px;
  color: #BBBBBB;
  }
  20% {
  border-right: 0 solid #BBBBBB;
  border-left: 0 solid #BBBBBB;
  border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
  transform:translate3d(-75%,-50%,0);
  height: 100px;
  } 
  40%  {
  border-left: 0 solid #BBBBBB;
  border-radius: 35% 65% 65% 35% / 50% 50% 50% 50%;
  height: 90px;
  }
  50%  {
  transform:translate3d(-30%,-50%,0);
  border-right: 25px solid #BBBBBB;
  border-left: 0 solid #BBBBBB;
  background:#BBBBBB;
  border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
  height: 90px; 
  color: #BBBBBB;  
  }
  75%  {
  border-left: 25px solid #3CCC97;
  border-color:#3CCC97;
  background: #3CCC97;
  border-radius: 65% 35% 35% 65% / 50% 50% 50% 50%;
  height: 90px;
  color: #3CCC97;
  }
  100% {
  border-right: 0 solid #3CCC97;
  border-left: 0 solid #3CCC97;
  border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
  transform:translate3d(6%,-50%,0);
  height: 100px;
  width:100px;
  color: white;
  }
}


@keyframes toggle-reverse {
  0%   {
  transform:translate3d(6%,-50%,0);
  background: #3CCC97;
  border-right: 0 solid #3CCC97;
  border-left: 0 solid #3CCC97;
  border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
  height: 100px;
  color: #3CCC97;
  }
  20% {
  border-right: 0 solid #3CCC97;
  border-left: 0 solid #3CCC97;
  border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
  transform:translate3d(6%,-50%,0);
  height: 100px;
  } 
  40%  {
  border-right: 0 solid #3CCC97;
  border-radius: 65% 35% 35% 65% / 50% 50% 50% 50%;
  height: 90px;
  }
  50%  {
  transform:translate3d(-30%,-50%,0);
  border-left: 25px solid #3CCC97;
  border-right: 0 solid #3CCC97;
  background: #3CCC97;
  border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
  height: 90px;  
  color: #3CCC97; 
  }
  75%  {
  border-right: 25px solid #BBBBBB;
  border-color:#BBBBBB;
  background:#BBBBBB;
  border-radius: 35% 65% 65% 35% / 50% 50% 50% 50%;
  height: 90px;
  color: #BBBBBB; 
  }
  100% {
  border-right: 0 solid #BBBBBB;
  border-left: 0 solid #BBBBBB;
  border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
  transform:translate3d(-75%,-50%,0);
  height: 100px;
  width:100px;
  color: white;
  }
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

反转(或切换)动画和淡入淡出

来自分类Dev

bootstrap 3移动崩溃在切换时淡入和淡出

来自分类Dev

在Javafx中切换视频剪辑时,如何淡入和淡出特殊效果?

来自分类Dev

CSS动画在暂停时以不同的速率淡入和淡出

来自分类Dev

将鼠标悬停在图像上时如何切换淡入淡出DIV

来自分类Dev

在选项卡之间切换时,如何制作淡入淡出的动画?

来自分类Dev

WordPress分页淡入淡出并继续阅读切换

来自分类Dev

从另一个元素触发淡入/淡出会导致淡入淡出元素在切换触发元素时粘住

来自分类Dev

默认情况下,当不进行切换时,开关控件显示为淡入淡出

来自分类Dev

单击时,jquery淡入淡出切换div在另一个div上吗?

来自分类Dev

jQuery淡入淡出切换如何在每个按钮中添加淡入淡出效果

来自分类Dev

jQuery淡入淡出切换如何在每个按钮中添加淡入淡出效果

来自分类Dev

在网格的某个元素上切换动画,并淡入/淡出其他元素

来自分类Dev

如何在动态创建的 div 元素上使用滑动或淡入淡出切换

来自分类Dev

如何仅使用CSS切换div和上下箭头

来自分类Dev

jQuery,切换CSS内容(上下箭头)

来自分类Dev

如何淡出切换事件?

来自分类Dev

切换类时,不能使用具有不同值的相同CSS属性

来自分类Dev

jQuery在不同行上的字母淡入淡出

来自分类Dev

使用jQuery滚动时淡入和淡出

来自分类Dev

滚动页面时淡入和淡出div

来自分类Dev

使颜色在悬停时淡入和淡出

来自分类Dev

CSS叠加,淡入淡出和过渡

来自分类Dev

发生上下文切换时,PC和CPU寄存器是什么?

来自分类Dev

发生上下文切换时,PC和CPU寄存器是什么?

来自分类Dev

如何在悬停和单击时切换HTML / CSS动画

来自分类Dev

使用切换和同位素时更改CSS的“活动”链接

来自分类Dev

如何在切换时显示不同的Bootstrap模式

来自分类Dev

如何在切换时显示不同的Bootstrap模式

Related 相关文章

  1. 1

    反转(或切换)动画和淡入淡出

  2. 2

    bootstrap 3移动崩溃在切换时淡入和淡出

  3. 3

    在Javafx中切换视频剪辑时,如何淡入和淡出特殊效果?

  4. 4

    CSS动画在暂停时以不同的速率淡入和淡出

  5. 5

    将鼠标悬停在图像上时如何切换淡入淡出DIV

  6. 6

    在选项卡之间切换时,如何制作淡入淡出的动画?

  7. 7

    WordPress分页淡入淡出并继续阅读切换

  8. 8

    从另一个元素触发淡入/淡出会导致淡入淡出元素在切换触发元素时粘住

  9. 9

    默认情况下,当不进行切换时,开关控件显示为淡入淡出

  10. 10

    单击时,jquery淡入淡出切换div在另一个div上吗?

  11. 11

    jQuery淡入淡出切换如何在每个按钮中添加淡入淡出效果

  12. 12

    jQuery淡入淡出切换如何在每个按钮中添加淡入淡出效果

  13. 13

    在网格的某个元素上切换动画,并淡入/淡出其他元素

  14. 14

    如何在动态创建的 div 元素上使用滑动或淡入淡出切换

  15. 15

    如何仅使用CSS切换div和上下箭头

  16. 16

    jQuery,切换CSS内容(上下箭头)

  17. 17

    如何淡出切换事件?

  18. 18

    切换类时,不能使用具有不同值的相同CSS属性

  19. 19

    jQuery在不同行上的字母淡入淡出

  20. 20

    使用jQuery滚动时淡入和淡出

  21. 21

    滚动页面时淡入和淡出div

  22. 22

    使颜色在悬停时淡入和淡出

  23. 23

    CSS叠加,淡入淡出和过渡

  24. 24

    发生上下文切换时,PC和CPU寄存器是什么?

  25. 25

    发生上下文切换时,PC和CPU寄存器是什么?

  26. 26

    如何在悬停和单击时切换HTML / CSS动画

  27. 27

    使用切换和同位素时更改CSS的“活动”链接

  28. 28

    如何在切换时显示不同的Bootstrap模式

  29. 29

    如何在切换时显示不同的Bootstrap模式

热门标签

归档