1. <!-- HTMLは前述の参照 -->
  1. /* 略 */
  2. /* :::::: fade change :::::: */
  3. input:checked ~ .menu {
  4. -webkit-animation: fadeIn 1s;
  5. animation: fadeIn 1s;
  6. }
  7. @-webkit-keyframes fadeIn {
  8. 0% { opacity: 0; }
  9. 30% { opacity: 0; }
  10. 100% { opacity: 1; }
  11. }
  12. @keyframes fadeIn {
  13. 0% { opacity: 0; }
  14. 30% { opacity: 0; }
  15. 100% { opacity: 1; }
  16. }
  17. /* :::::: mechanism :::::: */
  18. #normalList:checked ~ .tabBtn li [for="normalList"],
  19. #imageList:checked ~ .tabBtn li [for="imageList"],
  20. #textList:checked ~ .tabBtn li [for="textList"] {
  21. background-color: #cd5c5c;
  22. }
  23. #normalList:checked ~ .menu .date .year::after,
  24. #imageList:checked ~ .menu .date .year::after,
  25. #normalList:checked ~ .menu .date .day::after,
  26. #imageList:checked ~ .menu .date .day::after {
  27. content: ".";
  28. }
  29. #normalList:checked ~ .menu .date .day::after,
  30. #imageList:checked ~ .menu .date .day::after {
  31. margin-right: 0.5em;
  32. }