过渡与变形

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>过渡与变形</title>
		<style type="text/css">
			#box{
				width: 570px;
				height: 160px;
				background: black;
			}
		   div[id^=one]{
				text-align: center;
				font-family: "微软雅黑";
				color: white;
				font-size:10px;
				display:inline-block;
				margin: 10px 45px 10px 62px;
		   }
		   div[id^=p]{
				width: 100px;
				height: 100px;
				border-radius: 4px;
				border:solid 4px white;
				display: inline-block;
				margin-left: 25px;
		   }
		   #p1{
		   		background-image: url(A.jfif);
		   		background-size: 100px;
		   		transition: 2s ease;
		   }
		   #p1:hover{
				width: 100px;
				height: 100px;
				border-radius: 50%;
				border:solid 4px white;
				box-shadow: gray 11px 7px 9px;  
	1	   }
		   #p2{
		   		background-image: url(B.jfif);
		   		background-size: 100px;
		   		transition: 2s ease;
		   }
		   #p2:hover{
				border-radius: 4px;
		   		border:solid 4px white;
				transform: scale(1.3);	
				box-shadow: gray 11px 7px 9px;
		   }
		   #p3{
		   		background-image: url(C.jfif);
		   		background-size: 100px;
		   		transition: 2s ease;
		   }
		   #p3:hover{
		   		width: 100px;
		   		height: 100px;
				transform:rotate(270deg);
		   		border:solid 4px white;
				box-shadow: gray 11px 7px 9px;
		   }
		   #p4{
		   		background-image: url(D.jfif);
		   		background-size: 100px;
		   		transition: 2s ease;
		   }
		   #p4:hover{
		   		width: 100px;
		   		height: 100px;
		   		opacity: 0.3;
		   		border:solid 4px white;
				box-shadow: gray 11px 7px 9px;
		   }
		</style>
	</head>
	<body>
		<div id="box">
			<div>
			<div id="one1">photo</div>
			<div id="one2">photo</div>
			<div id="one3">photo</div>
			<div id="one4">photo</div>
			</div>
			<div id="p1"></div>
			<div id="p2"></div>
			<div id="p3"></div>
			<div id="p4"></div>
		</div>
	</body>
</html>
发布了2 篇原创文章 · 获赞 0 · 访问量 40
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 游动-白 设计师: 上身试试

分享到微信朋友圈

×

扫一扫,手机浏览