前端入门篇(五十二)练习6:transition过渡小动画

news2024/10/24 20:12:43

所以应该先找到第n个li,找到li再找img,li没有找错,底下又各自只有一个img,解决

ul li:nth-child(1) img {

}

描述文字从下往上:

一开始描述也在框框下面,当hover时,translateY(0),并且有过渡时间

完整代码:

    • 描述描述描述描述描述描述描述
    • 描述描述描述描述描述描述描述
    • 描述描述描述描述描述描述描述
    • 描述描述描述描述描述描述描述

    本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1842758.html

    如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

    相关文章

    redis高可用-哨兵机制

    一:背景 上一节我们已经实现了redis的主从同步,从而实现服务的流量分摊和数据高可用,但是出现故障以后,需要人工手动接入,手动切换主从,来实现故障转移。这是比较麻烦的,毕竟人不能实时盯着服务…

    如何用Vue3打造一个令人惊叹的极坐标图

    本文由ScriptEcho平台提供技术支持 项目地址:传送门 使用 Vue3-ApexCharts 绘制极地区域图 应用场景 极地区域图常用于展示具有周期性或分类性数据的分布情况,例如不同月份的销售额、不同年龄段的人口分布等。 基本功能 此代码使用 Vue3-ApexChart…

    打字速度对编程的影响大吗?

    知道打字速度对编程的影响大吗?实际上,在编程的世界里,关键在于思考,而非打字速度。要明白,编程与日常聊天中的打字有着本质的区别,如果编程仅仅取决于打字速度,那它岂不就等同于打字员的工作了…

    详解 Macvlan 创建不同容器独立跑仿真

    一、概念介绍 1.1 什么是macvlan macvlan是一种网卡虚拟化技术,能够将一张网卡(Network Interface Card, NIC)虚拟出多张网卡,这意味着每个虚拟网卡都能拥有独立的MAC地址和IP地址,从而在系统层面表现为完全独立的网络…

    基于欧式距离的匈牙利匹配跟踪器(C++)

    文章目录 介绍参考repo修改后的效果修改后的代码使用方法介绍 基于欧式距离的匈牙利匹配跟踪器是一种在目标跟踪领域常用的算法。它通常用于解决多目标跟踪中的匹配问题,其中需要将当前帧中的检测目标与上一帧中已知的目标进行匹配。 算法步骤大致如下: 特征提取:对检测到…

    Vue快速上手和Vue指令

    一、Vue快速上手 1、Vue概念 Vue (读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式框架 Vue2官网:https://v2.cn.vuejs.org/ 构建用户界面:基于数据渲染出用户可以看到的界面 渐进式: 循序渐进,不一定非得把…

    docker容器网络与宿主机网络冲突的原因与解决方案

    一、故障现象 在用docker-compos.yaml文件或者手动创建docker网络时,可能会出现新建的容器网络与宿主机网络冲突,导致SSH远程连接中断,并无法再用Xshell等远程连接工具连接宿主机。现象如下: [rootcontroller ~]# docker networ…

    LeRobot——Hugging Face打造的机器人领域的Transformer架构

    前言 如友人邓博士所说,“用 Stanford aloha 课题组提供的训练数据,训练他们研发的 Action Chunking Transformer 动作规划模型,训练结果,能用,但是稳定性有待提高 要提高稳定性,看来必须修改 Stanford a…

    web安全渗透测试十大常规项(一):web渗透测试之PHP反序列化

    渗透测试之PHP反序列化 1. PHP反序列化1.1 什么是反序列化操作? - 类型转换1.2 常见PHP魔术方法?- 对象逻辑(见图)1.2.1 construct和destruct1.2.2 construct和sleep1.2.2 construct和wakeup1.2.2 INVOKE1.2.2 toString1.2.2 CALL1.2.2 get()1.2.2 set()1.2.2 isset()1.2.2…

    Js-w3school(2024(1)

    10.访问 HTML 元素 使用“不整洁的” HTML 样式的后果,也许是导致 JavaScript 错误。请在 HTML 中使用相同的命名约定(就像 JavaScript 那样) 11. 请使用正确的文档类型 请始终在文档的首行声明文档类型: 如果您一贯坚持小写标…

    数据结构之B数

    目录 1.概述 2.特点 3.诞生 4.优缺点 4.1.优点 4.2.缺点 5.应用场景 6.C语言中的B树实现例子 7.总结 1.概述 B树(B-tree)是一种自平衡的树数据结构,广泛应用于数据库和文件系统中,以便高效地进行顺序读取、写入以及查找…

    南京邮电大学计算机网络实验一(网络操作系统的安装与配置)

    文章目录 一、 实验目的和要求二、 实验环境(实验设备)三、 实验原理和步骤四、 实验小结(包括问题和解决方法、心得体会、意见与建议等)(一)问题和解决方法(二)心得体会(三)意见与建…

    osgearth提示“simple.earth: file not handled”

    在用vcpkg编译完osg和osgearth后,为了验证osgearth编译是否正确,进行测试,模型加载代码如下: root->addChild(osgDB::readNodeFile("simple.earth")); 此时以为是simple.earth路径的问题,遂改为以下代码…

    AI交互数字人如何赋能数智教育?

    随着AI交互数字人技术的飞速发展,教育领域正经历着前所未有的变革。AI交互数字人为教育领域注入了全新活力,重塑着教学模式,为学生带来沉浸式学习体验。 AI交互数字人在教育领域中,可以应用在: 1、个性化学习教学指导…

    不适合编程的人是怎样的?

    你知道不适合编程的人是怎样的吗?其实,对编程没有兴趣的人往往都不适合从事编程工作。编程并非是一项轻松简单的任务,它需要投入大量的时间和精力。 编程领域有其独特的特点和要求。首先,编程有着相当陡峭的学习曲线。从最基础的语…

    分布式锁三种方案

    基于数据库的分布式锁(基于主键id和唯一索引) 1基于主键实现分布式锁 2基于唯一索引实现分布式锁 其实原理一致,都是采用一个唯一的标识进行判断是否加锁。 原理:通过主键或者唯一索性两者都是唯一的特性,如果多个…

    二开的精美UI站长源码分享论坛网站源码 可切换皮肤界面

    二开的精美UI站长源码分享论坛网站源码 可切换皮肤界面 二开的精美UI站长源码分享论坛网站源码 可切换皮肤界面

    如何使用React的lazy和Suspense来实现代码分割?

    在React中,使用React.lazy和Suspense可以方便地实现组件的代码分割。代码分割是一种优化技术,它将代码拆分成多个包,然后按需加载这些包,从而加快应用的初始加载时间。下面是如何使用这两个API的基本步骤: 使用React.l…

    24上软考成绩预计6月底公布?附查分指南

    最近,很多小伙伴都在问上半年成绩什么时候出来?每天学习群变成了祈祷群,都在祈祷45,45,45。按照上一次的成绩发布时间,从考试结束到成绩发布,间隔了32天。这次是不是会更快? 一般阅卷只要7-10天&#xff0c…

    深入探究RTOS的IPC机制----邮箱

    阅读引言: 因为将来工作需要, 最近在深入学习OS的内部机制,我把我觉得重要的、核心的东西分享出来, 希望对有需要的人有所帮助, 阅读此文需要读友有RTOS基础, 以及一些操作系统的基础知识, 学习…