#头条创作挑战赛#
本文同步本人掘金平台的文章：https://juejin.cn/post/6953541325572538398
我们先看看实现的效果：
设计的初衷：
1. 简洁清爽
2. 重点突出
整个页面使用了一个渐变的背景色(这里直接使用了图片) ， 重要的内容居中显示，条款等内容右下角小字展示；整个站点以拂晓蓝色调为主 。
整个项目因为使用的是react ant design这种成熟的框架，所以几乎不需要自己额外写很多的样式 。
具体的框架结构不在本文涉及 。登陆界面的代码如下：
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.location.href = 'https://www.itzhengshu.com/'}, 1000)console.log(values)}const onFinishFailed = () => {notification.open({message: '登陆失败',description: '请您完善表单！',icon: 毛玻璃效果
什么是毛玻璃效果？- 背景模糊的磨砂玻璃效果
- 空间物体漂浮多层次
- 鲜艳的色彩突出模糊的透明度
- 半透明物体上有一个细微的光线边界
这些显著的特点使用户能更好的建立界面的深度和层次感 。因为它玻璃状的外观，业内称之为毛玻璃效果（glassmorphism） 。
具体实现代码，可看下面的demo：
.target {background: rgba(255, 255, 255, .7);-webkit-backdrop-filter: blur(10px);backdrop-filter: blur(10px);}复制代码浏览器兼容
如图，根据caniuse网站的数据，全世界超过88.3%的浏览器支持此特性 。如果Firefox决定默认启用这个属性 ， 并且随着过时浏览器（如 IE 11）的使用率下降，未来几年毛玻璃效果会得到更广泛的应用 。