当前位置：首页 > 网页特效 > 其他

纯CSS3超酷扁平风格后台面板UI设计

分类：其他日期：2024-05-14 点击(0) 评论(0)

纯CSS3超酷扁平风格后台面板UI设计

简介

##### HTML结构
该后台面板使用一个div作为包裹容器，里面div.avatar是用户的头像，每一个input.radio和它之后的span元素以及font-awesome字体图标组成一个侧边栏TAB菜单。div.top-bar是面板顶部的菜单图标。div.tab-content中的每一个section对应TAB菜单的一个选项。

```html
<div class="container pb30">
  <div class="clear-backend">
  <div class="avatar">
    <div>
      <a href="http://www.htmleaf.com/" target="_blank">
        <img src="img/admin.png" alt="">
      </a>
    </div>
  </div>
 
  
  <input type="radio" class="tab-1" name="tab" checked="checked">
  <span>Home</span><i class="fa fa-home"></i>
  ......
  
  <div class="top-bar">
    <ul>
      <li>
        <a href="" title="Log Out">
          <i class="fa fa-sign-out"></i>
        </a>
      </li>
      ...
    </ul>
  </div>
 
  
  <div class="tab-content">
    <section class="tab-item-1">
      <h1>One</h1>
    </section>
    ...
  </div>
</div>       
```        
#####  CSS样式
该后台面板UI的CSS样式并不复杂，值得注意的一点是它使用checked hack来制作点击TAB时切换面板的效果。

```html
.clear-backend > input.tab-1:checked ~ .tab-content .tab-item-1 {
  display: block;
}
 
.clear-backend > input.tab-2:checked ~ .tab-content .tab-item-2 {
  display: block;
}
 
.clear-backend > input.tab-3:checked ~ .tab-content .tab-item-3 {
  display: block;
}
 
.clear-backend > input.tab-4:checked ~ .tab-content .tab-item-4 {
  display: block;
}
 
.clear-backend > input.tab-5:checked ~ .tab-content .tab-item-5 {
  display: block;
}
 
.clear-backend > input.tab-6:checked ~ .tab-content .tab-item-6 {
  display: block;
}
 
.clear-backend > input.tab-7:checked ~ .tab-content .tab-item-7 {
  display: block;
}
 
.clear-backend > input.tab-8:checked ~ .tab-content .tab-item-8 {
  display: block;
}
 
.clear-backend > input.tab-9:checked ~ .tab-content .tab-item-9 {
  display: block;
}
 
.clear-backend > input.tab-10:checked ~ .tab-content .tab-item-10 {
  display: block;
}       
```

web299.com

纯CSS3超酷扁平风格后台面板UI设计

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

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

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

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