当前位置：首页 > 网页特效 > 动画效果

时尚邮件收件箱UI设计效果

分类：动画效果日期：2024-05-14 点击(0) 评论(0)

时尚邮件收件箱UI设计效果

简介

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

<input id='message-1' type='checkbox'>
      <label for='message-1' href='#move'>
        <div class='container_ui__item'>
          <div class='face'>
            <img src='img/1.jpg'>
            <div class='color_bar one'>
              <p>Now Reading</p>
              <span>Read</span>
            </div>
          </div>
          <h2>
            aspca
          </h2>
          <div class='dot active'></div>
          
          <h3>subj: thanks, you are amazing</h3>
          <h4>Your generous donation saved 3 million puppies...</h4>
        </div>
        
        <div class='container_ui__expand' id='close'>
          <div class='heading'>
            <div class='heading_head'></div>
            <label for='message-1'>
              x
            </label>
          </div>
          <div class='body'>
            <div class='user'>
              <div class='face'>
                <img src='img/1.jpg'>
              </div>
              <div class='details'>
                <h2>aspca</h2>
                <h3>subj: thanks you are amazing</h3>
              </div>
            </div>
            <div class='content'>
              <p>邮件内容</p>
              <span>Reply:</span>
              <textarea>

web299.com

时尚邮件收件箱UI设计效果

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果