经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » HTML/CSS » CSS3 » 查看文章
纯CSS3制作页面切换效果的实例代码_css3_CSS
来源:jb51  时间:2019/5/31 8:37:30  对本文有异议

此前写的那个太复杂了,来点简单的核心

  1. <html>
  2. <head>
  3. <title></title>
  4. <style type="text/css">
  5. * { margin: 0; padding: 0; border: none; }
  6. .Bl {
  7. width: 600px;
  8. height: 540px;
  9. margin: 0 auto;
  10. position: relative;
  11. top: 50%;
  12. transform: translateY(-50%);
  13. }
  14. .Bl > input {
  15. width: 20%;
  16. height: 40px;
  17. position: absolute;
  18. cursor: pointer;
  19. opacity: 0;
  20. }
  21. .Bl input:nth-of-type(1){ left: 0%; }
  22. .Bl input:nth-of-type(2){ left: 20%; }
  23. .Bl input:nth-of-type(3){ left: 40%; }
  24. .Bl input:nth-of-type(4){ left: 60%; }
  25. .Bl input:nth-of-type(5){ left: 80%; }
  26. /*切换效果*/
  27. .Bl input:nth-of-type(1):checked ~ span:nth-of-type(1) { color: white; } /* ~ 选择兄弟元素 */
  28. .Bl input:nth-of-type(2):checked ~ span:nth-of-type(2) { color: white; }
  29. .Bl input:nth-of-type(3):checked ~ span:nth-of-type(3) { color: white; }
  30. .Bl input:nth-of-type(4):checked ~ span:nth-of-type(4) { color: white; }
  31. .Bl input:nth-of-type(5):checked ~ span:nth-of-type(5) { color: white; }
  32. .Bl input:nth-of-type(1):checked ~ .pagebox > .pages { }
  33. .Bl input:nth-of-type(2):checked ~ .pagebox > .pages { transform: translateY(-100%); }
  34. .Bl input:nth-of-type(3):checked ~ .pagebox > .pages { transform: translateY(-200%); }
  35. .Bl input:nth-of-type(4):checked ~ .pagebox > .pages { transform: translateY(-300%); }
  36. .Bl input:nth-of-type(5):checked ~ .pagebox > .pages { transform: translateY(-400%); }
  37. span {
  38. display: block;
  39. width: 20%;
  40. height: 40px;
  41. background-color: red;
  42. float: left;
  43. text-align: center;
  44. line-height: 40px;
  45. font-size: 20px;
  46. }
  47. .pagebox,.pages {
  48. width: 100%;
  49. height: 500px;
  50. }
  51. .pagebox {
  52. overflow: hidden;
  53. }
  54. .pages {
  55. transition: all 0.5s;
  56. }
  57. .page {
  58. width: 100%;
  59. height: 100%;
  60. text-align: center;
  61. font-family: "微软雅黑";
  62. font-size: 30px;
  63. line-height: 500px;
  64. color: white;
  65. }
  66. .page1 { background-color: pink; }
  67. .page2 { background-color: blue; }
  68. .page3 { background-color: red; }
  69. .page4 { background-color: green; }
  70. .page5 { background-color: black; }
  71. </style>
  72. </head>
  73. <body>
  74. <div class="Bl">
  75. <input type="radio" name="btn" checked ><span>1</span>
  76. <input type="radio" name="btn" ><span>2</span>
  77. <input type="radio" name="btn" ><span>3</span>
  78. <input type="radio" name="btn" ><span>4</span>
  79. <input type="radio" name="btn" ><span>5</span>
  80. <section class="pagebox">
  81. <div class="pages">
  82. <div class="page page1">This is page1</div>
  83. <div class="page page2">This is page2</div>
  84. <div class="page page3">This is page3</div>
  85. <div class="page page4">This is page4</div>
  86. <div class="page page5">This is page5</div>
  87. </div>
  88. </section>
  89. </div>
  90. </body>
  91. </html>

总结

以上所述是小编给大家介绍的纯CSS3制作页面切换效果的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对w3xue网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号