1. <!-- HTMLは前述の参照 -->
  1. /* 略 */
  2. /* :::::: fade change :::::: */
  3. #normalList:checked ~ .menu {
  4. -webkit-animation: fadeIn1 1s;
  5. animation: fadeIn1 1s;
  6. }
  7. #imageList:checked ~ .menu {
  8. -webkit-animation: fadeIn2 1s;
  9. animation: fadeIn2 1s;
  10. }
  11. #textList:checked ~ .menu {
  12. -webkit-animation: fadeIn3 1s;
  13. animation: fadeIn3 1s;
  14. }
  15. @-webkit-keyframes fadeIn1 {
  16. 0% { opacity: 0; }
  17. 30% { opacity: 0; }
  18. 100% { opacity: 1; }
  19. }
  20. @-webkit-keyframes fadeIn2 {
  21. 0% { opacity: 0; }
  22. 30% { opacity: 0; }
  23. 100% { opacity: 1; }
  24. }
  25. @-webkit-keyframes fadeIn3 {
  26. 0% { opacity: 0; }
  27. 30% { opacity: 0; }
  28. 100% { opacity: 1; }
  29. }
  30. @keyframes fadeIn1 {
  31. 0% { opacity: 0; }
  32. 30% { opacity: 0; }
  33. 100% { opacity: 1; }
  34. }
  35. @keyframes fadeIn2 {
  36. 0% { opacity: 0; }
  37. 30% { opacity: 0; }
  38. 100% { opacity: 1; }
  39. }
  40. @keyframes fadeIn3 {
  41. 0% { opacity: 0; }
  42. 30% { opacity: 0; }
  43. 100% { opacity: 1; }
  44. }
  45. /* :::::: mechanism :::::: */
  46. #normalList:checked ~ .tabBtn li [for="normalList"],
  47. #imageList:checked ~ .tabBtn li [for="imageList"],
  48. #textList:checked ~ .tabBtn li [for="textList"] {
  49. background-color: #cd5c5c;
  50. }
  51. #normalList:checked ~ .menu .date .year::after,
  52. #imageList:checked ~ .menu .date .year::after,
  53. #normalList:checked ~ .menu .date .day::after,
  54. #imageList:checked ~ .menu .date .day::after {
  55. content: ".";
  56. }
  57. #normalList:checked ~ .menu .date .day::after,
  58. #imageList:checked ~ .menu .date .day::after {
  59. margin-right: 0.5em;
  60. }