背景渐变动画

最新推荐文章于 2023-05-29 11:02:22 发布

呦呀

最新推荐文章于 2023-05-29 11:02:22 发布

阅读量638

点赞数

分类专栏： css样式学习笔记文章标签：动画 css css3

本文链接：https://blog.csdn.net/weixin_52580677/article/details/122377661

版权

css样式学习笔记专栏收录该内容

5 篇文章 1 订阅

订阅专栏

背景渐变动画（纯css+html）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景渐变动画</title>
    <link rel="stylesheet" href="style.css">
    <script src="JavaScript.js" type="text/javascript"></script>
</head>
<body>
  <div id="bg">
  	<h2>背景渐变动画</h2>
  </div>
</body>
</html>

* {
  margin: 0;
  padding: 0;
}
#bg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  animation: bg 10s infinite linear;  /* 使用动画：动画时长10s，循环播放，匀速播放 */
}
@keyframes bg  /* 定义动画 */
{
    0%   {background: #f3ffd9}
    25%  {background: #cadda0}
    50%  {background: #5e6f4d}
    75%  {background: #cadda0}
    100% {background: #f3ffd9}
}

点击监听控制背景渐变动画（html+css+js）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景渐变动画</title>
    <link rel="stylesheet" href="style.css">
    <script src="JavaScript.js" type="text/javascript"></script>
</head>
<body>
  <div id="bg">
    <ul>
      <li class="pink" onclick="pink()">少女粉</li>
      <li class="orange" onclick="orange()">活力橙</li>
      <li class="blue" onclick="blue()">星空蓝</li>
    </ul>
  </div>
</body>
</html>

* {
  margin: 0;
  padding: 0;
}
#bg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
ul {
  list-style: none;
  width: 100%;
  height: 80px;
  margin-top: 50px;
  display: flex;
  justify-content: space-evenly;
}
li {
  width: 200px;
  height: 80px;
  line-height: 80px;
  text-align: center;
  border-radius: 20px;
}
li:hover {
  box-shadow: 15px 15px 20px #a7a7a7;
}
.pink {
  background-image: linear-gradient(#ee9ca7, #ffdde1);
}
.orange {
  background-image: linear-gradient(#fdc830, #f73335);
}
.blue {
  background-image: linear-gradient(#000046, #1cb5e0);
}

@keyframes bg1
{
    0%   {background: #ffdde1;}
    50%  {background: #ee9ca7;}
    100% {background: #ffdde1;}
}
@keyframes bg2
{
    0%   {background: #fdc830;}
    50%  {background: #f73335;}
    100% {background: #fdc830;}
}
@keyframes bg3
{
    0%   {background: #000046;}
    50%  {background: #1cb5e0;}
    100% {background: #000046;}
}

function pink() {
    document.getElementById('bg').style.animation="bg1 5s infinite linear";
}

function orange() {
    document.getElementById('bg').style.animation="bg2 5s infinite linear";
}

function blue() {
    document.getElementById('bg').style.animation="bg3 5s infinite linear";
}