邮政收件箱界面html,时尚邮件收件箱UI设计效果

2024-06-02 17:54:56

这是一款效果非常现代时尚的邮件收件箱UI设计。该邮件收件箱UI设计以简洁的列表方式列出所有的邮件，用户点击相应的邮件时会以动画的方式弹出该邮件的详细信息。

使用方法

HTML结构

在这个邮件收件箱UI设计的HTML结构中，每一封邮件都是一个input[type='checkbox']和的组合，后面在CSS代码中会通过checkbox hack来到达点击效果。在元素中，又包含了邮件列表的标题和邮件内容弹出面板两个部分。

Now Reading

Read

aspca

subj: thanks, you are amazing

Your generous donation saved 3 million puppies...

x

aspca

subj: thanks you are amazing

邮件内容

Reply:

CSS样式

该邮件列表UI设计中没有使用任何的JavaScript代码，列表项的点击事件是通过checkbox hack来完成的。

开始时，邮件内容面板是不可见的。当某个列表项被点击后，它处于:checked状态，这时，通过checkbox hack技术，将面板的透明度和left属性进行动画过渡，使其变为可见并向左移动。然后分别对面板中的用户头像图片，邮件标题和邮件内容执行3种不同的CSS animation动画。

body .container_ui input[type="checkbox"]:checked + label > .container_ui__expand {

-webkit-transition-property: left,opacity;

transition-property: left,opacity;

-webkit-transition-duration: .4s;

transition-duration: .4s;

left: 380px;

z-index: -1;

opacity: 1;

-webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);

pointer-events: none;

}

body .container_ui input[type="checkbox"]:checked + label > .container_ui__expand .body .user .face img {

-webkit-animation: pop .5s .5s forwards;

animation: pop .5s .5s forwards;

}

body .container_ui input[type="checkbox"]:checked + label > .container_ui__expand .body .user .details {

-webkit-animation: popup .5s .5s forwards;

animation: popup .5s .5s forwards;

}

body .container_ui input[type="checkbox"]:checked + label > .container_ui__expand .body .content {

-webkit-animation: popup .5s .7s forwards;

animation: popup .5s .7s forwards;

}

这个效果主要是checkbox hack技术和CSS animation动画的结合，完整代码请参考下载文件。

邮政收件箱界面html,时尚邮件收件箱UI设计效果相关推荐

javascript php 界面,js实现卡片式项目管理界面UI设计效果_javascript技巧
这是一款非常有创意的卡片式项目管理界面UI设计效果.该UI设计中,将各个项目以卡片的方式堆叠排列在屏幕上,当点击了其中的某个项目的时候,该项目图片会全屏放大,向下滚动鼠标可以看到该项目的介绍信息. 该 ...
android开发重要控件,Android界面编程——Android基本控件
Android界面编程 Android应用开发的一项重要内容就是界面开发.对于用户来说,不管APP包含的逻辑多么复杂,功能多么强大,如果没有提供友好的图形交互界面,将很难吸引最终用户. 作为一个程序员 ...
html用户登录页面设计,简洁时尚的用户登录界面设计效果
这是一款简洁时尚的用户登录界面设计效果.该用户登录效果使用CSS和JS来完成,它使用元素滑动效果来制作登录表单动画,字体效果时尚大方,是非常不错的用户登录界面UI设计效果. 使用方法 HTML结构该 ...
html优美界面左侧下拉,一组时尚的侧边栏菜单和下拉列表UI设计
这是一款非常时尚的可伸展的侧边栏菜单和select下拉列表以及手风琴式垂直下拉列表UI设计效果.它们通过简单的CSS样式设置,以及和jQuery,jqueryUI的配合,制作出非常时尚的web组件UI ...
移动端ui设计，移动端界面
移动端ui设计,移动端界面.相信你可能对这个概念比较模糊,一般来说,ui设计分为移动端ui设计和PC端ui设计以及游戏ui设计和其他端ui设计,但是近年最火的就是移动端ui设计.那么移动端的ui设计为 ...
ui设计配色技巧：UI设计界面配色
ui设计配色技巧:UI设计界面配色就重要性而言,在UI设计中色彩元素扮演的角色仅次于功能.今天就为大家来分享一下ui设计配色技巧:UI设计界面配色法则,和庞姿姿一起来看看吧~ 人机互动主要基于用户的界 ...
【SwiftUI模块】0058、 SwiftUI设计时尚的漫画应用程序UI[用户界面]
SwiftUI模块系列 - 已更新58篇 SwiftUI项目 - 已更新4个项目往期Demo源码下载技术:SwiftUI.SwiftUI4.0.漫画.应用程序.UI.用户界面运行环境: Swif ...
网易邮箱邮件服务器问题导致收信延迟,企业邮箱使用客户端收信有延迟解决方案...
使用问题您的位置: 首页> 使用问题企业邮箱使用客户端收信有延迟解决方案发布时间:2019-04-10 使用第三方客户端软件(如 Foxmail .Outlook 等)通过 POP3 协议 ...
vue拖拽控件生成界面代码_Blue HMI人机界面开发平台
随着信息技术在军工.制造业等领域的不断普及和快速发展,各行业信息系统软件的研制正在由传统的重复.烟囱式开发模式向以系统顶层设计为指导,以标准化.组件化.集成化软件开发为重点的模式逐步转变. ...

最新文章

热门文章