背景动态变化登陆界面

效果图

JS

import styles from './style.less'
const index = () =>
{return (<div className={styles.wrap}><div className={styles.container}><div className={styles.title}>登陆</div><input type="text" placeholder='账号' /><input type="password" placeholder='密码' /><button>登陆</button><span>没有账号？<a href="JavaScript:;">去注册</a></span></div><div className={styles.square}><ul ><li></li><li></li><li></li><li></li><li></li></ul></div><div className={styles.circle}><ul ><li></li><li></li><li></li><li></li><li></li></ul></div></div>);
};
export default index

.wrap {width: 100%;height: 100%;position: relative;// 窗口高度height: 100vh;display: flex;// 弹性布局 居中justify-content: center;align-items: center;// 背景渐变background: linear-gradient(200deg, #e3c5eb, #a9c1ed);// 溢出隐藏overflow: hidden;.container {// 相对定位position: relative;display: flex;flex-direction: column;align-items: center;width: 350px;height: 500px;background-color: white;border-radius: 15px;// 阴影box-shadow: 0 5px 20px rgba(0, 0, 0, .1);z-index: 1;.title {font-size: 26px;margin: 65px auto 70px auto;}input {width: 280px;height: 30px;text-indent: 8px;border: none;border-bottom: 1px solid #ddd;outline: none;margin: 12px auto;}button {width: 280px;height: 40px;margin: 35px auto 40px auto;border: none;background: linear-gradient(-200deg, #fac0e7, #aac2ee);color: #fff;font-weight: bold;letter-spacing: 8px;border-radius: 10px;cursor: pointer;// 动画过度transition: .5s;&:hover {background: linear-gradient(-200deg, #aac2ee, #f2c0e7);background-position-x: -280px;}}span {font-size: 14px;a {color: plum;text-decoration: none;}}}ul li {position: absolute;border: 1px solid #fff;background-color: #fff;width: 30px;height: 30px;list-style: none;// opacity: 0;}.square li {top: 40vh;left: 60vw;// 执行动画 动画名称 时长 线性 无限次animation: square 10s linear infinite;}.square li:nth-child(2) {top: 80vh;left: 10vh;// 动画延时时间animation-delay: 2s;}.square li:nth-child(3) {top: 80vh;left: 85vw;// 动画延时时间animation-delay: 4s;}.square li:nth-child(4) {top: 10vh;left: 70vw;// 动画延时时间animation-delay: 6s;}.square li:nth-child(5) {top: 10vh;left: 10vw;// 动画延时时间animation-delay: 8s;}.circle li {bottom: 0;left: 15vw;// 执行动画animation: circle 10s linear infinite;}.circle li:nth-child(2) {left: 35vw;// 动画延时时间animation-delay: 2s;}.circle li:nth-child(3) {left: 55vw;// 动画延时时间animation-delay: 4s;}.circle li:nth-child(4) {left: 75vw;// 动画延时时间animation-delay: 6s;}.circle li:nth-child(5) {left: 90vw;// 动画延时时间animation-delay: 8s;}// 定义动画@keyframes square {0% {transform: scale(0) rotateY(0deg);opacity: 1;}100% {transform: scale(5) rotateY(1000deg);opacity: 0;}}@keyframes circle {0% {transform: scale(0) rotateY(0deg);opacity: 1;bottom: 0;border-radius: 0;}100% {transform: scale(5) rotateY(1000deg);opacity: 0;bottom: 90vh;border-radius: 50%;}}}

背景动态变化登陆界面相关推荐

导航背景变换 php,jQuery实现的背景动态变化导航菜单效果
本文实例讲述了jQuery实现的背景动态变化导航菜单效果.分享给大家供大家参考.具体如下: 这里介绍一款使用jQuery插件制作完成的导航菜单,一大特点是,菜单的背景有动态效果,与使用的背景图片完全变 ...
荣耀手机怎么修改计算机的背景,王者荣耀登陆界面怎么修改登录背景替换方法...
这几天在抖音上看到有人居然修改了王者荣耀的登录界面,看着还是非常酷炫的呢,作为玩家的话也想要修改,不知道怎么替换的话可以看下面的教程. 类别:图片拍照大小:4.12M 语言:简体中文评分 ...
java 验证码添加背景图_java登陆界面怎么加背景图会的我加你
publicvoiduserInit(){this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);//设置关闭框架的同时结束程序this.setSize ...
怎么显示全部背景图片_Windows 聚焦图片在锁屏界面和登陆界面没有显示
一. Windows 聚焦图片在锁屏界面和登陆界面没有显示首先请确定设置中聚焦功能是否已经打开.打开设置-个性化-锁屏界面,确定一下背景下拉框选项是否已经设置为Windows聚焦.同时设置" ...
如何更换 macOS Mojave 登陆界面背景图？
相信用着 macOS Mojave 系统的小伙伴们都对下面这张沙漠的壁纸很熟悉了. 这张壁纸作为 macOS Mojave 系统的原始壁纸,既是桌面壁纸,也是开机登陆界面的背景图,看得久了,确实有点腻 ...
hana修改字段_自定义SAP HANA登陆界面背景
大家好,在这篇文章里,笔者将和大家分享如何自定义SAP HANA登陆界面背景.过程很简单,只需三步即可完成.在SAP HANA SPS08里面,我们是不能修改登陆界面背景的.所以,每次访问XS应用的时 ...
java主界面设置背景图片_java 窗体设置背景图片问题?(附上登陆界面代码，我想加个背景图片，求大神帮忙改改)...
java 窗体设置背景图片问题?(附上登陆界面代码,我想加个背景图片,求大神帮忙改改) 关注:223 答案:4 mip版解决时间 2021-01-26 22:09 提问者非莪莫属 2021-01 ...
C# WinForm窗体制作以图片为背景的登陆界面
一.Form窗体 1.标题栏不显示 FormBorderStyle = None; 2.任务栏不显示 ShowInTaskbar = false; 3.关闭按钮不显示 ControlBox = fal ...
kali 2.0修改gnome登陆界面背景图片
2019独角兽企业重金招聘Python工程师标准>>> 最近KALI发布了2.0版本,我更新失败了,就直接重装了. 图片看着不爽,想要换下,桌面背景和锁屏背景直接桌面右键就可以修改, ...

背景动态变化登陆界面

效果图

JS

背景动态变化登陆界面相关推荐

最新文章

热门文章