本次分享的是网页端的UI动效，有兴趣的小伙伴可以一起来看看，记得评价哦~
本次教程只提供UI动效的设计方法，如需整套登录模板找我
这套界面设计的还行，配色很到位，本人又多加了个底部的动态效果，这样更大气了。
我们先分离参考下底部动态效果：
只有底部动态效果，静态的图都可以当做登录背景用了
好的，我们直接开始：
① 先来看看原本的样子：
这个是原本的效果，本人改后更流行美观化
大家如果需要这个模板的话可以自行去参考：
（演示地址）http://layuimini.99php.cn/iframe/v2/page/login-1.html
（外站官网）http://layuimini.99php.cn/
② 直接改造，首先我们先去看看新动效效果
新动态效果GIF
可以看到效果还是不错的，我们要迁移到那个界面
【注意：下面的是less编写的CSS，不能直接用】
（动态效果）https://juejin.im/post/6844903566298054670
③ 开始迁移，我们先来把代码转换为CSS
（在线 LESS ->CSS 编译器）https://tool.oschina.net/less
复制处理后的代码然后用就按流程走
④ 新建HTML文件，弄好<html><head><body><style>标签
把转换后的代码放入style就行，效果是这样
第一张
第二张
【注意：说明已经很详细了，需要定义10个 li 列表标签】
但是我们访问后会出现空白，因为他在下面补充一下，最外层父容器的背景颜色的代码：
background: linear-gradient(to bottom right, #50A3A2, #53E3A6);
这个代码是全局背景颜色，故应该新建个html, body{}的css样式，然后复制进去
复制进去后你一访问，感觉还行。但是还没完成任务！！
出现了滑动条影响了美观，这时候怎么办？
前面我们已经定义了一个新的html,body{}
那翻译过来就是：给html代码里面的body代码区域全部的属性呗，那我们直接就写属性就行：
overflow是滚动条属性，用hidden就隐藏了
height是高度，100%就是充满整个屏幕区域
同理高度也是
html, body { padding: 0; margin: 0; height: 100%; overflow:hidden; background: linear-gradient(to bottom right, #1E9FFF, #1E9FFF);}
好的，这样我们就可以得到完美的动态背景啦~
⑤ 接下来是对接登录界面
【注意：之前的登录界面有动效css代码，我们需要删除，这个得自己找了】
【建议去看看link过来的css或者spirit来的js里面，一般有个main的标志】
我们先把登录界面的html,body{}样式属性删了避免等下复制冲突
然后我们在<style>或者css文件内加入刚刚的代码
记住我们一定要在已有的代码后面加，这样方便查
然后我们在背景设计中有10个li标签，我们直接在登录界面的body内引用
这次直接放顶部，因为怕底部有冲突会遮挡
ok，这样我们就大工告成了，我们来看看效果。
一对比是不是效果会更好点，当然这个底部的效果我们也可以参考到自己的界面中。
这个具体的动效源头可以自己去研究下，如果有不懂的可以随时问我，另外我也接改界面的哦~
【原创编写：QQ2135820046 | ceo@6661314.xyz】
【交流群：727376308】
———————————————————————— 欢迎投稿建议，期待你们哦~
网友评论