Css切换不同窗口

server/2024/10/21 7:34:57/

代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><style>css">/*label {*//*	display: block;*//*}*/* {padding: 0;margin: 0;}body {height: 100vh;background: gray;}.container {width: 650px;height: 500px;margin: 150px auto;display: flex;justify-content: space-between;align-items: center;/*设置视距*/perspective: 1500px;}input {/*取消按钮*/display: none;}.container .tab_body {width: 500px;height: 105%;position: relative;/*开启子元素的3d效果*/transform-style: preserve-3d;display: flex;justify-content: center;text-align: center;/*transform: rotateY(48deg) rotateX(-20deg);*/transition: transform 2s ease;}.labels {display: flex;flex-direction: column;justify-content: space-between;height: 500px;}.labels label {width: 100px;height: 100px;display: block;text-align: center;cursor: pointer;line-height: 100px;}.container .tab_body .tab_content {width: 500px;height: 78%;background: yellowgreen; /*背景颜色的抵挡解决了文字的重叠*/position: absolute;display: flex;flex-direction: column;justify-content: center;align-items: center;}.container .tab_body .tab_content:nth-child(1) {transform: translateY(-205px) rotateX(90deg);background: aquamarine;}.container .tab_body .tab_content:nth-child(2) {transform: translateZ(205px);background: darkred;}.container .tab_body .tab_content:nth-child(3) {transform: translateY(205px) rotateX(-90deg);background: darkslategrey;}.container .tab_body .tab_content:nth-child(4) {transform: translateZ(-205px) rotateX(180deg);background: khaki;}#btn1:checked ~ .tab_body {transform: rotateX(-90deg);}#btn2:checked ~ .tab_body {transform: rotateX(0deg);}#btn3:checked ~ .tab_body {transform: rotateX(90deg);}#btn4:checked ~ .tab_body {transform: rotateX(180deg);}.container .labels label:nth-child(1) {background: aquamarine;}.container .labels label:nth-child(2) {background: darkred;}.container .labels label:nth-child(3) {background: darkslategrey;}.container .labels label:nth-child(4) {background: khaki;}label:hover {opacity: 0.6;}</style><body><div class="container"><input type="radio" name="tabPage" id="btn1" checked><input type="radio" name="tabPage" id="btn2"><input type="radio" name="tabPage" id="btn3"><input type="radio" name="tabPage" id="btn4"><div class="tab_body"><div class="tab_content">唱</div><div class="tab_content">跳</div><div class="tab_content">rap</div><div class="tab_content">篮球</div></div><div class="labels"><!--label可以扩大单选框的点击范围--><label for="btn1">唱</label><label for="btn2">跳</label><label for="btn3">rap</label><label for="btn4">篮球</label></div></div></body>
</html>