小编New*_*per的帖子
使一组元素水平向左移动
在下面的代码中，我安排了几个 div 来水平对齐。我想创建 3 行，在每行中，我希望 div 以不同的速度水平向左移动。
检查此 giphy 以获取视觉参考：http://www.giphy.com/gifs/ME8Av6LT9hgymDnqSP
.roundeddivs {
background: white;
white-space: nowrap;
padding: 20px 25px;
border-radius: 44px;
max-height: "1px";
width: auto;
margin: 8px;
font-size: 18px;
font-weight: 500;
box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px,
rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
}
.block {
padding: 6rem 2rem;
}
.arrangeflex {
display: flex;
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
margin: 0 25px;
}<section>
<div class="block ">
<div class="arrangeflex">
<span class="roundeddivs">Hello 1</span>
<span …5
推荐指数
推荐指数
1
解决办法
解决办法
737
查看次数
查看次数
CSS 动画将 div 向上移动
我想使用 CSS 动画将这些 div 向上移动，如下面所附的 GIF 所示。
所有的 div 以相同的速度向上移动。
我尝试了大帐篷标签，但据我所知，它已经贬值或即将贬值。所以我不能用它。
我从来没有做过CSS动画。所以非常感谢您的帮助。
每列有 6 个项目。当全部 6 项完成后，又从第 1 项开始。溢出的元素保持隐藏状态，直到显示所有其他项目，然后在第 6 个元素之后再次从底部出现。
.gridcontainer{
background: black;
width: 100%;
padding: 20px;
margin: 5px;
color: white;
border-radius: 10px;
}
.grid{
display:grid;
justify-items: center
}
.grid--1x3{
grid-template-columns: 1fr 1fr 1fr;
justify-items: "center"
}
.flexcolumn {
display:flex;
flex-direction: column;
}
<div class='grid grid--1x3'>
<div class='flexcolumn'>
<span class='gridcontainer'>Element A</span>
<span class='gridcontainer'>Element B</span>
<span class='gridcontainer'>Element C</span>
<span class='gridcontainer'>Element D</span>
<span class='gridcontainer'>Element E</span>
<span class='gridcontainer'>Element F</span>
</div>
<div class='flexcolumn'> …3
推荐指数
推荐指数
1
解决办法
解决办法
202
查看次数
查看次数
CSS动画自动替换文本
我有 5 个物品，例如猫、狗、大象、河马、狮子。
我需要构建一个 h1 文本，每隔 3 或 4 秒自动更改一次，如下所示
如果我是猫，那么我就不是狗或大象。
如果我是狗，那么我就不是猫或大象。
如果我是大象，那么我就不是猫或狗。
如果我是河马，那么我就不是大象或狮子。
如果我是狮子，那么我就不是大象或河马。
所以无论 I'm 之后是什么，都不能出现在句子的其余部分中。Y 和 Z 可以是列表中的任何内容。
<h1>If I'm X, then I'm not Y, and Z </h1>
这里X、Y和Z像这样动态变化
X、Y 和 Z 同时上升，然后是下一个可能的文本
0
推荐指数
推荐指数
1
解决办法
解决办法
203
查看次数
查看次数