Material Design 中的动态背景色实现教程

Material Design 中的动态背景色实现教程

在 Google 推出的 Material Design 设计语言中，动画和交互是非常重要的部分。其中之一的特点就是使用动态背景色来让用户感到更加生动和有趣。下面我们将介绍如何实现 Material Design 中的动态背景色效果，并附上详细的代码和说明。

具体实现

HTML结构

首先，我们需要建立一个具有如下结构的HTML页面：

<div id="bg"></div>
<div id="content">动态背景色效果</div>

其中，id="bg"的标签是我们要操作的标签，id="content"的标签是内容标签。

CSS样式

接着，我们需要定义背景样式、内容样式以及动画效果。这里我们采用了 SCSS 语法，代码如下：

//整个页面的背景颜色
$bg-color: #39C4A4;

//动态背景的颜色列表，一般会有多个颜色随机展示
$bg-color-list: (
  #FF5252,
  #FF1744,
  #3F51B5,
  #2196F3,
  #00BCD4,
  #009688,
  #8BC34A,
  #CDDC39,
  #FFEB3B
);

//动画时间（ms）
$animation-time: 5s;

//整个页面的背景样式
body {
  background: $bg-color;
}

//内容样式
#content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  font-size: 2rem;
  font-weight: bold;
  color: #fff;
  text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
}

//动画样式
@keyframes color-change {
  0%, 100% {
    background: $bg-color;
  }
  
  //这里使用到了 SCSS 中的列表函数，选择随机颜色中的一个进行展示
  @each $color in $bg-color-list {
    #{percentage(nth($bg-color-list, index($bg-color-list, $color)))} {
      background: $color;
    }
  }
}

//整个页面的动画
#bg {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100vw;
  height: 100vh;
  animation: color-change $animation-time linear infinite;
  animation-direction: alternate-reverse; //正向和反向都要执行
}

JS实现

最后，我们需要使用 JavaScript 来实现颜色随机变化的效果。我们可以使用 Math.random() 函数来获取一个随机小数，将其乘上数组长度并向下取整来获取一个随机的数组下标，将这个下标对应的颜色值赋值给页面背景色即可。代码如下：

var bgList = ['#FF5252', '#FF1744', '#3F51B5', '#2196F3', '#00BCD4', '#009688', '#8BC34A', '#CDDC39', '#FFEB3B'];
var bgIndex = 0;
var colorChangingBg = document.getElementById('bg');

setInterval(function() {
  bgIndex = Math.floor(Math.random() * bgList.length);
  colorChangingBg.style.backgroundColor = bgList[bgIndex];
}, 3000);

总结

通过以上实现，我们可以看到 Material Design 中动态背景色实现的效果，这对于网站的用户体验来说非常有帮助。在实际开发中，我们可以根据项目实际需要进行调整，来达到更好的效果。同时，代码也需要经过适当的优化，包括响应式布局、浏览器兼容性等方面的考量。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/658ff719eb4cecbf2d5827b4