CSS按钮时钟效果

Question

我目前正在开发一个浏览器游戏，我有一个提供提示的按钮。我想授权玩家在60秒后点击“提示”按钮，并显示加载时间我希望按钮的背景显示“时钟”效果，从12开始逆时针旋转直到时间到了，显示两种颜色。我一直在网上寻找类似的东西，但我找不到任何东西。

这是我的想法的一个例子：

感谢您的帮助！

Answer 1

这可以通过使用按钮上的伪元素来显示另一种颜色和进度来实现。诀窍是使用 conic-gradient 制作动画（当然是用 js）。

我很确定这可以仅使用 css 来实现，但这需要我更多的时间来弄清楚。尽管我确信您希望在代码中对其进行更多控制。

document.addEventListener('DOMContentLoaded', function () { 
    const hintButton = document.getElementById('hintButton'); 
    const duration = 15; // Duration for the timer (in seconds)
    let startTime = Date.now();

    // Set up an interval that runs every 100 milliseconds
    const interval = setInterval(() => {
        const elapsedTime = (Date.now() - startTime) / 1000; // Calculate elapsed time in seconds
        const percentage = (elapsedTime / duration) * 100; // Calculate the percentage of time elapsed

        // Update the button's background to show the progress as a clockwise fill
        hintButton.style.background = `conic-gradient(
            #4caf50 ${percentage * 3.6}deg, /* Green fill based on elapsed percentage */
            #d3d3d3 ${percentage * 3.6}deg /* Remaining gray portion */
        )`;

        // Check if the full duration has passed
        if (elapsedTime >= duration) {
            clearInterval(interval); // Stop the interval once the time is up
            hintButton.disabled = false; // Enable the button
            hintButton.classList.add('enabled'); // Add a class for further styling (like cursor change)
            hintButton.style.cursor = 'pointer'; // Change the cursor to indicate it's clickable
        }
    }, 100);
});

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f0f0;
    margin: 0;
}


button {
    position: relative; /* For the pseudo-element (progress overlay) */
    width: 150px; 
    height: 50px; 
    font-size: 16px; 
    border: none; 
    border-radius: 5px; 
    background: conic-gradient(
        #d3d3d3 0deg, /* Start with a light gray color */
        #4caf50 0deg, /* Green color will grow */
        #4caf50 0deg, /* Initial green angle (0 deg) */
        #d3d3d3 360deg /* Rest of the button is gray */
    );
    color: white; 
    cursor: not-allowed; /* Pointer style when disabled */
    transition: background 0.5s; /* Smooth transition when the background updates */
}


button.enabled {
    cursor: pointer; 
}

/* Overlay for the button to give it a shaded look */
button::before {
    content: ''; /* Empty content for the pseudo-element */
    position: absolute; /* Positioned relative to the button */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.1); /* Semi-transparent overlay */
    border-radius: 5px;
    z-index: 1; 
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hint Button with Timer</title>
</head>
<body>
    <button id="hintButton" disabled>Hint</button>
</body>
</html>

CSS按钮时钟效果

问题描述投票：0回答：1

1个回答

最新问题

CSS按钮时钟效果

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1