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

*实现效果:


*思路:

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

*实现:

 <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>

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

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

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

注意:

优化:代码相同的部分很多,然后嘞

相关推荐
<p style="color:#424242;background-color:#FFFFFF;"> <span style="font-size:16px;">本套课程,大喵将手把手带着大家上手精选20个纯CSS3动画项目精选案例项目实战,让小伙伴们能够轻松上手,企业公司项目开发过程中遇到的页面动画交互效果需求实现,以一些更加炫酷创意动画想法的实现,成为一名酷酷哒前端开发工程师。</span><span style="font-size:16px;"></span> </p> <p style="color:#424242;background-color:#FFFFFF;"> <br /></p> <p style="color:#424242;background-color:#FFFFFF;"> <strong><span style="font-size:16px;">本课程为<span style="font-size:14px;">20</span>套<span style="font-size:14px;">CSS3</span>动画实战课程,所集合构成的一套实战课程。适合热爱前端动画的小伙伴们,课程的主要内容包括:</span></strong> </p> <p style="color:#424242;background-color:#FFFFFF;"> <br /></p> <p style="color:#424242;background-color:#FFFFFF;"> <span style="font-size:16px;"><span style="font-size:14px;">01.3D</span>文字效果制作、<span style="font-size:14px;">02.</span>雪花飘落效果、<span style="font-size:14px;">03.</span>图文模糊效果、<span style="font-size:14px;">04.</span>文字卡片折叠效果、<span style="font-size:14px;">05.</span>六角形效果、<span style="font-size:14px;">06. </span>进度条颜色跟随效果、<span style="font-size:14px;">07. </span>动态视频背景效果、<span style="font-size:14px;">08. </span>按键文字跳动效果、<span style="font-size:14px;">09. </span>弹跳小球效果、<span style="font-size:14px;">10. 3D</span>翻折菜单导航效果、<span style="font-size:14px;">11. 3D</span>圆环层叠动画效果、<span style="font-size:14px;">12. </span>水波浪球起伏效果、<span style="font-size:14px;">13. </span>遮罩透明滤镜文字效果、<span style="font-size:14px;">14. </span>阴阳无极八卦阵效果、<span style="font-size:14px;">15. </span>文字双屏进入进出效果、<span style="font-size:14px;">16. </span>炫酷光影加载效果、<span style="font-size:14px;">17. </span>文字背景水波浪效果、<span style="font-size:14px;">18. </span>炫酷发光倒影按钮、<span style="font-size:14px;">19. </span>扁平预加载动画效果、<span style="font-size:14px;">20. </span>烟囱冒烟动画效果</span> </p> <p style="color:#424242;background-color:#FFFFFF;"> <span style="font-size:16px;"><br /></span> </p> <p style="color:#424242;background-color:#FFFFFF;"> <span style="font-size:16px;"><img src="https://img-bss.csdn.net/202003041008079147.png" alt="" /><img src="https://img-bss.csdn.net/202003041008221455.png" alt="" /><img src="https://img-bss.csdn.net/202003041008376365.png" alt="" /><br /></span> </p> <p style="color:#424242;background-color:#FFFFFF;"> <span style="font-size:16px;"><br /></span> </p>
©️2020 CSDN 皮肤主题: 创作都市 设计师:CSDN官方博客 返回首页