应用CSS3制做1个简易的Chrome仿真模拟器

2021-01-20 07:40 jianzhan

Demo在此。

全是1些基础的CSS3的应用，其实不繁杂。各位有兴趣爱好地能够试着也写1个。

唯1繁杂的地区是访问器标识的仿真模拟。


能够看出，Chrome标识的基础特性以下：

    梯形
    有圆角
    宽度自融入

用照片能够轻轻松松搞定，可是如何能用照片呢？做为1个有追求完美的前端开发，毫无疑问要用纯CSS3完成啊！

标识的HTML很简易：

XML/HTML Code拷贝內容到剪贴板
  1. <ul class="tabs">  
  2.     <li>新标识页</li>  
  3.     <li class="selected">百度搜索1下，你就了解</li>  
  4.     <li>新标识页</li>  
  5. </ul>  

梯形的两边用:before 与 :after 轻轻松松搞定。

CSS Code拷贝內容到剪贴板
  1. .tabs li:before,   
  2. .tabs li:after {   
  3.      width: 16px;   
  4.      height: 24px;   
  5.      content: " ";   
  6.      border: 1px solid #3b5c95;   
  7. }  

解决精准定位的情况下必须留意元素间的z-index关联。

CSS Code拷贝內容到剪贴板
  1. .tabs li {   
  2.      display: inline-block;   
  3.      position: relative;   
  4.      z-index: 0;   
  5. }   
  6. .tabs li:before,   
  7. .tabs li:after {   
  8.      position: absolute;   
  9.      z-index: 3;   
  10. }   
  11. .tabs li:before {   
  12.      left: -12px;   
  13. }   
  14. .tabs li:after {   
  15.      rightright: -12px;   
  16. }  

形变则应用CSS3的transform。

CSS Code拷贝內容到剪贴板
  1. .tabs li:before {   
  2.     -o-transform: skew(⑵2deg);   
  3.     -ms-transform: skew(⑵2deg);   
  4.     -moz-transform: skew(⑵2deg);   
  5.     -webkit-transform: skew(⑵2deg);   
  6.     transform: skew(⑵2deg);   
  7. }   
  8. .tabs li:after {   
  9.     -o-transform: skew(22deg);   
  10.     -ms-transform: skew(22deg);   
  11.     -moz-transform: skew(22deg);   
  12.     -webkit-transform: skew(22deg);   
  13.     transform: skew(22deg);   
  14. }  

好了，类似大获全胜了。接下来还要略微调剂下，对比Chrome访问器填充下渐变色色，高宽比、宽度、部位也必须微调1下。

为您推荐