个人中心
文章发布
退出
作者热门文章
- android - RelativeLayout 背景可绘制重叠内容
- android - 如何链接 cpufeatures lib 以获取 native android 库？
- java - OnItemClickListener 不起作用，但 OnLongItemClickListener 在自定义 ListView 中起作用
- java - Android 文件转字符串
25
4
我有一个包含 5 个元素的简单文本 slider ，不幸的是，幻灯片只显示了三个元素。
这是我的 jsfiddle:live demo
到目前为止，这是我的 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-text3 {
background: lightcoral;
}
.slider-text4 {
background: green;
}
.slider-text5 {
background: orange;
}
@keyframes slide {
0% {margin-top:-300px;}
5% {margin-top:-200px;}
33% {margin-top:-200px;}
38% {margin-top:-100px;}
66% {margin-top:-100px;}
71% {margin-top:0px;}
100% {margin-top:0px;}
}
我需要在我的代码中更改什么才能使所有元素都出现在我的 slider 中？任何帮助或建议将不胜感激。
最佳答案
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 4s linear infinite;
}
.slider-text2 {
background: skyblue;
}
.slider-text3 {
background: lightcoral;
}
.slider-text4 {
background: green;
}
.slider-text5 {
background: orange;
}
@keyframes slide {
0% {margin-top:-500px;}
8% {margin-top:-500px;}
16% {margin-top:-400px;}
24% {margin-top:-400px;}
32% {margin-top:-300px;}
40% {margin-top:-300px;}
48% {margin-top:-200px;}
56% {margin-top:-200px;}
64% {margin-top:-100px;}
72% {margin-top:-100px;}
80% {margin-top:0px;}
88% {margin-top:0px;}
}<!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">CdfddfSS</div>
<div class="slider-text3">PHP</div>
<div class="slider-text4">SOCIAL.</div>
<div class="slider-text5">LOUD.</div>
</div>
</div>
</div>
</body>关于html - 关键帧未显示所有元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58061671/
25
4
0
是否有一个 FFMPEG 命令，如果我们传递一个视频文件，在每个场景更改时它都应该为它生成一个关键帧。我理解的关键帧是视频的一系列文件(图像或视频)文件，可用于在视频悬停时播放。请让我们知道我们是否可
我正在切换我通过带有 JQuery 的 toggleClass 触发的一系列动画/过渡。 其中一个动画正在使用以下内容: .header { transition: all .3s ease-
我有一些图片可以在关键帧中很好地滚动 @-webkit-keyframes headImage /* Safari and Chrome */ { 0% {background:url(../imag
尝试用 jQuery 制作一个简单的重复关键帧动画 $(document).ready(function() { $('body').mouseover(function() {
我在 richard bradshaw 找到了一个关于 css3 transitions 的很好的教程，可以在 http://css3.bradshawenterprises.com/cfimg/ 我
我正在尝试使用@keyframes 为背景交换设置动画。背景是径向渐变。背景发生变化，但不是动画。 #mydiv { background: radial-gradient(circle at 90%
如果单击按钮 2，您将看到动画运行。但是，当我使用另一个功能对按钮进行更改(选中复选框以显示。隐藏按钮)时，动画会再次运行，就像再次按下一样。 如何防止每次单独的函数对按钮进行更改时触发动画？即在切换
所以我创建了图像生成器(生成 RGB 的非常简单的一个)我希望能够将一定数量的图像转换为 H264 关键帧+相关帧(lats 说 100)所以在生成的每 100 帧上我需要将它们编码为 H264 .怎
我一直在尝试自学一些带有关键帧的 css 动画，我正在尝试创建一些东西，其中有一个小方 block 落下，然后从那个方 block 中，一个矩形从左边突出，然后显示一些大约 8 秒后发短信，然后 re
我意识到我不能简单地通过用逗号分隔@keyframes mymove、@-moz-keyframes mymove 等来完成下面相同的代码。。为了让它们工作，我需要如下分别声明它们。 有什么方法可以将
恐怕有类似的问题，但我没有找到具体的解决方案，所以我创建了一个 fiddle : http://jsfiddle.net/Garavani/yrnjaf69/2/ TEXT
我有一个包含多个坐标的图像映射。但是，当我在上面放置一个关键帧 div (clouds) 时，这个不起作用，因为动画覆盖了 map 。最后一个 div 是一个动画，有一些云从图像上掠过。 html代码
所以我正在尝试为元素创建 Wifi 闪烁效果。首先圆圈应该是可见的，然后是上面的圆圈，依此类推。在所有符号都可见后，它应该等待 2 秒，然后重新开始。你可以在这里看到我的当前状态: http://js
我试图在单击按钮时显示一条消息。我想要“GO!”淡入/淡出表示游戏开始，但只有在单击开始按钮时才会出现。我现在正在尝试使用 jquery 和另一个来自老师的库的 javascript，它结合了鼠标点击
我正在尝试使用以下代码让对象在背景中从左向右浮动。不幸的是，当它离开屏幕时，尽管向类添加了 overflow-y: hidden 属性，但仍会出现垂直滚动条。我尝试了百分比(100% 与过渡)但它没有
我正在为将鼠标悬停在图形图像上时的弹跳效果创建关键帧。我的一切都正常工作，但是一旦动画完成..图标就会消失。 我知道它与电子邮件中设置的 translateY 属性有关，并在类里面链接。 在悬停时，我
你好我正在尝试模拟翻转倒数计时器但是当我编写代码时我发现两者之间存在差异: @keyframes zindex { 0% { z-index: 2; } 5% { z-index: 4
如果我有: @keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}} 是否可以: @keyframes anim
我有一个弹出窗口，它在单击按钮时打开，然后在您单击另一个按钮或弹出窗口之外时关闭。我希望弹出窗口在打开时淡入并在关闭时淡出。如何使用 javascript 在两个关键帧之间切换？ 我尝试通过使用 ja
我正在尝试使用 jquery Keyframes用于动态创建的关键帧动画。我的页面上有六个图标(可能更多)，它们都需要设置为以下范围内的随机 x 和 y 值的动画: x = 1-5y = 13-20
我是一名优秀的程序员,十分优秀！