最近白天一直忙于工作，晚上忙着写代码，写代码就是写前端Vue Element UI，和后端 Django Django REST Framework，这套技术栈可以说是学习成本最低、见效最快、可快速复用、最适合单干的技术栈了。我已经用它快速完成 3 个简单的小项目了。
Vue 这块我仍处于知其然，不知其所以然的状态，用是会用，但讲不出内部原理，主要还是对 nodejs，ES，JavaScript等技术不太熟悉，我的主要技能仍旧是 Python，Vue是空了就去学习学习，后面的用处会很大，比如一些 H5，小程序啥的，都有基于 Vue 的框架，一通百通。自己积累的还不够，没啥好分享的，不过发现一个最简单的方法实现网页背景色动态变化的方法，先看下效果：
代码非常简单，首先给要实现动态背景的 div 设置一个 class 名称，这里是 login-container，然后设置样式即可，代码如下：
代码语言：javascript复制<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了解更多用法。
使用这个方法，可以实现更加细致的控制，如下：
对应的代码如下：
代码语言：javascript复制<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>如果你觉得有用，或对你身边的人有用，请收藏、点赞或分享，感谢支持。
