炫酷CSS3倒计时特效

原创 于 2025-06-28 16:48:30 发布 · 649 阅读 · 17 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #css3 #html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>炫酷CSS3倒计时特效</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
            margin: 0;
            overflow: hidden;
        }
        
        .countdown-container {
            text-align: center;
            background-color: rgba(255, 255, 255, 0.2);
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            backdrop-filter: blur(5px);
        }
        
        h1 {
            color: white;
            margin-bottom: 30px;
            text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
        }
        
        .countdown {
            display: flex;
            justify-content: center;
            gap: 20px;
        }
        
        .countdown-item {
            position: relative;
            width: 100px;
            height: 100px;
            perspective: 1000px;
        }
        
        .countdown-number {
            position: absolute;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 3rem;
            font-weight: bold;
            color: white;
            background: rgba(0, 0, 0, 0.3);
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
            transform-style: preserve-3d;
            transition: transform 0.5s ease;
        }
        
        .countdown-label {
            margin-top: 10px;
            color: white;
            font-size: 1rem;
            text-transform: uppercase;
            letter-spacing: 2px;
        }
        
        .flip {
            animation: flip 0.5s ease forwards;
        }
        
        @keyframes flip {
            0% {
                transform: rotateX(0deg);
            }
            50% {
                transform: rotateX(90deg);
                opacity: 0;
            }
            51% {
                opacity: 0;
            }
            100% {
                transform: rotateX(0deg);
                opacity: 1;
            }
        }
        
        .pulse {
            animation: pulse 0.5s ease;
        }
        
        @keyframes pulse {
            0% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.2);
            }
            100% {
                transform: scale(1);
            }
        }
        
        .link {
            margin-top: 30px;
            color: #fff;
            text-decoration: none;
            font-size: 14px;
            opacity: 0.7;
            transition: opacity 0.3s;
        }
        
        .link:hover {
            opacity: 1;
        }
    </style>
</head>
<body>
    <div class="countdown-container">
        <h1>活动倒计时</h1>
        <div class="countdown">
            <div class="countdown-item">
                <div class="countdown-number" id="days">00</div>
                <div class="countdown-label">天</div>
            </div>
            <div class="countdown-item">
                <div class="countdown-number" id="hours">00</div>
                <div class="countdown-label">时</div>
            </div>
            <div class="countdown-item">
                <div class="countdown-number" id="minutes">00</div>
                <div class="countdown-label">分</div>
            </div>
            <div class="countdown-item">
                <div class="countdown-number" id="seconds">00</div>
                <div class="countdown-label">秒</div>
            </div>
        </div>
        <a href="https://a.88a.org.cn/G1iL" class="link">点击查看更多精彩内容</a>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            // 设置目标日期（当前时间+7天）
            const targetDate = new Date();
            targetDate.setDate(targetDate.getDate() + 7);
            
            function updateCountdown() {
                const now = new Date();
                const diff = targetDate - now;
                
                if (diff <= 0) {
                    $('.countdown-number').text('00');
                    return;
                }
                
                const days = Math.floor(diff / (1000 * 60 * 60 * 24));
                const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
                const seconds = Math.floor((diff % (1000 * 60)) / 1000);
                
                // 更新天数
                if (days.toString() !== $('#days').text()) {
                    $('#days').addClass('flip');
                    setTimeout(() => {
                        $('#days').text(days.toString().padStart(2, '0'));
                        $('#days').removeClass('flip');
                    }, 250);
                }
                
                // 更新小时
                if (hours.toString() !== $('#hours').text()) {
                    $('#hours').addClass('flip');
                    setTimeout(() => {
                        $('#hours').text(hours.toString().padStart(2, '0'));
                        $('#hours').removeClass('flip');
                    }, 250);
                }
                
                // 更新分钟
                if (minutes.toString() !== $('#minutes').text()) {
                    $('#minutes').addClass('flip');
                    setTimeout(() => {
                        $('#minutes').text(minutes.toString().padStart(2, '0'));
                        $('#minutes').removeClass('flip');
                    }, 250);
                }
                
                // 更新秒钟
                if (seconds.toString() !== $('#seconds').text()) {
                    $('#seconds').addClass('flip');
                    setTimeout(() => {
                        $('#seconds').text(seconds.toString().padStart(2, '0'));
                        $('#seconds').removeClass('flip');
                    }, 250);
                }
                
                // 每分钟脉冲效果
                if (seconds === 0) {
                    $('.countdown-number').addClass('pulse');
                    setTimeout(() => {
                        $('.countdown-number').removeClass('pulse');
                    }, 500);
                }
            }
            
            // 初始更新
            updateCountdown();
            
            // 每秒更新一次
            setInterval(updateCountdown, 1000);
        });
    </script>
</body>
</html>

ziblog
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值