Hướng dẫn how do i change the background color automatically in html? - làm cách nào để thay đổi màu nền tự động trong html?

5

Mới! Lưu câu hỏi hoặc câu trả lời và sắp xếp nội dung yêu thích của bạn. Tìm hiểu thêm.
Learn more.

Làm cách nào để tạo nền thay đổi/mờ dần bằng cách sử dụng HTML và CSS và có thể JavaScript tương tự như Waht //kahoot.it có?

Hỏi ngày 12 tháng 4 năm 2017 lúc 14:07Apr 12, 2017 at 14:07

1

Bạn nên học cách kiểm tra và có được

@keyframes bgcolor {
    0% {
        background-color: #45a3e5
    }

    30% {
        background-color: #66bf39
    }

    60% {
        background-color: #eb670f
    }

    90% {
        background-color: #f35
    }

    100% {
        background-color: #864cbf
    }
}

body {
    -webkit-animation: bgcolor 20s infinite;
    animation: bgcolor 10s infinite;
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
}

Đã trả lời ngày 12 tháng 4 năm 2017 lúc 14:22Apr 12, 2017 at 14:22

Dan Philipdan PhilipDan Philip

4,0041 Huy hiệu vàng15 Huy hiệu bạc31 Huy hiệu đồng1 gold badge15 silver badges31 bronze badges

2

body {
  animation: 10000ms ease-in-out infinite color-change;
}

@keyframes color-change {
  0% {
    background-color: teal;
  }
  20% {
    background-color: gold;
  }
  40% {
    background-color: indianred;
  }
  60% {
    background-color: violet;
  }
  80% {
    background-color: green;
  }
  100% {
    background-color: teal;
  }
}

Đã trả lời ngày 12 tháng 4 năm 2017 lúc 14:27Apr 12, 2017 at 14:27

Hungerstarhungerstarhungerstar

20,7K6 Huy hiệu vàng47 Huy hiệu bạc59 Huy hiệu Đồng6 gold badges47 silver badges59 bronze badges

0

Bạn thực sự không cho chúng tôi thấy bất cứ điều gì về bạn đang cố gắng. Nhưng tôi là một chàng trai tốt và tôi biết bạn sẽ học bằng ví dụ:

div {
  animation: colorchange 10s infinite; 
}

@keyframes colorchange {
  0%   {background-color: red;}
  25%  {background-color: yellow;}
  50%  {background-color: blue;}
  75%  {background-color: green;}
  100% {background-color: red;}
}

Sửa đổi khi cần thiết.

Đã trả lời ngày 12 tháng 4 năm 2017 lúc 14:20Apr 12, 2017 at 14:20

StefanbobstefanbobStefanBob

4.6832 Huy hiệu vàng30 Huy hiệu bạc37 Huy hiệu Đồng2 gold badges30 silver badges37 bronze badges

1

/* The animation code */
@keyframes example {
    0%   {background-color: red;}
    33%  {background-color: yellow;}
    66%  {background-color: blue;}
    100%   {background-color: red;}
}

/* The element to apply the animation to */
div {
    width: 100px;
    height: 100px;
    background-color: red;
    animation-name: example;
    animation-duration: 10s;
    animation-iteration-count: infinite;
}

Đã trả lời ngày 12 tháng 4 năm 2017 lúc 14:23Apr 12, 2017 at 14:23

Bruh chỉ làm điều này:

@keyframes bgcolor {
    0% {
        background-color: #45a3e5
    }

    30% {
        background-color: #66bf39
    }

    60% {
        background-color: #eb670f
    }

    90% {
        background-color: #f35
    }

    100% {
        background-color: #864cbf
    }
}

body {
    -webkit-animation: bgcolor 20s infinite;
    animation: bgcolor 10s infinite;
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
}

Đã trả lời ngày 21 tháng 10 năm 2019 lúc 10:14Oct 21, 2019 at 10:14

Màu nền của một trang được đặt như thế này: Body {....

Ở đây, các phần tử, và các phần tử sẽ có màu nền khác nhau: h1 {....

div {màu nền: màu xanh lá cây; ....

Đặt màu nền của trang web hoặc một phần tử trên trang có thể cho phép bạn tạo bố cục độc đáo.bgcolor attribute in the opening body tag and set it to the hex color code #800000, as shown below.

  = color. length] {i = 0;}*/}} setInterval [function ch hợp tác [] {thay đổi [0]}, 1000];