我正在看一个在线视频（https://www.youtube.com/watch?v=wjhtklstbrg），想要制作一个看起来很酷的按钮，我快到了，它没有做它应该做的事情，我已经做了它告诉我的所有事情，甚至还看了5遍视频来检查所有事情，请帮忙！ 下面是我的代码:
<!DOCTYPE html>
<html lang="en">
<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">
<title>Document</title>
</head>
<body>
<a href="#">
<span>Button</span>
<div class="liquid"></div>
</a>
</body>
</html>
<style>
@keyframes fade {
0% {
transform translate(-50%,-75%) rotate(0deg);
}
100% {
transform translate(-50%,-75%) rotate(360deg);
}
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Open Sans', sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #24252A;
}
a {
position: relative;
padding: 20px 50px;
display: block;
text-decoration: none;
text-transform: uppercase;
width: 200px;
overflow: hidden;
}
a span {
position: relative;
z-index: 1;
color: #fff;
font-size: 20px;
letter-spacing: 8px;
}
a .liquid {
position: absolute;
left: 0;
top: -80px;
width: 200px;
height: 200px;
background: #4973ff;
box-shadow: inset 0 0 50px rgba(0,0,0,.5);
transition: 0.5s;
}
a .liquid:before,
a .liquid:after {
content: "";
position: absolute;
width: 200%;
height: 200%;
top: 0;
left: 50%;
transform: translate(-50%,-75%);
}
a .liquid:before {
border-radius: 45%;
background: rgba(20,20,20,1);
-webkit-animation: fade 5s linear infinite;
}
a .liquid:after {
border-radius: 40%;
background: rgba(20,20,20,1);
-webkit-animation: fade 10s linear infinite;
}
</style>
转换的格式为transform:noneTransform-FunctionsInitialInherit；，因此将其更改为:
@keyframes fade {
0% {
transform : translate(-50%,-75%) rotate(0deg);
}
100% {
transform : translate(-50%,-75%) rotate(360deg);
}
}
