css3的练习题

男娘i 2022-05-10 10:18 150阅读 0赞

**练习题：（1）css3选项卡功能、（2）钟表、（3）旋转木马**

**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>

![70][]

**2. 时钟**

![70 1][]

<!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>

![70 2][]

**3. 3D效果的旋转木马**

<!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>
            @keyframes rotateWrap{
                from{
                    transform: perspective(600px) rotateX(-10deg) rotateY(0deg);
                }
                to{
                    transform: perspective(600px) rotateX(-10deg) rotateY(360deg);
                }
            }
            .wrapper{    
                position: absolute;
                top: 100px;
                left: 200px;
                width: 150px;
                height: 150px;
                transform-style: preserve-3d;
                
                animation: rotateWrap 5s linear infinite;
            }
            .wrapper div{
                position: absolute;
                top: 0px;
                left: 0px;
                width: 150px;
                height: 150px;
                color: #fff;
                font-size: 40px;
                text-align: center;
                line-height: 150px;
            }
            .wrapper div:nth-of-type(1){
                background: red;
                transform:  translate3d(0px,0px, 200px);
            }
            .wrapper div:nth-of-type(2){
                background: orange;
                transform:  rotateY(72deg) translate3d(0px,0px, 200px);
            }
            .wrapper div:nth-of-type(3){
                background: yellow;
                transform:  rotateY(144deg)translate3d(0px,0px, 200px);
            }
            .wrapper div:nth-of-type(4){
                background: green;
                transform:  rotateY(-144deg) translate3d(0px,0px, 200px);
            }
            .wrapper div:nth-of-type(5){
                background: cyan;
                transform:  rotateY(-72deg)translate3d(0px,0px, 200px);
            }
        </style>
    </head>
    <body>
        <div class="wrapper">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
        </div>
    </body>
    </html>

![70 3][]

**注意：Google浏览器，审查元素那里，可以对运动函数进行调整。**

![70 4][]

[70]: /images/20220510/96b6575cf2874c729340a15fd4f6a1a3.png
[70 1]: /images/20220510/6f0b5b92f3e84ee2bcffee8a621bee8f.png
[70 2]: /images/20220510/4598ccdff2414434b8370bf722098e7d.png
[70 3]: /images/20220510/49bb2e04ad124a2ba9f3480234d5bffd.png
[70 4]: /images/20220510/7fd133c308324d80ae9c377f57ff8dc9.png