html - 使用 CSS 的文本滑块
问题描述
我有一个简单的 3 文本我想添加这些文本的向下滑动效果这是我到目前为止的 jsfiddle演示
body {
font-family: 'Open Sans', 'sans-serif';
color: #cecece;
background: #222;
overflow: hidden;
}
.item-1,
.item-2,
.item-3 {
position: absolute;
display: block;
top: 2em;
width: 60%;
font-size: 2em;
animation-duration: 20s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
.item-1 {
animation-name: anim-1;
}
.item-2 {
animation-name: anim-2;
}
.item-3 {
animation-name: anim-3;
}
@keyframes anim-1 {
0%,
8.3% {
left: -100%;
opacity: 0;
}
8.3%,
25% {
left: 25%;
opacity: 1;
}
33.33%,
100% {
left: 110%;
opacity: 0;
}
}
@keyframes anim-2 {
0%,
33.33% {
left: -100%;
opacity: 0;
}
41.63%,
58.29% {
left: 25%;
opacity: 1;
}
66.66%,
100% {
left: 110%;
opacity: 0;
}
}
@keyframes anim-3 {
0%,
66.66% {
left: -100%;
opacity: 0;
}
74.96%,
91.62% {
left: 25%;
opacity: 1;
}
100% {
left: 110%;
opacity: 0;
}
}
<p class="item-1">Fast.</p>
<p class="item-2">Slow</p>
<p class="item-3">Much slow</p>
现在它只是向右滑动,我想要一个向下滑动的效果
解决方案
把left换成top?
body {
font-family: 'Open Sans', 'sans-serif';
color: #cecece;
background: #222;
overflow: hidden;
}
.item-1,
.item-2,
.item-3 {
position: absolute;
display: block;
top: 2em;
width: 60%;
font-size: 2em;
animation-duration: 20s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
.item-1 {
animation-name: anim-1;
}
.item-2 {
animation-name: anim-2;
}
.item-3 {
animation-name: anim-3;
}
@keyframes anim-1 {
0%,
8.3% {
top: -100%;
opacity: 0;
}
8.3%,
25% {
top: 25%;
opacity: 1;
}
33.33%,
100% {
top: 110%;
opacity: 0;
}
}
@keyframes anim-2 {
0%,
33.33% {
top: -100%;
opacity: 0;
}
41.63%,
58.29% {
top: 25%;
opacity: 1;
}
66.66%,
100% {
top: 110%;
opacity: 0;
}
}
@keyframes anim-3 {
0%,
66.66% {
top: -100%;
opacity: 0;
}
74.96%,
91.62% {
top: 25%;
opacity: 1;
}
100% {
top: 110%;
opacity: 0;
}
}
<p class="item-1">Fast.</p>
<p class="item-2">Slow</p>
<p class="item-3">Much slow</p>
推荐阅读
- java - 从树形图中删除元素
- android - 在 Activity.onDestroy() 方法之后,为什么我仍然可以得到这个活动的实例?
- c# - 如何阻止 Windows 窗体关闭但在单击 X 时隐藏?
- javascript - 如何将 JSON 转换为 GeoJSON
- python - 使用熊猫比较多列值
- haskell - 在 vim 8 中使用 hie(haskell ide 引擎)时如何查看整个提示信息?
- flutter - 我的示例应用程序适用于添加/查看数据,但数据在 Firestore 控制台中不可见
- python - 获取多个用户输入的列表和地图之间的区别
- jquery - 如果使用 document.html.style.display='',为什么我的网站主页仍然空白?
- c# - 如何根据 C# 中的值创建子 XElement?