web前端--六角形及css3实现图片缩放旋转

来源：互联网发布：mac装机必备软件 2017 编辑：程序博客网时间：2024/05/06 16:29

*实现效果：

*思路：

如上图，六边形的部分可以看做三个矩形重叠得到的，先做一个蓝色的矩形，在做与之完全相同的两个矩形，再做旋转

*实现：

 <body><div id="box"><ul><!--无序列表标签--><li><div class="left"></div>   //第二个矩形  <div  class="right"></div>  //第三个矩形</li>                </ul>        </div></body>

这时候是建造出了三个矩形，给矩形设置style

#box ul li div{position:absolute;/*绝对定位*/left:0;/*据参考物的距离*/top:0;width:180px;height:105px;background:rgba(0,0,0,0.7);//前三个参数是颜色设置，第四个参数是透明度}#box ul li div.left{transform:rotate(60deg);/*css3变化属性：旋转60度*/}#box ul li div.right{transform:rotate(-60deg);/*css3变化属性：旋转60度*/}

添加图片，图片的样式

#box ul li img{position:absolute;left:50px;top:13px;z-index:999;/*层级 有定位属性的才能设置层级，越高越在前*/transition:0.5s linear;/*动画过度： 过度时间，匀速过度*/}#box ul li img:hover{/*鼠标移上去实现的效果*/transform:rotate(360deg) scale(1.4);/*CSS3变换：旋转、缩放*/}<img src="images/4.png" class="frist" width="80" height="80" alt="解释说明"></br>

下面给出完整例子代码：

<!doctype html><html lang="en"> <head>  <meta charset="UTF-8">  <meta name="Generator" content="EditPlus®">  <meta name="Author" content="">  <meta name="Keywords" content="">  <meta name="Description" content="">  <title>Document</title>  <style>*{margin:0;padding:0;}body{    background:url("images/bodyBg.jpg");/*背景图片*/}#box{width:980px;height:400px;background:#996600;margin:100px auto;}#box ul li{position:relative;/*参考物 定位  定位属性：relative（相对于自己本身的位置定位） 、absolute。fixed*/list-style:none; /*去除小黑点*/width:180px;height:105px;background:rgba(0,0,0,0.7);/*透明背景  红绿蓝透明度*/float:left;/*与父元素左端对齐，依次往右显示，显示不下自动换行显示*/margin:30px 5px;}#box ul li.six{margin-left:100px;}#box ul li div{position:absolute;/*绝对定位*/left:0;/*据参考物的距离*/top:0;width:180px;height:105px;background:rgba(0,0,0,0.7);}#box ul li div.left{transform:rotate(60deg);/*css3变化属性：旋转60度*/}#box ul li div.right{transform:rotate(-60deg);/*css3变化属性：旋转60度*/}  </style> </head> <body><div id="box"><ul><!--无序列表标签--><li><div class="left"></div><div  class="right"></div></li><li><div class="left"></div><div  class="right"></div></li><li><div class="left"></div><div  class="right"></div></li><li><div class="left"></div><div  class="right"></div></li><li><div class="left"></div><div  class="right"></div></li><li class="six"><div class="left"></div><div  class="right"></div></li><li><div class="left"></div><div  class="right"></div></li><li><div class="left"></div><div  class="right"></div></li><li><div class="left"></div><div  class="right"></div></li><li><div class="left"></div><div  class="right"></div></li><li><div class="left"></div><div  class="right"></div></li><li><div class="left"></div><div  class="right"></div></li><li><div class="left"></div><div  class="right"></div></li><li><div class="left"></div><div  class="right"></div></li></ul></div> </body></html>

======================================================================================================

***********这是一条华丽的分割线************

======================================================================================================

注意：

优化：代码相同的部分很多，然后嘞

0 0