如何解决CSS：野生动物园动画问题
发布之前，我已阅读：
好的，我正在构建一个css按钮，某些问题仅在Safari中出现。
body{
margin: 0;
padding: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(-30deg,#1ec4e9 0%,#673ab7 50%,#262626 50%,#607d8b 100%);
}
a{
position: relative;
padding: 25px 50px;
text-decoration: none;
color: #fff;
font-size: 2em;
text-transform: uppercase;
font-family: sans-serif;
letter-spacing: 4px;
overflow: hidden;
background: rgba(255,255,.1);
Box-shadow: 0 5px 5px rgba(0,.2);
}
a::before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
background: rgba(255,.1);
}
a::after{
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg,transparent,rgba(255,.4),transparent);
transition: 0.5s;
}
a:hover::after{
left: 100%;
}
a span{
position: absolute;
display: block;
transition: 0.5s ease;
}
a span:nth-child(1){
top: 0;
left: 0;
width: 0;
height: 1px;
background: #fff;
}
a:hover span:nth-child(1){
width: 100%;
transform: translateX(100%);
}
a span:nth-child(3){
bottom: 0;
right: 0;
width: 0;
height: 1px;
background: #fff;
}
a:hover span:nth-child(3){
width: 100%;
transform: translateX(-100%);
}<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a href='#'>
<span></span>
<span></span>
<span></span>
<span></span>
Button
</a>
</body>
</html> -webkit-transform: translateX(-100%);
-o-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-moz-transform: translateX(-100%);
，但仍然无法正常工作。有人可以提供一些建议，我希望Safari提供与chrome相同的结果。
更新
自从我尝试过以来，这肯定是一个优先事项：
body{
margin: 0;
padding: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(-30deg,transparent);
-webkit-transition: 2s;
}
a:hover::after{
left: 100%;
}
a span{
position: absolute;
display: block;
-webkit-transition: 2s ease;
}
a span:nth-child(1){
position: relative;
top: 0;
left: 0;
width: 0;
height: 1px;
background: #fff;
}
a:hover span:nth-child(1){
width: 100%;
-webkit-transform: translateX(100%);
}<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a href='#'>
<span></span>
<span></span>
<span></span>
<span></span>
Button
</a>
</body>
</html>解决方法
将其制作成阴影（在::after中），使用left或right：
a:hover span:nth-child(1){
width: 100%;
/*-webkit-transform: translateX(100%);*/
left:100%;
}
a:hover span:nth-child(3){
width: 100%;
/*transform: translateX(-100%);*/
right: 100%;
}
演示（1）：
body{
margin: 0;
padding: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(-30deg,#1ec4e9 0%,#673ab7 50%,#262626 50%,#607d8b 100%);
}
a{
position: relative;
padding: 25px 50px;
text-decoration: none;
color: #fff;
font-size: 2em;
text-transform: uppercase;
font-family: sans-serif;
letter-spacing: 4px;
overflow: hidden;
background: rgba(255,255,.1);
box-shadow: 0 5px 5px rgba(0,.2);
}
a::before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
background: rgba(255,.1);
}
a::after{
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg,transparent,rgba(255,.4),transparent);
transition: 0.5s;
}
a:hover::after{
left: 100%;
}
a span{
position: absolute;
display: block;
transition: 0.5s ease;
}
a span:nth-child(1){
top: 0;
left: 0;
width: 0;
height: 1px;
background: #fff;
}
a:hover span:nth-child(1){
width: 100%;
/*transform: translateX(100%);*/
left: 100%;
}
a span:nth-child(3){
bottom: 0;
right: 0;
width: 0;
height: 1px;
background: #fff;
}
a:hover span:nth-child(3){
width: 100%;
/*transform: translateX(-100%);*/
right: 100%;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a href='#'>
<span></span>
<span></span>
<span></span>
<span></span>
Button
</a>
</body>
</html>
演示（更新）：
body{
margin: 0;
padding: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(-30deg,transparent);
-webkit-transition: 2s;
}
a:hover::after{
left: 100%;
}
a span{
position: absolute;
display: block;
-webkit-transition: 2s ease;
}
a span:nth-child(1){
position: relative;
top: 0;
left: 0;
width: 0;
height: 1px;
background: #fff;
}
a:hover span:nth-child(1){
width: 100%;
/*-webkit-transform: translateX(100%);*/
left:100%;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a href='#'>
<span></span>
<span></span>
<span></span>
<span></span>
Button
</a>
</body>
</html>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。