我正在主页上尝试文本动画，但文本幻灯片无法工作。我尝试过其他方法，但跨度：以前似乎几乎可行。然而，我看到该代码确实适用于Sublime Text，但在Visual Studio中不适用。
CSS
body{
margin:0;
padding:0;
background-color: rgb(65, 51, 187);
font-family:Verdana, Tahoma, sans-serif;
}
.wrapper{
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
.wrapper h2{
padding: 0;
margin: 0;
color:#fff;
text-shadow: 0 2px 0 rgba(0,0,0,0.5);
font-size: 60px;
}
.wrapper p{
color: #fff;
font-size: 18px;
margin: 0;
line-height: 35px;
}
.wrapper a{
background: crimson;
color: #fff;
text-decoration: none;
padding: 10 px 25 px;
border-radius: 5px;
display: inline-block;
margin-top: 30px;
}
span::before{
content: '';
animation: animate infinite 8s;
}
@keyframes animate{
0% {
content: 'A programmer';
}
33%{
content: 'An architect';
}
66%{
content: 'A developer';
}100%
{
content: 'An Automater';
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href= "style3.css"
<title>Document</title>
</head>
<body>
<div class = "wrapper">
<h2>I am a <span></span></h2>
<p>This is a trial for working out sliding texts</p>
<a href="#">Contact me </a>
</div>
</body>
</html>我已经显示了内容，但它仍然不起作用。问题可能主要出现在之前的CSS Span:：中。我知道我可能错过了一些非常微小的东西。请协助。
更改伪元素的内容在某些浏览器中不起作用(例如IOS上的Safari(，因此这里有一种更通用的方法，可以设置span元素的不透明度动画。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href= "style3.css">
<title>Document</title>
<style>
body{
margin:0;
padding:0;
background-color: rgb(65, 51, 187);
font-family:Verdana, Tahoma, sans-serif;
}
.wrapper{
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
.wrapper h2{
padding: 0;
margin: 0;
color:#fff;
text-shadow: 0 2px 0 rgba(0,0,0,0.5);
font-size: 60px;
}
.wrapper p{
color: #fff;
font-size: 18px;
margin: 0;
line-height: 35px;
}
.wrapper a{
background: crimson;
color: #fff;
text-decoration: none;
padding: 10 px 25 px;
border-radius: 5px;
display: inline-block;
margin-top: 30px;
}
h2 div, h2 div span {
position: absolute;
display: inline-block;
overflow: visible;
white-space: nowrap;
}
span {
animation: animate infinite 8s;
animation-delay: calc((var(--n) - 1) * 2s);
position: absolute;
opacity: 0;
}
h2 span:nth-child(1) {
--n: 1;
}
h2 span:nth-child(2) {
--n: 2;
}
h2 span:nth-child(3) {
--n: 3;
}
h2 span:nth-child(4) {
--n: 4;
}
@keyframes animate{
0% {
opacity: 1;
}
25% {
opacity: 1;
}
25.1% {
opacity: 0;
}
100% {
opacity: 0;
}
}
</style>
</head>
<body>
<div class = "wrapper">
<h2>I am <div><span>A programmer</span><span>An architect</span><span>A developer</span><span>An automater</span></div></h2>
<p>This is a trial for working out sliding texts</p>
<a href="#">Contact me </a>
</div>
</body>
</html>