1. 用css3實現選項卡功能：
原理：每一個選項後緊跟着內容標籤，用 + 選擇器來綁定選項和內容，當選中某一個時，對應的內容display：inline-block展現出來。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.wrapper{
position: absolute;
left: 200px;
top: 100px;
width: 200px;
height: 200px;
border: 1px solid rgb(58, 56, 56);
}
.wrapper .choose{
display: flex;
justify-content: space-around;
width: 100%;
height: 50px;
border-bottom: 1px solid black;
}
.wrapper .choose input{
width: 40px;
height: 40px;
}
span{
position: absolute;
top: 100px;
left: 100px;
display: none;
}
input:checked + span{
display: inline-block;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="choose">
<input type="radio" name="choose" checked><span>11</span>
<input type="radio" name="choose"> <span>22</span>
<input type="radio" name="choose"><span>33</span>
</div>
</div>
</body>
</html>
2. 時鐘
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.demo{
width: 150px;
height: 150px;
border-radius: 50%;
position:absolute;
top: 100px;
left: 100px;
background: #3D4F6C;
border: 10px solid #BF8C79;
transform: translate3d(50px, 30px, 20px);
}
li{
position: absolute;
top: 0px;
left: 75px;
z-index: 99;
width: 2px;
height: 10px;
background: black;
transform-origin: 50% 750%;
list-style: none;
}
div li:nth-of-type(2){
transform: rotate(30deg);
}
div li:nth-of-type(3){
transform: rotate(60deg);
}
div li:nth-of-type(4){
transform: rotate(90deg);
}
div li:nth-of-type(5){
transform: rotate(120deg);
}
div li:nth-of-type(6){
transform: rotate(150deg);
}
div li:nth-of-type(7){
transform: rotate(180deg);
}
div li:nth-of-type(8){
transform: rotate(-150deg);
}
div li:nth-of-type(9){
transform: rotate(-120deg);
}
div li:nth-of-type(10){
transform: rotate(-90deg);
}
div li:nth-of-type(11){
transform: rotate(-60deg);
}
div li:nth-of-type(12){
transform: rotate(-30deg);
}
/* 數字 */
div li:nth-of-type(1) span{
position: absolute;
top: 10px;
left: -8px;
transform-origin: center;
}
div li:nth-of-type(2) span{
position: absolute;
top: 10px;
left: -8px;
transform-origin: center;
transform: rotate(-30deg);
}
div li:nth-of-type(3) span{
position: absolute;
top: 10px;
left: -8px;
transform: rotate(-60deg);
}
div li:nth-of-type(4) span{
position: absolute;
top: 10px;
left: -8px;
transform: rotate(-90deg);
}
div li:nth-of-type(5) span{
position: absolute;
top: 10px;
left: -8px;
transform: rotate(-120deg);
}
div li:nth-of-type(6) span{
position: absolute;
top: 10px;
left: -8px;
transform: rotate(-150deg);
}
div li:nth-of-type(7) span{
position: absolute;
top: 10px;
left: -8px;
transform: rotate(180deg);
}
div li:nth-of-type(8) span{
position: absolute;
top: 10px;
left: -8px;
transform: rotate(150deg);
}
div li:nth-of-type(9) span{
position: absolute;
top: 10px;
left: -8px;
transform: rotate(120deg);
}
div li:nth-of-type(10) span{
position: absolute;
top: 10px;
left: -8px;
transform: rotate(90deg);
}
div li:nth-of-type(11) span{
position: absolute;
top: 10px;
left: -8px;
transform: rotate(60deg);
}
div li:nth-of-type(12) span{
position: absolute;
top: 10px;
left: -8px;
transform: rotate(30deg);
}
/* 中心點 */
.center-disc{
position: absolute;
left: 75px;
top: 75px;
width: 4px;
height: 4px;
background: #BF8C79;
border-radius: 50%;
}
/* .needle {
position: absolute;
top: 75px;
left: 75px;
} */
/* 時針 */
.needle div:nth-of-type(1){
position: absolute;
left: 76px;
top: 60px;
width: 2px;
height: 15px;
background: #BF8C79;
transform: rotate(0deg);
transform-origin: 50% 100%;
animation: rotatehour 36000s linear infinite;
}
@keyframes rotatehour{
to{
transform: rotate(360deg);
}
}
/* 分針 */
.needle div:nth-of-type(2){
position: absolute;
left: 76px;
top: 50px;
width: 2px;
height: 25px;
background: blue;
transform: rotate(0deg);
transform-origin: 50% 100%;
animation: rotateminute 600s linear infinite;
}
@keyframes rotateminute{
to{
transform: rotate(360deg);
}
}
/* 秒針 */
.needle div:nth-of-type(3){
position: absolute;
left: 76px;
top: 40px;
width: 2px;
height: 35px;
background: green;
transform: rotate(0deg);
transform-origin: 50% 100%;
animation: rotateseconds 10s linear infinite;
}
@keyframes rotateseconds{
to{
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="demo">
<div class="center-disc"></div>
<div class="needle">
<div></div>
<div></div>
<div></div>
</div>
<li> <span>12</span></li>
<li><span>1</span></li>
<li><span>2</span></li>
<li><span>3</span></li>
<li><span>4</span></li>
<li><span>5</span></li>
<li><span>6</span></li>
<li><span>7</span></li>
<li><span>8</span></li>
<li><span>9</span></li>
<li><span>10</span></li>
<li><span>11</span></li>
</div>
</body>
</html>
