简洁设计-毛玻璃效果登陆页面

发布于

我们先看看实现的效果：

banner.png

设计的初衷：

1. 简洁清爽

2. 重点突出

整个页面使用了一个渐变的背景色(这里直接使用了图片)，重要的内容居中显示，条款等内容右下角小字展示；整个站点以拂晓蓝色调为主。

整个项目因为使用的是react ant design这种成熟的框架，所以几乎不需要自己额外写很多的样式。

具体的框架结构不在本文涉及。登陆界面的代码如下：

代码语言：javascript
复制
import { useState } from "react";
import * as React from "react";
import BlankLayout from '../../layout/BlankLayout/index';
import Logo from '../../components/Logo/index';
import { Form, Input, Button, Card, notification } from 'antd';
import { FrownOutlined } from '@ant-design/icons';

const layout = {

labelCol: { span: 5 },

wrapperCol: { span: 18 },

};


const tailLayout = {

wrapperCol: { offset: 5, span: 18 },

};


const LoginForm = () => {

const [loading, setLoading] = useState(false);


const onFinish = (values: any) => {

setLoading(true);

setTimeout(() => {

setLoading(false)

window.kk = '/'

}, 1000)

console.log(values)

}

const onFinishFailed = () => {

notification.open({

message: '登陆失败',

description: '请您完善表单！',

icon: <FrownOutlined style={{ color: '#ff4d4f' }} />

});

}


return (

<Card style={{ background: 'rgba(255, 255, 255, .3)', backdropFilter: 'blur(10px)' }}>

<Card.Grid style={{width: '100%'}}>

<Logo />

<Form

{...layout}

onFinish={onFinish}

onFinishFailed={onFinishFailed}

style={{ width: '480px', padding: '40px 0 0 20px'}}

>

<Form.Item

label="账号"

name="username"

rules={[{ required: true, message: '请输入!' }]}

>

<Input />

</Form.Item>


        &lt;Form.Item
          label=&#34;密码&#34;
          name=&#34;password&#34;
          rules={[{ required: true, message: &#39;请输入!&#39; }]}
        &gt;
          &lt;Input.Password /&gt;
        &lt;/Form.Item&gt;

        &lt;Form.Item {...tailLayout}&gt;
          &lt;Button loading={loading} type=&#34;primary&#34; htmlType=&#34;submit&#34; style={{width: &#39;100%&#39;}}&gt;
            登陆
          &lt;/Button&gt;
        &lt;/Form.Item&gt;
    &lt;/Form&gt;
  &lt;/Card.Grid&gt;
&lt;/Card&gt;



)

}


export function Login() {


return (

<>

<BlankLayout

contents={<LoginForm />} />

</>

)

}

毛玻璃效果

什么是毛玻璃效果？

  • 背景模糊的磨砂玻璃效果

  • 空间物体漂浮多层次
  • 鲜艳的色彩突出模糊的透明度
  • 半透明物体上有一个细微的光线边界

等。下图更能体现这种效果：

这些显著的特点使用户能更好的建立界面的深度和层次感。因为它玻璃状的外观，业内称之为毛玻璃效果（glassmorphism）。

具体实现代码，可看下面的demo：

代码语言：javascript
复制
.target {
  background: rgba(255, 255, 255, .7);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

浏览器兼容

support.png

如图，根据caniuse网站的数据，全世界超过88.3%的浏览器支持此特性。如果Firefox决定默认启用这个属性，并且随着过时浏览器（如 IE 11）的使用率下降，未来几年毛玻璃效果会得到更广泛的应用。

后话

  • 更多的内容：https://github.com/reng99/blogs
#react#ant#firefox