3D翻转+樱花背景 登录页21.02.25

AuroraTea · AuroraTea · commit 5f3cf9e98bc5 · 2021-04-23T16:41:24.000+08:00
1,修复了在正面会点到背面的bug 2,增加了悬停在登录注册按钮上时光标样式 https://www.bilibili.com/video/BV1cy4y1a7s7/
diff --git a/4-turnOverLogin/login.css b/4-turnOverLogin/login.css
@@ -88,6 +88,8 @@ input{
   outline: none;
   border: none;
   box-shadow: 0 4px 8px 0 rgba(78, 73, 79, .5);
+  transform-style: preserve-3d;
+  transform: translate3d(0, 0, 1px);
 }
 .login input:nth-child(-n+3){
   /* 选择class为login的子元素中的前三个input */
@@ -104,4 +106,5 @@ input{
   color: white;
   border-radius: 8px;
   margin-top: 15px;
+  cursor: pointer;
 }

Original file line number	Diff line number	Diff line change
`@@ -88,6 +88,8 @@ input{`
`88`	`88`	`outline: none;`
`89`	`89`	`border: none;`
`90`	`90`	`box-shadow: 0 4px 8px 0 rgba(78, 73, 79, .5);`
	`91`	`+ transform-style: preserve-3d;`
	`92`	`+ transform: translate3d(0, 0, 1px);`
`91`	`93`	`}`
`92`	`94`	`.login input:nth-child(-n+3){`
`93`	`95`	`/* 选择class为login的子元素中的前三个input */`
`@@ -104,4 +106,5 @@ input{`
`104`	`106`	`color: white;`
`105`	`107`	`border-radius: 8px;`
`106`	`108`	`margin-top: 15px;`
	`109`	`+ cursor: pointer;`
`107`	`110`	`}`