在尝试提供易于理解的用户界面和进行大量设计更改时，我遇到了很多问题，但是直到最近，transition属性仍在起作用。
@charset "UTF-8";.header{top:0;position: fixed;right: 0;left:0;background: #555;height: 50pt;border-top: 4pt solid #333;box-shadow: 0 0 5pt #000}.header-menu{vertical-align: top;margin-top: -12pt;}.header-menu ul li{list-style: none;display: inline}.header-menu ul li a{color:#fff;display: inline-block;line-height: 50pt;padding: 0 10pt;text-decoration: none;transition: all .60s cubic-bezier(0.075, 0.82, 0.165, 1);-webkit-transition: all .60s cubic-bezier(0.075, 0.82, 0.165, 1);-moz-transition: all .60s cubic-bezier(0.075, 0.82, 0.165, 1);-ms-transition: all .60s cubic-bezier(0.075, 0.82, 0.165, 1);-o-transition: all .60s cubic-bezier(0.075, 0.82, 0.165, 1);}.header-menu ul li a:hover{background-color: rgba(0, 0, 0, 0.05)}<!doctype html><html lang="en-GB" style="">
<head>
<base href="http://localhost/">
<!-- <base href="http://www.icodefoundation.com/"> -->
<meta charset="UTF-8" /><meta http-equiv="refresh" content="60" /><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" type="text/css" href="Public/Assets/Styling/All.css" />
<title>iCode Foundation</title>
</head>
<body>
<div class="header header-desktop header-mobile-compatible">
<div class="header-menu global-menu-styling" role="menu">
<ul>
<li role="menuitem"><a href="/PHP">Home</a></li>
<!-- <li role="menuitem"><a href="javascript:void(0)">About</a></li> -->
<li><a href="javascript:void(0)">Volunteer</a></li>
<!--<li role="menuitem"><a href="javascript:void(0)">Reports</a></li>-->
</ul>
</div>
</div>
<div class="wrapper">
<div class="content_0">
<div class="same-styling override-same-styles" id="forms">
<h1>Getting Started</h1>
Either register or login below to get started.<br>To read more about this website, click <a href="javascript:void(0)">here</a> if you'd like before continuing.
<div class="form-wrapper"><div class="login divs-inline">
<h2>Login</h2>
<!-- Login Start -->
<form method="POST" action="index.php" role="form">
<div class="inputs"><div class="errors"></div>
<input type="text" name="login-uname" placeholder="Username" autocomplete="off">
<input type="password" name="login-pswd" placeholder="Password" autocomplete="off">
<button type="submit" role="button" name="login-btn">Login</button>
</div>
</form>
<!-- Login End -->
</div>
<div class="register divs-inline">
<h2>Register</h2>
<!-- Register Start -->
<form method="POST" action="index.php" role="form">
<div class="inputs">
<div class="errors"></div>
<input type="text" name="reg-fname" placeholder="Forename" autocomplete="off"class="fname">
<input type="text" name="reg-lname" placeholder="Surname" autocomplete="off" class="lname">
<input type="text" name="reg-uname" placeholder="Username" autocomplete="off">
<input type="text" name="reg-email" placeholder="Email" autocomplete="off">
<input type="text" name="reg-confirm-email" placeholder="Confirm Email" autocomplete="off">
<input type="password" name="reg-pswd" placeholder="Password" autocomplete="off">
<input type="password" name="reg-confirm-pswd" placeholder="Confirm Password" autocomplete="off">
<button type="submit" role="button" name="reg-btn">Register</button>
</div>
</form>
<!-- Register End -->
</div>
</div>
</div>
</div>
</div>我只能为无法理解的代码道歉。
最佳答案
它是持续时间短，色阶短和立方贝塞尔曲线的组合，使它看起来像不起作用。
在这里，我更改了所有参数，因此您可以看到它确实有效。
注意，始终将非前缀属性放在最后
@charset "UTF-8";
.header {
top: 0;
position: fixed;
right: 0;
left: 0;
background: #555;
height: 50pt;
border-top: 4pt solid #333;
box-shadow: 0 0 5pt #000
}
.header-menu {
vertical-align: top;
margin-top: -12pt;
}
.header-menu ul li {
list-style: none;
display: inline
}
.header-menu ul li a {
color: #fff;
display: inline-block;
line-height: 50pt;
padding: 0 10pt;
text-decoration: none;
-webkit-transition: all .60s cubic-bezier(0.075, 0.82, 0.165, 1);
-moz-transition: all .60s cubic-bezier(0.075, 0.82, 0.165, 1);
-ms-transition: all .60s cubic-bezier(0.075, 0.82, 0.165, 1);
-o-transition: all .60s cubic-bezier(0.075, 0.82, 0.165, 1);
transition: all 1.60s;
}
.header-menu ul li a:hover {
background-color: rgba(0, 0, 0, .25);
}<!doctype html>
<html lang="en-GB" style="">
<head>
<base href="http://localhost/">
<!-- <base href="http://www.icodefoundation.com/"> -->
<meta charset="UTF-8" />
<meta http-equiv="refresh" content="60" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" type="text/css" href="Public/Assets/Styling/All.css" />
<title>iCode Foundation</title>
</head>
<body>
<div class="header header-desktop header-mobile-compatible">
<div class="header-menu global-menu-styling" role="menu">
<ul>
<li role="menuitem"><a href="/PHP">Home</a></li>
<!-- <li role="menuitem"><a href="javascript:void(0)">About</a></li> -->
<li><a href="javascript:void(0)">Volunteer</a></li>
<!--<li role="menuitem"><a href="javascript:void(0)">Reports</a></li>-->
</ul>
</div>
</div>
<div class="wrapper">
<div class="content_0">
<div class="same-styling override-same-styles" id="forms">
<h1>Getting Started</h1>Either register or login below to get started.<br>To read more about this website, click <a href="javascript:void(0)">here</a> if you'd like before continuing.
<div class="form-wrapper">
<div class="login divs-inline">
<h2>Login</h2>
<!-- Login Start -->
<form method="POST" action="index.php" role="form">
<div class="inputs">
<div class="errors"></div><input type="text" name="login-uname" placeholder="Username" autocomplete="off"><input type="password" name="login-pswd" placeholder="Password" autocomplete="off"><button type="submit" role="button" name="login-btn">Login</button></div>
</form>
<!-- Login End -->
</div>
<div class="register divs-inline">
<h2>Register</h2>
<!-- Register Start -->
<form method="POST" action="index.php" role="form">
<div class="inputs">
<div class="errors"></div><input type="text" name="reg-fname" placeholder="Forename" autocomplete="off" class="fname"><input type="text" name="reg-lname" placeholder="Surname" autocomplete="off" class="lname"><input type="text" name="reg-uname" placeholder="Username"
autocomplete="off"><input type="text" name="reg-email" placeholder="Email" autocomplete="off"><input type="text" name="reg-confirm-email" placeholder="Confirm Email" autocomplete="off"><input type="password" name="reg-pswd" placeholder="Password"
autocomplete="off"><input type="password" name="reg-confirm-pswd" placeholder="Confirm Password" autocomplete="off"><button type="submit" role="button" name="reg-btn">Register</button></div>
</form>
<!-- Register End -->
</div>
</div>
</div>
</div>
</div>关于html - CSS过渡是即时的，不会逐渐消失，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45896706/