纯css布局实现有订单在家工作上班的日子-html代码-BFW代码库

纯css布局实现有订单在家工作上班的日子

代码语言：html

代码描述：纯css布局实现有订单在家工作上班的日子

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
html,
        body {
            background-color: rgb(128, 214, 243);
            animation: home 10s infinite;
        }

        @keyframes home {
            0% {
                background-color: rgb(128, 214, 243);
            }

            50% {
                background-color: rgb(77, 152, 177);
            }

            100% {
                background-color: rgb(41, 91, 107);
            }
        }

        .container {
            position: absolute;
            left: 10%;
            top: 10%;
            transform: translate(100%, 100%);
        }

        .clock {
            top: 100px;
            left: 50px;
            position: absolute;
            height: 110px;
            width: 110px;
            background-color: dodgerblue;
            border-radius: 100%;
        }

        .clock:after {
            content: "";
            position: absolute;
            z-index: 2;
            top: 10px;
            left: -12px;
            height: 50px;
            width: 100px;
            opacity: 0.2;
            background-color: rgb(190, 190, 190);
            border-top-left-radius: 100px;
            border-top-right-radius: 100px;
            transform: rotate(-45deg);
        }

        .clock:before {
            content: "";
            position: absolute;
            z-index: 2;
            top: 5px;
            left: 5px;
            height: 100px;
            width: 100px;
            background-color: rgb(255, 255, 255);
            border-radius: 100%;
            transform: rotate(135deg);
        }

        .clkhand {
            height: 5px;
            position: absolute;
            width: 5px;
            background-color: black;
            border: black 2px solid;
            border-radius: 100%;
            top: 150px;
            z-index: 2;
            left: 100px;
        }

        .clkhand:before {
            content: "";
            position: absolute;
            height: 45px;
            width: 3px;
            background-color: rgb(24, 23, 23);
            top: 2px;
            z-index: -1;
            left: 3px;
            transform-origin: 0% 0%;
            transform: rotate(180deg);
            animation-timing-function: linear;
            animation: rotate 0.84s infinite;
        }

        @keyframes rotate {
            100% {
                transform: rotate(540deg);
            }
        }

        .clkhand:after {
            content: "";
            position: absolute;
            height: 35px;
            width: 3px;
            background-color: rgb(24, 23, 23);
            top: 2px;
            z-index: -1;
            left: 3px;
            transform-origin: 0% 0%;
            transform: rotate(180deg);
            animation-timing-function: linear;
            animation: rotate 10s infinite;
        }

        .table {
            position: absolute;
            width: 500px;
            height: 20px;
            background-color: rgb(170, 113, 67);
            border-radius: 20px;
            top: 400px;
            left: 200px;
            z-index: -3;
        }

        .table:before {
            content: "";
            position: absolute;
            width: 20px;
            height: 185px;
            left: 80px;
            background-color: rgb(170, 113, 67);
            z-index: -3;
        }

        .table:after {
            content: "";
            position: absolute;
            width: 20px;
            height: 185px;
            left: 400px;
            background-color: rgb(170, 113, 67);
            z-index: -3;
        }

        .tbblwman .........完整代码请登录后点击上方下载按钮下载查看