Fatal编程技术网
  • html/
  • Html 关键帧不显示所有项目

Html 关键帧不显示所有项目

html css

Html 关键帧不显示所有项目,html,css,css-animations,keyframe,Html,Css,Css Animations,Keyframe,我有一个简单的文本滑块，其中包含5个元素，不幸的是，幻灯片只显示了三个项目 这是我的JSFIDLE： 这是我到目前为止的HTML <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" type="text/css" href="s

我有一个简单的文本滑块，其中包含5个元素，不幸的是，幻灯片只显示了三个项目

这是我的JSFIDLE：

这是我到目前为止的HTML

<!DOCTYPE html>
<html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" type="text/css" href="styles.css">
    </head>
    <body>
      <div class="content">
        <div class="slider-wrapper">
          I can write
          <div class="slider">
              <div class="slider-text1">HTML</div>
              <div class="slider-text2">Java</div>
              <div class="slider-text3">PHP</div>
              <div class="slider-text4">SOCIAL.</div>
              <div class="slider-text5">LOUD.</div>
          </div>
        </div>       
      </div>
    </body>
我需要在代码中更改什么，以便所有元素都显示在滑块中？任何帮助或建议都将不胜感激。

更改您的css代码

html,body {
  margin: 0;
  width: 100%;
  height: 100%;
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
}
.content {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.slider-wrapper {
  font-size: 40px;
  color:#aaa;
  font-weight: bold;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
}
.slider{
  height: 50px;
  padding-left:15px;
  overflow: hidden;
}
.slider div {
  color:#fff;
  height: 50px;
  margin-bottom: 50px;
  padding: 2px 15px;
  text-align: center;
  box-sizing: border-box;
}
.slider-text1 {
background: lightgreen;
animation: slide 3s linear infinite;
}
.slider-text2 {
  background: skyblue;
}
.slider-text4 {
  background: lightcoral;
}
.slider-text3 {
  background: green;
}
.slider-text5 {
  background: orange;
}
@keyframes slide {
  0% {margin-top:-500px;}
  20% {margin-top:-400px;}
  40% {margin-top:-300px;}
  60% {margin-top:-200px;}
  80% {margin-top:-100px;}
  100% {margin-top:0px;}
}

html，正文{
保证金：0；
宽度：100%；
身高：100%；
字体系列：“富兰克林哥特式中”、“Arial窄”、Arial、无衬线；
}
.内容{
宽度：100vw；
高度：100vh；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
.滑块包装器{
字体大小：40px；
颜色：#aaa；
字体大小：粗体；
文本转换：大写；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
.滑块{
高度：50px；
左侧填充：15px；
溢出：隐藏；
}
.滑杆组{
颜色：#fff；
高度：50px；
边缘底部：50px；
填充：2x15px；
文本对齐：居中；
框大小：边框框；
}
.slider-text1{
背景：浅绿色；
动画：幻灯片4s线性无限；
}
.1.2.2{
背景：天蓝色；
}
.3.3{
背景：轻珊瑚；
}
.1-text4{
背景：绿色；
}
.滑动条-文本5{
背景：橙色；
}
@关键帧滑动{
0%{页边距顶部：-500px；}
8%{利润率顶部：-500px；}
16%{利润率最高：-400px；}
24%{利润率最高：-400px；}
32%{利润率最高：-300px；}
40%{利润率最高：-300px；}
48%{利润率顶部：-200px；}
56%{利润率最高：-200px；}
64%{利润率最高：-100px；}
72%{利润率最高：-100px；}
80%{页边距顶端：0px；}
88%{页边距顶部：0px；}
}

我会写字
HTML
CdfddfSS
PHP
社会的。
大声的
让我检查一下，我回来时不工作。文本在没有姿势的情况下滑动，滑块应该作为我的演示使用，但是我想要5个元素，而不是3个元素。你签出了吗？ 
html,body {
  margin: 0;
  width: 100%;
  height: 100%;
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
}
.content {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.slider-wrapper {
  font-size: 40px;
  color:#aaa;
  font-weight: bold;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
}
.slider{
  height: 50px;
  padding-left:15px;
  overflow: hidden;
}
.slider div {
  color:#fff;
  height: 50px;
  margin-bottom: 50px;
  padding: 2px 15px;
  text-align: center;
  box-sizing: border-box;
}
.slider-text1 {
background: lightgreen;
animation: slide 3s linear infinite;
}
.slider-text2 {
  background: skyblue;
}
.slider-text4 {
  background: lightcoral;
}
.slider-text3 {
  background: green;
}
.slider-text5 {
  background: orange;
}
@keyframes slide {
  0% {margin-top:-500px;}
  20% {margin-top:-400px;}
  40% {margin-top:-300px;}
  60% {margin-top:-200px;}
  80% {margin-top:-100px;}
  100% {margin-top:0px;}
}