这是一个非常有创意的卡片项目管理界面UI设计效果。在这个UI设计中，所有的项目都以卡片的形式堆叠排列在屏幕上。当点击其中一项时，该项的图片会全屏放大，向下滚动鼠标可以看到该项的介绍信息。项目管理界面还提供了全屏导航菜单，可以通过右上角的汉堡图标触发。

方法HTML结构卡片式项目管理界面的HTML结构分为三个部分：cd-nav-trigger是全屏菜单的触发按钮，nav.cd-primary-nav是全屏导航菜单，并且。cd-projects-container是无序项目列表的容器。

每个项目都包含一个代表项目标题的div.cd-title元素和一个代表项目信息的div.cd-project-info元素。项目的图片被设置为的背景图片。伪元素前的CD-title :

标题a href=' # 0 ' class=' CD-logo ' img src=' http : img/CD-logo . SVG '/a button class=' CD-nav-trigger ' Menupan aria-hidden=' true ' class=' CD-icon '/span/button/标题nav class=' CD-primary-nav ' ul Li class=' CD-label ' navigation/Li lia href=' # 0 '团队/a/li！-可以有更多的导航项目- /ul/nav！- .CD-primary-nav-div class=' CD-PROJECts-container ' ul Li class=' single-PROJECt ' div class=' CD-title ' h2PROJECt 1/H2/div！-.CD-title-div class=' CD-project-info '按钮class=' CD-scroll '向下滚动/按钮div class=' content-wrapper '项目描述/p！-附加项目信息- /div /div！- .cd-project-info - /li！-其他项目- /ul/div！-.光盘。CD-project-container-CSS style div . CD-project-info元素(项目信息)设置为100%高度和相对定位。每个单独的项目都使用绝对定位，并且被设置为100%高度，并被放置在其父容器的左上角。cd项目信息。起初，它们是堆叠在一起的。

然后，第二项和第三项通过使用translateY属性沿Y轴向下移动，并移动高度的1/3和2/3。CD-项目-信息。也就是说，三个项目中的1/3显示在同一个屏幕上。CD-project-container { height : 100%；相对位置：飞越：隐藏；}.CD-项目-容器。单项目{ position: absolutetop: 0pxleft: 0px高度： 100%；宽度： 100%；transition:变换0.4s}.CD-项目-容器。单项目类型(2){ transform : translateY(33.33333333333%)；}.CD-项目-容器。第三类单项目(3){ transform : translateY(66.66666666667%)；} .cd-title(项目的标题)设置为33.33%(视口高度的1/3)，而其伪元素。之前的CD-title :3360设置为300%，实际上等于视口的高度。光盘标题；}.在{/*背景图片*/content : }之前的CD-title :绝对位置：top : 0；left : 0；高度：300%；宽度： 100%；背景-位置：中心；背景-重复：不重复；背景尺寸：封面；}.第：个单项目类型(1)。{ background-image: url(./img/img-1 . jpg)；}选择一个项目时，它会添加一个. selected类，translate ey(0)转换将应用于该类。同时，将项目的兄弟元素移出屏幕并平移(100%)，使项目占据整个屏幕。光盘项目-容器。单一项目。选定{ /*被选择的项目*/transform : translateY(0)；}.光盘项目-容器。单项工程。选定~ li { /*隐藏其它项目*/transform : translateY(100%)；} 对于光盘项目-信息（项目信息),它有100%的高度，一个飞越：汽车属性（使其可以滚动),它被放置在父元素。单一项目的左上角位置。它的：之前伪元素是一个空白占位，它等于屏幕视口的宽度和高度，它的作用是让项目图片开始时可以全屏显示，而不是被内容包装器的内容覆盖。CD-project-info {位置：绝对；top : 0；左： 0；宽度： 100%;高度： 100%;飞越：汽车；opa城市3360 0；可见性：隐藏；过渡：不透明度0.4s，能见度0.4s}.{/*之前的CD-project-info :用与占位，显示项目图片*/content : " "；显示器：块；高度： 100%;宽度： 100%;指针事件：无；}.激光唱片项目信息。内容包装器{ position : relativez-index : 2；padding: 2em 0 3em背景-color : # FFFFFF；}.选中光盘项目信息{ opa city 3360 1；可见性：可见；过渡：不透明度0s，能见度0s；} 对于全屏导航菜单，开始时光盘主导航元素被放置在光盘项目-容器的下面。当用户点击了cd .导航触发器按钮之后，所有的项目被移动到屏幕的下方，这时全屏导航菜单被显示出来。CD-primary-nav {位置：绝对值；top : 0；左： 0；/*高度=(100% - 9%) - 9%为导航打开时项目占用的空间*/身高： 91%；宽度： 100%;飞越：汽车；opa城市3360 0；}.CD-primary-nav ul { transform : translateY(50px)；过渡：变换0.4s}。光盘主导航。nav-open { opa city 3360 1；}.光盘主导航。nav-open ul { transform : translateY(0)；} .光盘项目容器。导航开放.单项目{盒影： 0 30px rgba(0，0，0，0.5)；transform : translateY(91%)；}.光盘项目容器。导航开放.单项目：次类型(2){ transform : translateY(94%)；}.光盘项目容器。导航开放.单项目：次类型(3){ transform : translateY(97%)；} JavaScript该用户界面设计中使用jQuery来监听cd .导航触发器和。单一项目元素上的点击事件，并为相应的元素添加和移除相应的班级。

射流研究…实现卡片式项目管理界面用户界面设计效果就为大家分享到这，希望本文所述对大家学习爪哇岛描述语言程序设计有所帮助。