前言

有个漂亮的背景当登录页，或者博客的背景，是很高大上的3维效果。给大家看下截图

效果

不好录个评，给大家上代码，直接放到本地新建个HTML就可以。然后直接浏览器打开，不然看不到效果哈。

<html lang="en" class="page-fill">
<head>
    <meta charset="UTF-8">
    <title>一个漂亮的背景</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 
    <link rel="shortcut icon" href="https://tenant.cloudbed.vip/images/favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="https://tenant.cloudbed.vip/css/login_style.css"/>
    <link rel="stylesheet" href="https://tenant.cloudbed.vip/css/login_reset.css"/>
</head>
<body>
<div id="particles-js">
    
    <div class="sk-rotating-plane"></div>
</div>
<script src="https://tenant.cloudbed.vip/js/particles.min.js"></script>
<script src="https://tenant.cloudbed.vip/js/app.js"></script>
<script src="https://tenant.cloudbed.vip/lib/layui/layui.js"></script>
<script>
layui.use(["okUtils", "okLayer"], function () {
    $ = layui.jquery;
    var okUtils = layui.okUtils;
    okLayer = layui.okLayer;    
    $("body").keyup(function(event){
       if(event.keyCode==13) {
           $(".login-button").click();
       }
    });
});
</script>
</body>
</html>

拆解

代码如上，用到的就是LayUI的布局，加上一些CSS样式处理。很喜欢这种效果，代码我也直接down到本地了。

总结

单纯从前端的样式收集，这个效果可以收集记录下来，挺好的效果。一起加油吧~~

前端布局收集精美背景，做登录页很合适layUI

前言

效果

拆解

总结