最简单的方法实现网页背景色动态化-值得收藏-技术圈

最近白天一直忙于工作，晚上忙着写代码，写代码就是写前端Vue + Element UI，和后端 Django + Django REST Framework，这套技术栈可以说是学习成本最低、见效最快、可快速复用、最适合单干的技术栈了。我已经用它快速完成 3 个简单的小项目了。

Vue 这块我仍处于知其然，不知其所以然的状态，用是会用，但讲不出内部原理，主要还是对 nodejs，ES，JavaScript等技术不太熟悉，我的主要技能仍旧是 Python，Vue是空了就去学习学习，后面的用处会很大，比如一些 H5，小程序啥的，都有基于 Vue 的框架，一通百通。自己积累的还不够，没啥好分享的，不过发现一个最简单的方法实现网页背景色动态变化的方法，先看下效果：

代码非常简单，首先给要实现动态背景的 div 设置一个 class 名称，这里是 login-container，然后设置样式即可，代码如下：

<style scoped>.login-container {  background-image: linear-gradient(to right , #4876FF , #4966FF );  animation: hueRotate 10s infinite alternate;}@keyframes hueRotate {  0 {    filter: hue-rotate(0);  }  100% {    filter: hue-rotate(360deg);  }}style>

这里主要用到了 CSS3 animation（动画）属性，这里面的逻辑很简单，就是用 background-image 设置一个背景，然后然颜色逐帧变化，这里还用到了 CSS3 的 hue-rotate 属性，这里可以参考

https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/hue-rotate了解更多用法。

使用这个方法，可以实现更加细致的控制，如下：

对应的代码如下：

<style scoped>.login-container {  background: -webkit-linear-gradient(    217deg,    #e56420,    #c22525,    #3d9c31,    #37bbde  );  background: linear-gradient(233deg, #e56420, #c22525, #3d9c31, #37bbde);  width: 100%;  height: 100vh;  background-size: cover;  background-blend-mode: hard-light;  -webkit-animation: hue-rotate 5s linear infinite;  animation: hue-rotate 5s linear infinite;}
@-webkit-keyframes hue-rotate {  from {    -webkit-filter: hue-rotate(0);    -moz-filter: hue-rotate(0);    -ms-filter: hue-rotate(0);    filter: hue-rotate(0);  }  to {    -webkit-filter: hue-rotate(360deg);    -moz-filter: hue-rotate(360deg);    -ms-filter: hue-rotate(360deg);    filter: hue-rotate(360deg);  }}@keyframes hue-rotate {  from {    -webkit-filter: hue-rotate(0);    -moz-filter: hue-rotate(0);    -ms-filter: hue-rotate(0);    filter: hue-rotate(0);  }  to {    -webkit-filter: hue-rotate(360deg);    -moz-filter: hue-rotate(360deg);    -ms-filter: hue-rotate(360deg);    filter: hue-rotate(360deg);  }}style>

如果你觉得有用，或对你身边的人有用，请收藏、点赞或分享，感谢支持。

此外如果你也准备学习Vue的话，我推荐你学习极客时间的Vue开发实战专栏，扫下方二维码购买，加我微信好友「somenzz」，返你24元红包，不赚钱，交个朋友。