我希望你们能帮助我以下。我想为我的网站中心动画，但知道很少的代码。目前我已经使用填充给予它正确的位置，但我想它自动居中，所以他们不会得到其他人的宽度不居中。下面是代码：
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link href='https://fonts.googleapis.com/css?family=Montserrat:100,200' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="Iam">
<strong> Chase</strong>
<b>
<div class="innerIam">
Perfection<span style="color:#8000FF;">.</span><br />
<br />
Innovation<span style="color:#8000FF;">.</span><br />
<br />
Creativity<span style="color:#8000FF;">.</span>
</div>
</b>
</div>
</body>
<style>
.Iam {
padding: 2em 5em;
font: normal 50px/50px Montserrat, sans-serif;
color: #ffffff;
}
.Iam strong {
height: 50px;
float: left;
margin-right: 0.3em;
}
.Iam b {
float: left;
overflow: hidden;
position: relative;
height: 50px;
top: 4px;
}
.Iam .innerIam {
display: inline-block;
color: #ffffff;
position: relative;
white-space: nowrap;
top: 0;
left: 0;
/*animation*/
-webkit-animation:move 5s;
-moz-animation:move 5s;
-ms-animation:move 5s;
-o-animation:move 5s;
animation:move 5s;
/*animation-iteration-count*/
-webkit-animation-iteration-count:infinite;
-moz-animation-iteration-count:infinite;
-ms-animation-iteration-count:infinite;
-o-animation-iteration-count:infinite;
animation-iteration-count:infinite;
/*animation-delay*/
-webkit-animation-delay:1s;
-moz-animation-delay:1s;
-ms-animation-delay:1s;
-o-animation-delay:1s;
animation-delay:1s;
}
@keyframes move{
0% { top: 0px; }
20% { top: -50px; }
40% { top: -100px; }
60% { top: -150px; }
80% { top: -200px; }
}
@-webkit-keyframes move {
0% { top: 0px; }
20% { top: -50px; }
40% { top: -100px; }
60% { top: -150px; }
80% { top: -200px; }
}
@-moz-keyframes move {
0% { top: 0px; }
20% { top: -50px; }
40% { top: -100px; }
60% { top: -150px; }
80% { top: -200px; }
}
@-o-keyframes move {
0% { top: 0px; }
20% { top: -50px; }
40% { top: -100px; }
60% { top: -150px; }
80% { top: -200px; }
}
@keyframes move {
0% { top: 0px; }
20% { top: -50px; }
40% { top: -100px; }
60% { top: -150px; }
80% { top: -200px; }
}
</style>
1条答案
按热度按时间6g8kf2rb1#
要使动画居中，可以使用CSS属性
"margin: auto"沿着动画容器的固定宽度。您可以尝试更新您的CSS：
您可以根据需要调整宽度值以适合您的动画。此外，您可以从
.Iamstrong中删除float属性，因为它不再需要了。