gpt4 book ai didi

html - CSS 兄弟选择器没有动画

转载 作者:太空宇宙 更新时间:2023-11-04 14:53:38 25 4
gpt4 key购买 nike

<分区>

我正在尝试制作 <p> 的动画在其 sibling 上标记 <input>focus但它不会起作用。

我在下面做了一个代码笔。

我也不想使用 Javascript 作为解决方案。

https://codepen.io/ItsBrianAgar/pen/YrGVxW?editors=0100

HTML

<html lang="en"></html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700,900" rel="stylesheet"/>
<link href="assets/css/main.css" type="text/css" rel="stylesheet"/>
<title>myCoffee</title>
</head>
<body>
<main class="appContainer">
<div class="app">
<div class="sectionLogin">
<div class="logo"><img src="assets/images/logo.svg" alt="logo"/></div>
<div class="inputLogin">
<div class="textField"></div>
<div class="textField">
<p id="username">Username</p>
<input type="text" name="username"/>
</div>
<div class="textField">
<p id="password">Password</p>
<input type="password" name="password"/>
</div>
</div>
<div class="btnLogin">
<button>LOGIN</button>
</div>
<div class="btnSignup">
<button>SIGN UP</button>
</div>
</div>
</div>
</main>
</body>

CSS

  input[name="username"]:focus ~ #username {
perspective: 1000;
transform: translate3d(-50%, 30px, 0);
opacity: 0;
transition: all 150ms ease-out; }
input[name="password"]:focus ~ #password {
perspective: 1000;
transform: translate3d(-50%, 30px, 0);
opacity: 0;
transition: all 150ms ease-out; }

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com