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

这是一款效果非常现代时尚的邮件收件箱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动画的结合，完整代码请参考下载文件。