首页 > 其他分享 >css3 列表按先后顺序移动过来显示

css3 列表按先后顺序移动过来显示

时间:2024-07-03 15:56:38浏览次数:23  
标签:css3 先后顺序 list 0.5 li nth animation child 列表

要实现列表按先后顺序平移过来,可以使用CSS动画结合:nth-child()选择器。以下是一个简单的示例:

HTML:

<ul class="list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

CSS:

.list li {
  opacity: 0;
  animation: slide-in 0.5s forwards;
}
@keyframes slide-in {
  0% {
    opacity: 0;
    transform: translate(300px, -100px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}

.list li:nth-child(1) {
  animation-delay: 0.5s;
}
.list li:nth-child(2) {
  animation-delay: 1s;
}
.list li:nth-child(3) {
  animation-delay: 1.5s;
}
.list li:nth-child(4) {
  animation-delay: 2s;
}

在这个例子中,列表中的每个<li>元素在进入时都会以X轴移动300px,Y轴-100px来进行移动(可以根据自己的情况调整方向),然后逐个动画延迟0.5秒开始显示,最终位置不再平移。您可以根据需要调整动画持续时间(0.5s)和延迟(0.5s的增量)。

标签:css3,先后顺序,list,0.5,li,nth,animation,child,列表
From: https://www.cnblogs.com/tanweiwei/p/18281795

相关文章

  • 二、列表
    2.1列表是什么bicycles=['trek','cannondale','redline','specialized']print(bicycles)结果:['trek','cannondale','redline','specialized']①访问列表元素bicycles=['trek','......
  • Python面试题:Python 中的列表和元组有什么区别?
    Python中的列表和元组的主要区别如下:可变性:列表(List):可变,意味着可以改变列表的内容(添加、删除或修改元素)。元组(Tuple):不可变,一旦创建后,不能修改其内容。语法:列表使用方括号[]创建。例如:my_list=[1,2,3]元组使用圆括号()创建。例如:my_tuple=(1,2,3)性能:......
  • CSS-文本样式,列表样式,其他样式
    color为字体指定颜⾊font-style⽤于打开和关闭斜体⽂本font-weight为字体设置粗细程度font-size为⽂字指定⼤⼩font-family为⽂字指定特殊的字体,浏览器只会使⽤浏览器可以访问到的字体webFont⽹络字体text-decoration设置或者取消⽂本修饰text-align⽂字排列⽅......
  • 收集了很久的全网好用的磁力搜索站列表分享
    之前找资源的时候,收集了一波国内外大部分主流的磁力链接搜索站点。每一个站可能都有对应的优缺点,多试试,就能知道自己要哪个了。全网好用的磁力链接大部分的时候,我们用国内的就可以了,速度块,而且不用TZ。国外的,有一些是需要TZ,速度也相对会慢一些。如果是要搜索国外的资源,那国外的......
  • Python-列表
    列表1.列表Python列表是:任意对象的有序集合:列表是收集其他对象的地方,列表维护了元素的每一项从左到右的顺序,也就是说这是序列;通过偏移访问:像字符串一样,可以通过列表对象的偏移对其进行索引,从而读取对象的某一部分的内容,也可以进行分片和拼接等操作;可变长度、异构以及任意嵌......
  • html+css3实现超级充电动画
    图例  源码在图片后面,有HTML和CSS个部分 源代码HTML<!doctypehtml><html><head><metacharset="utf-8"><title>PureCSS超级充电器</title><linktype="text/css"href="css/style.css"rel="stylesheet&quo......
  • 【前端CSS3】一篇搞懂各类常用选择器(黑马程序员)
    文章目录一、前言......
  • java 查询日期列表月末对应上月末,季度末对应上季度末,年末对应上年末,取列表月度,季度,年
    packagecom.dc.galaxydata.model;importcom.dc.common.util.DateUtil;importjava.util.ArrayList;importjava.util.Date;publicclassEndDates{publicstaticvoidmain(String[]args){ArrayList<Date>dateList=newArrayList<>(......
  • ThinkCMF制作文章列表 <portal:articles 标签报错 Undefined variable $vo
    代码如下:<portal:articleslimit="5"order="post.published_timeDESC"categoryIds="$category_ids"><liclass="tm-recent-post-list-li"><ahref=&......
  • HTML5+CSS3集训(16)
    图片布局案例实践 <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>p155</title></head><body><ul><li><imgsrc="巧克力.jpg......