1. /* 略 */
  2. /* CSS Programming */
  3. #gallery #switch1:checked ~ .slideFrame ul {
  4. left: 90px;
  5. }
  6. #gallery #switch2:checked ~ .slideFrame ul {
  7. left: -450px;
  8. }
  9. #gallery #switch3:checked ~ .slideFrame ul {
  10. left: -990px;
  11. }
  12. #gallery #switch1:checked ~ .nav li label[for="switch1"],
  13. #gallery #switch2:checked ~ .nav li label[for="switch2"],
  14. #gallery #switch3:checked ~ .nav li label[for="switch3"] {
  15. opacity: 0;
  16. }
  17. #gallery input,
  18. #gallery #switch1:checked ~ .prev label:not([for="switch3"]),
  19. #gallery #switch2:checked ~ .prev label:not([for="switch1"]),
  20. #gallery #switch3:checked ~ .prev label:not([for="switch2"]),
  21. #gallery #switch1:checked ~ .next label:not([for="switch2"]),
  22. #gallery #switch2:checked ~ .next label:not([for="switch3"]),
  23. #gallery #switch3:checked ~ .next label:not([for="switch1"]) {
  24. display: none;
  25. }
  26. /* transition */
  27. #gallery ul.nav li label {
  28. transition: opacity 0.5s ease 0s;
  29. -webkit-transition: opacity 0.5s ease 0;
  30. }
  31. #gallery p label i {
  32. transition: margin 0.3s ease 0s;
  33. -webkit-transition: margin 0.3s ease 0;
  34. }
  35. #gallery .slideFrame ul {
  36. transition: left 1s cubic-bezier(0.19, 1, 0.22, 1) 0s;
  37. -webkit-transition: left 1s cubic-bezier(0.19, 1, 0.22, 1) 0;
  38. }