js+css实现数字旋转倒计时动画效果代码-html代码-BFW代码库

js+css实现数字旋转倒计时动画效果代码

代码语言：html

所属分类：动画

代码描述：js+css实现数字旋转倒计时动画效果代码

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

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

@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");* {
    box-sizing: border-box
}

body {
    font-family: "Roboto",sans-serif;
    height: 100vh;
    margin: 0;
    overflow: hidden
}

h4 {
    font-size: 20px;
    margin: 5px;
    text-transform: uppercase
}

.counter {
    left: 50%;
    position: fixed;
    text-align: center;
    top: 50%;
    transform: translate(-50%,-50%)
}

.counter.hide {
    animation: hide .2s ease-out;
    transform: translate(-50%,-50%) scale(0)
}

.final {
    left: 50%;
    position: fixed;
    text-align: center;
    top: 50%;
    transform: translate(-50%,-50%) scale(0)
}

.final.show {
    animation: show .2s ease-out;
    transform: translate(-50%,-50%) scale(1)
}

.nums {
    color: #3498db;
    font-size: 50px;
    height: 50px;
    overflow: hidden;
    position: relative;
    width: 250px
}

.nums span {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%) rotate(120deg);
    transform-origin: bottom center
}

.nums span.in {
    animation: goIn .5s ease-in-out;
    transform: translate(-50%,-50%) rotate(0deg)
}

.nums span.out {
    animation: goOut .5s ease-in-out
}

.replay {
    background-color: #3498db;
    border: 0;
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
    font-size: 1rem;
    font-weight: bold;
    padding: .8rem 1rem;
    position: relative;
    transition: background-color .3s
}

.replay:hover {
    background-color: #0640b4
}

.replay:active {
    transform: scale(0.98)
}

@keyframes hide {
    0% {
        transform: translate(-50%,-50%) scale(1)
    }

    100% {
        transform: translate(-50%,-50%) scale(0)
    }
}

@keyframes show {
    0% {
        transform: translate(-50%,-50%) scale(0)
    }

    30% {
        transform: translate(-50%,-50%) scale(1.4)
    }

    100% {
        transform: translate(-50%,-50%) scale(1)
    }
}

@keyframes goIn {
    0% {
        transform: translate(-50%,-50%) rotate(120deg)
    }

    30% {
        transform: translate(-50%,-50%) rotate(-20deg)
    }

    60% {
        transform: translate(-50%,-50%) rotate(10deg)
    }

    100% {
        transform:.........完整代码请登录后点击上方下载按钮下载查看