console 命令行工具 X clear

console

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=, initial-scale=">
	<meta http-equiv="X-UA-Compatible" content="">
	<title>倒计时</title>
</head>
<body>
	<h1>Safari这个贱货</h1>
    <div class="count-down"></div>
</body>
</html>

html {
    font-size: 10px;
}

body {
    font-size: 1.4rem;
    background-color: #000;
    color: #fff;
}


@property --t { 
    syntax: "<integer>";
    inherits: false;
    initial-value: 0;
}

@counter-style stop {
    system: cyclic;
    symbols: "Go";
    range: infinite 0;
}

.count-down{
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Consolas, Monaco, monospace;
    font-size: 12rem;
    position: absolute;
    top:26vh;
    left: 0;
    right: 0;
    margin: auto;
    color: #eee;
    text-shadow: 0.1rem 0.1rem rgb(0, 0, 0);
}

.count-down::after{
    --t: 5;
    --dur: 1;
    counter-reset: time var(--t);
    -webkit-counter-reset: time var(--t);
    content: counter(time, stop);
    -webkit-content: counter(time, stop);
    animation: count calc( var(--t) * var(--dur) * 1s ) steps(var(--t)) forwards, shark calc(var(--dur) * 1s) calc(var(--dur) * .8s) calc(var(--t));
    -webkit-animation: count calc( var(--t) * var(--dur) * 1s ) steps(var(--t)) forwards, shark calc(var(--dur) * 1s) calc(var(--dur) * .8s) calc(var(--t));
}

@-webkit-keyframes count {
    to {
        --t: 0;
    }
}

@keyframes count {
    to {
        --t: 0;
    }
}

@keyframes shark {
    0%{
        opacity: 1;
        transform: scale(1);
    }
    
    20%{
        opacity: 0;
        transform: scale(.4);
    }

    21%{
        opacity: 0;
        transform: scale(5);
    }
}

@-webkit-keyframes shark {
    0%{
        opacity: 1;
        -webkit-transform: scale(1);
    }
    
    20%{
        opacity: 0;
        -webkit-transform: scale(.4);
    }

    21%{
        opacity: 0;
        -webkit-transform: scale(5);
    }
}