苹果系统桌面特效

最新推荐文章于 2019-03-14 12:02:00 发布

秋0922

最新推荐文章于 2019-03-14 12:02:00 发布

阅读量1k

点赞数

本文链接：https://blog.csdn.net/weixin_38531395/article/details/79794912

版权

<!doctype html>
<html>
<head><!--给浏览器看的-->
<meta charset="utf-8">
<title>apple</title>
<mata name="description" content="描述：对网页文档的大概介绍">
<meta name="ketwords" content="关键词1，关键词2">
<!--关键词：提供给搜索引擎搜索网站使用-->
<style type="text/css">
*{margin:0;padding:0}
body{
     background-image:url('texiao/images/bg.jpg')}
.nav{
	   position:fixed;/*以浏览器窗口未参考物的定位元素,同时将nav作为参考物*/
	   bottom:0px;
	   left:0;right:0;/*任意相等值都可以*/
	   margin:auto;
	   width:660px;
	   height:88px;
	   background-color:rgba(255,255,255,0.2);
	}
.nav ul{
	    list-style:none;/*去除默认小圆点*/
	    
		font-size:0px;/*设置字体（空格）大小为0*/
		text-align:center;
	}
.nav ul li{
	    display:inline-block;/*让元素水平排列;浏览器会解析空格,可以注释，可以不换行，但是不可取*/
		font-size:16px;/*显示字体*/
		/*word-spacing:-5px;因为diaplay:inline-block;让浏览器解析文字的方式解析ul li*/
		/*letter-spacing:-5px;因为diaplay:inline-block;让浏览器解析文字的方式解析ul li*/
		/*但是不同的浏览器需要设置的间距不一样*/
		width:50px;
		height:50px;
	    
		transition:0.55s;/*动画过度时间*/
	}
.nav ul li img{
	  width:100%;
	  height:100%;
	}
.nav ul li:hover{
	   transform:scale(1.5);/*变换属性：缩放（倍数）*/
	   margin:0 30px;
	}
/**  .nav .left{
	   position:absolute;/*要定位的元素
	   left:-40px;
	   width:0px;
	   height:0px;/*设置三角形
	   border-top:44px solid transparent;/*上边框属性
	   border-left:20px solid transparent;
	   border-right:20px solid rgba(255,255,255,0.2); 
	   border-bottom:44px solid rgba(255,255,255,0.2);/*导航条高度88
	} */
.nav:before,.nav:after{/*并集选择器*/
	    content:'';
	   position:absolute;/*要定位的元素*/
	  width:0px;
	   height:0px;/*设置三角形*/
	   border-width:44px 20px;
	   border-style:solid;
	   
	}

.nav:before{
	   left:-40px;
	   
	   
	   /*border-width:44px 20px;
	   border-style:solid;*/
	   border-color:  transparent   rgba(255,255,255,0.2) rgba(255,255,255,0.2) transparent;
	   
	   
	/**   
	   border-top:44px solid transparent;/*上边框属性
	   border-left:20px solid transparent;
	   border-right:20px solid rgba(255,255,255,0.2); 
	   border-bottom:44px solid rgba(255,255,255,0.2);/*导航条高度88*/
	   
	}
/**用假的元素替代真的DIV，在元素之前，之后*/
.nav:after{
	   right:-40px;
	   top:0px;/*让三角形以顶端对齐*/
	   
	   
	   
	  /*  border-width:44px 20px;
	   border-style:solid; */
	   border-color:transparent transparent rgba(255,255,255,0.2) rgba(255,255,255,0.2) ;
	   
	   
	   
	/**  border-top:44px solid transparent;/*上边框属性
	   border-left:20px solid rgba(255,255,255,0.2);
	   border-right:20px solid transparent; 
	   border-bottom:44px solid rgba(255,255,255,0.2);导航条高度88
	   */
	 
	}
/**.nav .right{
	   position:absolute;/*要定位的元素
	   right:-40px;
	   top:0px;/*让三角形以顶端对齐
	   width:0px;
	   height:0px;/*设置三角形
	   border-top:44px solid transparent;/*上边框属性
	   border-left:20px solid rgba(255,255,255,0.2);
	   border-right:20px solid transparent; 
	   border-bottom:44px solid rgba(255,255,255,0.2);/*导航条高度88
	} */
</style>
</head>

<body>
<div class="nav">
   <ul>
        <li>
          <img src="texiao/images/1.png">
        </li>
        <li>
          <img src="texiao/images/2.png">
        </li>
        <li>
          <img src="texiao/images/3.png">
        </li>
        <li>
          <img src="texiao/images/4.png">
        </li>
        <li>
          <img src="texiao/images/5.png">
        </li>
        <li>
          <img src="texiao/images/6.png">
        </li>
        <li>
          <img src="texiao/images/7.png">
        </li>
        <li>
          <img src="texiao/images/8.png">
        </li>
        <li>
          <img src="texiao/images/9.png">
        </li>
        <li>
          <img src="texiao/images/1.png">
        </li>
   </ul>
</div>
<!--节省标签的使用，避免代码冗余，定义两个三角形的伪元素,去掉两个三角形DIV标签
     减小文档体积，缩减加载时间

-->
</body>
</html>