【发布时间】：2021-08-23 09:49:03
【问题描述】：
我想为 HTML 按钮的背景颜色和变换设置动画。当我使用动画时，还会显示开始动画。按钮的背景颜色是绿色，当我打开页面时，背景颜色从白色变为绿色。我不想要这个动画，但我仍然想在按钮悬停时保留动画。
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;600&display=swap');
:root {
--navbar-text-size: 18px;
--navbar-text-color: hsla(240, 100%, 99%, 1);
--background-color-A: hsla(160, 100%, 75%, 1);
--background-color-B: hsla(203, 92%, 75%, 1);
--navbar-background-color: hsla(0, 0%, 31%, 1);
--navbar-text-color-hover: hsla(195, 100%, 50%, 1);
--navbar-light-font-weight: 300;
--navbar-heavy-font-weight: 600;
--navbar-button-background-color: hsla(157, 100%, 49%, 1);
--navbar-button-background-color-hover: hsla(157, 100%, 49%, 0.8);
}
.body {
margin: 0px;
padding: 0px;
background: var(--background-color-A);
background: -webkit-linear-gradient(to right, var(--background-color-A), var(--background-color-B));
background: linear-gradient(to right, var(--background-color-A), var(--background-color-B));
box-sizing: border-box;
}
.body-header {
display: flex;
padding: 15px 10%;
align-items: center;
justify-content: space-between;
background-color: var(--navbar-background-color);
}
.body-header-h2 {
color: var(--navbar-text-color);
font-size: var(--navbar-text-size);
font-family: "Poppins", sans-serif;
font-weight: var(--navbar-heavy-font-weight);
text-decoration: none;
}
.body-header-nav-ul {
list-style: none;
}
.body-header-a-button {
color: var(--navbar-text-color);
border: none;
cursor: pointer;
padding: 9px 25px;
font-size: var(--navbar-text-size);
font-family: 'Poppins', sans-serif;
font-weight: var(--navbar-heavy-font-weight);
border-radius: 50px;
text-decoration: none;
background-color: var(--navbar-button-background-color);
transition-duration: 0.5s;
transition-property: transform, background-color;
-o-transition-duration: 0.5s;
-o-transition-property: transform, background-color;
-moz-transition-duration: 0.5s;
-moz-transition-property: transform, background-color;
-webkit-transition-duration: 0.5s;
-webkit-transition-property: transform, background-color;
}
.body-header-nav-ul-li {
color: var(--navbar-text-color);
display: inline-block;
padding: 0px 20px;
font-size: var(--navbar-text-size);
font-family: 'Poppins', sans-serif;
font-weight: var(--navbar-light-font-weight);
text-decoration: none;
}
.body-header-nav-ul-li-a {
color: var(--navbar-text-color);
font-size: var(--navbar-text-size);
font-family: 'Poppins', sans-serif;
font-weight: var(--navbar-light-font-weight);
text-decoration: none;
}
.body-header-a-button:hover {
transform: scale(0.95);
background-color: var(--navbar-button-background-color-hover);
/* transition-duration: 0.5s;
transition-property: all;
-o-transition-duration: 0.5s;
-o-transition-property: all;
-moz-transition-duration: 0.5s;
-moz-transition-property: all;
-webkit-transition-duration: 0.5s;
-webkit-transition-property: all; */
}
.body-header-nav-ul-li-a:hover {
color: var(--navbar-text-color-hover);
transition-property: color;
transition-duration: 0.5s;
}<body class="body">
<header class="body-header">
<h2 class="body-header-h2">
Test
</h2>
<nav class="body-header-nav">
<ul class="body-header-nav-ul">
<li class="body-header-nav-ul-li">
<a href="/" class="body-header-nav-ul-li-a">
Test1
</a>
</li>
<li class="body-header-nav-ul-li">
<a href="/about" class="body-header-nav-ul-li-a">
Test2
</a>
</li>
<li class="body-header-nav-ul-li">
<a href="/join" class="body-header-nav-ul-li-a">
Test3
</a>
</li>
<li class="body-header-nav-ul-li">
<a href="/releases" class="body-header-nav-ul-li-a">
Test4
</a>
</li>
</ul>
</nav>
<a href="/login" class="body-header-a">
<button class="body-header-a-button">
Button
</button>
</a>
</header>
</body>【问题讨论】：
-
我编辑了你的页面。您可以从整页视图查看翻译。顺便说一句，我不被认为是熟练的前端，但我什至不这样做：
<body class="body">:)