首页 /  web前端 /  css3 / 纯css3制作的闹钟

0 58

纯css3制作的闹钟

纯css3制作的闹钟_图一
<!DOCTYPE html>
<html lang="en">
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <style>
            *{
                margin:0;
                padding:0;
            }
            .clock{
                position: fixed;
                left:0;
                right:0;
                bottom:0;
                top:0;
                width: 500px;
                height:350px;
                border:1px solid #ccc;
                margin:auto;
            }
            .left-ear,.right-ear{
                width: 50px;
                height:50px;
                position:absolute;
                top:24%;
            }
            .left-foot,.right-foot{
                width: 50px;
                height:50px;
                position:absolute;
                bottom:30%;
            }
            .left-ear{
                left:35%;
                transform: rotate(-45deg);
            }
            .left-foot{
                left:40%;
                transform: rotate(-135deg);
            }
            .right-foot{
                right:40%;
                transform: rotate(135deg);
            }
            .left-ear:before,.right-ear:before,.left-foot:before,.right-foot:before{
                content:'';
                width: 5px;
                height:57px;
                display: block;
                background:sienna;
                position:absolute;
                left:0;
                right:0;
                margin:auto;
                z-index:0;
                top:0px;
                border-radius:30px 30px 0 0 ;
            }
            .left-foot:before,.right-foot:before{
                height:25px;
            }
            .right-ear{
                right:35%;
                transform: rotate(45deg);
            }
            .left-ear:after,.right-ear:after{
                content: '';
                width: 50px;
                height:25px;
                border-radius:15px 15px 0 0;
                background:red;
                z-index:1;
                position:absolute;
                left:0;
                top:0;
                bottom:0;
                right:0;
                margin:auto;
            }
            .clock>i{
                position:absolute;
                left:0;
                top:95px;
                right:0;
                margin:auto;
                width: 20px;
                display: -webkit-flex;
                display:flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;
            }
            .clock>i:before{
                content:'';
                width: 20px;
                height:5px;
                background:sienna;
                display: block;
                border-radius:5px;
            }
            .clock>i:after{
                content:'';
                width: 3px;
                height:25px;
                background: sienna;
                display: block;
            }
            .body{
                width: 100px;
                height:100px;
                border:10px solid red;
                border-radius:50%;
                position: absolute;
                left:0;
                right:0;
                margin:auto;
                top:115px;
            }
            .body>div{
                width:90px;
                height:45px;
                display: -webkit-flex;
                display: flex;
            }
            .body>div:nth-child(1){
                margin-left:49px;
            }
            .body>div:nth-child(2){
                margin-left:32px;
                transform: rotate(90deg);
                margin-top:26px;
                margin-right: 22px;
            }
            .body>div:nth-child(3){
                transform: rotate(180deg);
                margin-left:-39px;
                margin-top:-61px;
            }
            .body>div:nth-child(4){
                transform: rotate(270deg);
                margin-left:-22px;
                margin-top:-117px;
            }
            .body>div>span{
                display: block;
                width: 2px;
                height:10px;
                background: black;
                margin-right:22px;
            }
            .body>div:nth-child(2)>span{
                margin-right: 20px;
            }
            .body>div:nth-child(3)>span{
                margin-right: 20px;
            }
            .body>div>i{
                display: block;
                width: 1px;
                height:10px;
                background: black;
                margin-right:25px;
            }
            .body>div>i:nth-child(2){
                transform: rotate(30deg);
                margin-top:7px;
            }
            .body>div>i:nth-child(3){
                transform: rotate(60deg);
                margin-top:23px;
                margin-left:-11px;
            }
            .body>div:nth-child(2)>i:nth-child(2){
                margin-top:5px;
            }
            .body>div:nth-child(2)>i:nth-child(3){
                margin-left:-9px;
                margin-top:20px;
            }
            .body>div:nth-child(3)>i:nth-child(2){
                margin-top:7px;
                margin-right:18px;
                margin-left:3px;
            }
            .body>div:nth-child(3)>i:nth-child(3){
                margin-left:-3px;
                margin-top:25px;
            }
            .body>span{
                width: 100px;
                height:100px;
                display: block;
                position: absolute;
                left:0;
                top:0;
            }
            .body>span::after{
                content:'';
                width: 6px;
                height:6px;
                background:sienna;
                display: block;
                border-radius:50%;
                position: absolute;
                left:0;
                right:0;
                top:0;
                bottom:0;
                margin:auto;
            }
            .hour{
                width: 100px;
                height:100px;
                display: block;
                animation: time 43200s steps(60) infinite;
                position: absolute;
                left:0;
                right:0;
                top:0;
                bottom:0;
                margin:auto;
            }
            .hour:after{
                content:'';
                width: 0;
                height:0;
                display: block;
                position: absolute;
                border-width:20px 1px;
                border-style:solid;
                border-color:#ff9800  ;
                left:0;
                right:0;
                top:-25px;
                bottom:0;
                margin:auto;
            }
            .minutes{
                width: 100px;
                height:100px;
                display: block;
                animation: time 3600s steps(60) infinite;
                position: absolute;
                left:0;
                right:0;
                top:0;
                bottom:0;
                margin:auto;
            }
            .minutes:after{
                content:'';
                width: 0;
                height:0;
                display: block;
                position: absolute;
                border-width:25px 1px;
                border-style:solid;
                border-color:#ff9800  ;
                left:0;
                right:0;
                top:-25px;
                bottom:0;
                margin:auto;
            }
            .second{
                width: 100px;
                height:100px;
                display: block;
                animation: time 60s steps(60) infinite;
                position: absolute;
                left:0;
                right:0;
                top:0;
                bottom:0;
                margin:auto;
            }
            .second:after{
                content:'';
                width: 0;
                height:0;
                display: block;
                position: absolute;
                border-width:25px 1px;
                border-style:solid;
                border-color:transparent transparent #de6f10 #de6f10 ;
                left:0;
                right:0;
                top:-25px;
                bottom:0;
                margin:auto;

            }
            @keyframes time{
                from{transform: rotate(0deg)}
                to{transform: rotate(360deg)}
            }
        </style>
    <body>
        <div class="clock">
            <div class="left-ear"></div>
            <div class="right-ear"></div>
            <div class="left-foot"></div>
            <div class="right-foot"></div>
            <i></i>
            <div class="body">
                <div>
                    <span></span>
                    <i></i>
                    <i></i>
                </div>
                <div>
                    <span></span>
                    <i></i>
                    <i></i>
                </div>
                <div>
                    <span></span>
                    <i></i>
                    <i></i>
                </div>
                <div>
                    <span></span>
                    <i></i>
                    <i></i>
                </div>
                <span>
                    <i class="hour"></i>
                    <i class="minutes"></i>
                    <i class="second"></i>
                </span>
            </div>
        </div>
    </body>
</html>

[来源] https://yuanmouren.erlyun.com/p.php?id=62

[声明] 本站资源来自用户分享,如损害你的权益请联系客服QQ:120074275给予处理。

添加一条新回复
小鱼儿 2019-09-18 15:47
0
送花
20积分一朵