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. display: none;
  19. }
  20. /* transition */
  21. #gallery ul.nav li label {
  22. transition: opacity 0.5s ease 0s;
  23. -webkit-transition: opacity 0.5s ease 0;
  24. }
  25. #gallery p a {
  26. transition: margin 0.3s ease 0s;
  27. -webkit-transition: margin 0.3s ease 0;
  28. }
  29. #gallery .slideFrame ul {
  30. transition: left 1s ease 0s;
  31. -webkit-transition: left 1s ease 0;
  32. }