时间戳

首页 > 解决方案 > 如何使用javascript更改关键帧值“从-到”onclick

javascript - 如何使用javascript更改关键帧值“从-到”onclick

问题描述

好吧，我创建了一个 colorFlipper 网站，它运行良好，但我想为其添加一些功能。所以我决定使用 javascript 处理 css 动画，但遇到了一些问题。我想要做的是在点击时平滑地改变背景颜色，颜色应该是每次点击时随机生成的十六进制颜色。我让它平滑地改变颜色，但它只在第一次工作，然后颜色立即改变，没有动画

这是我的 html - css - Js 文件。

// Getting Elements

const button = document.getElementById("btn");
const color = document.querySelector(".color");
const background = document.querySelector("main");
const mainStyles = window.getComputedStyle(background);
let currentMainColor = mainStyles.getPropertyValue('background-color');;


console.log(background)

// Event listners
button.addEventListener("click", changecolor);


//Functions


function changecolor() {

    const newColor = `#${Math.floor(Math.random()*255**3).toString(16).padStart(6,0)}`;
    let styleTag = document.querySelector("style");
    console.log(styleTag);
    if (styleTag !== null) {
        styleTag.remove();
        var style = document.createElement('style');
        style.innerHTML =
            `@keyframes example1 {
        from {background-color : ${currentMainColor}}
        to {background-color: ${newColor};}}`
        var ref = document.querySelector('script');
        // Insert our new styles before the first script tag
        ref.parentNode.insertBefore(style, ref);
    } else {
        var style = document.createElement('style');
        style.innerHTML =
            `@keyframes example2 {
        from {background-color : ${currentMainColor}}
        to {background-color: ${newColor};}}`
        var ref = document.querySelector('script');
        // Insert our new styles before the first script tag
        ref.parentNode.insertBefore(style, ref);

    }
    currentMainColor = newColor;
    color.innerHTML = newColor;




}
*,
 ::after,
 ::before {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Roboto Mono", sans-serif;
}

html {
    height: 90vh;
}

body {
    font-family: "Roboto Mono", sans-serif;
    overflow: hidden;
}

nav {
    height: 3rem;
    display: flex;
    align-items: center;
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3);
    z-index: 9999;
}

nav a {
    text-decoration: none;
}

.nav-container {
    width: 90vw;
    max-width: 620px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-container h4 {
    font-size: 1rem;
    font-weight: 600;
    margin-right: 1rem;
    color: #49A6E9;
    letter-spacing: 0.25rem;
}

.nav-container ul {
    list-style: none;
    display: flex;
}

.nav-container ul li a {
    text-decoration: none;
    font-size: 1rem;
    font-weight: 600;
    margin-right: 1rem;
    color: hsl(205deg 86% 17%);
    letter-spacing: 0.25rem;
    transition: all 0.2s ease;
}

.nav-container ul li a:hover {
    color: #49A6E9;
}

main {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background-color: #F1F5F8;
    z-index: -1;
}

.animation1 {
    animation-name: example1;
    animation-duration: 4s;
    animation-fill-mode: forwards;
}

.animation2 {
    animation-name: example2;
    animation-duration: 4s;
    animation-fill-mode: forwards;
}

.container {
    text-align: center;
}

.container h1 {
    background: #222222;
    color: #FFFFFF;
    padding: 1rem;
    width: 50rem;
    border-radius: 10px;
    margin-bottom: 2.5rem;
    font-size: 2.5rem;
}

.color {
    color: #49A6E9;
}

.btn {
    padding: 0.7rem 2rem;
    border: 3px solid #222222;
    border-radius: 7px;
    background-color: transparent;
    cursor: pointer;
}

.btn:focus {
    outline: none;
}

.btn-hero {
    font-size: 1.7rem;
    text-transform: uppercase;
    letter-spacing: 0.25rem;
    transition: all 0.3s linear;
}

.btn-hero:hover {
    color: #F1F5F8;
    background-color: #222222;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Colot Flipper</title>
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet">
    <!-- Custom Css -->
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <nav>
        <div class="nav-container">
            <a href="index.html">
                <h4 class="brand-name">Color Flipper</h4>
            </a>
            <ul class="menu">
                <li><a href="index.html">Simple</a></li>
                <li>
                    <a href="hex.html">Hex</a>
                </li>
            </ul>
        </div>
    </nav>
    <main class="animation1 animation2">
        <div class="container">
            <h1>Background Color : <span class="color">#F1F5F8</span></h1>
            <button class="btn btn-hero" id="btn">Click me</button>
        </div>
    </main>

    <script src="hex.js"></script>
</body>

</html>

标签： javascripthtmlcss

解决方案

transition您可以使用 css属性平滑地更改它。单击 div 以更改其颜色。

//https://stackoverflow.com/questions/1484506/random-color-generator
function getRandomColor() {
  var letters = '0123456789ABCDEF';
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

document.getElementById("div").addEventListener("click", e => {
  e.target.style.backgroundColor = getRandomColor();
});
.colordiv {
  width: 100vw;
  height: 100vh;
  transition: all 1s;
}
<div class="colordiv" id="div" style="background-color: lightgray"></div>

推荐阅读