css3新增属性设置图片特效

最新推荐文章于 2024-07-28 20:04:07 发布

sdfujichao

最新推荐文章于 2024-07-28 20:04:07 发布

阅读量904

点赞数 1

分类专栏： css3 文章标签： css3新增属性 css3选择器平移 transform

本文链接：https://blog.csdn.net/sdfujichao/article/details/51863422

版权

css3 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

在这里主要用到了css3的选择器，还有transform属性，其中有平移，旋转，还有延时操作。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#content{width: 100%; height: auto;}
			.box{width: 32%; height: 300px;float: left;margin: 3px; border: 1px solid hotpink; position: relative; overflow: hidden;}
			.box img{position: absolute;transition: all 1s; left: 0px;top: 0;opacity: 1;}
			
			
			.one h2{transition: all 1s; position: absolute; left: 50px;top: 150px;color: white;font-weight: bolder;}
			.one:hover h2{transform: translate(0,-20px); }
			.one:hover img{ transform: translateX(-20px);opacity: 0.5;}
			
			.tow h2{transition: all 1s;position: absolute;}
			.tow .pOne{left: -130px;top: 130px; font-weight: bolder;color:white;}
			.tow .pTwo{left: -130px;top: 160px; font-weight: bolder;color: white;}
			.tow .pThree{left: -130px;top: 190px; font-weight: bolder;color: white;}
			
			.tow:hover img{ transform: translateX(-20px);opacity: 0.5;}
			.tow:hover .pOne{ transform: translateX(240px);transition-delay: 0.3s;}
			.tow:hover .pTwo{ transform: translateX(240px); transition-delay: 0.7s;}
			.tow:hover .pThree{ transform: translateX(240px);transition-delay: 1s;}
			
			.three:hover img{ transform: translateX(-20px);opacity: 0.5;}
			.three div{width: 100%; height: 50px; background: white;position: absolute;left: 0;bottom: -50px; transition: all 1s; }
			.three:hover div{transform: translateY(-50px);}
			
			.four:hover img{ transform: translateX(-20px);opacity: 0.5;}
			.four div{width: 130%; height: 100px; background: white; position: absolute;left: 0; bottom: -100px;transition: all 1s;}
			.four p{position: absolute;left: 250px; bottom: -30px;transition: all 1s;color: black; z-index: 2;font-weight: bolder}
			
			.four:hover div{transform-origin:0 0; transform: rotate(-15deg);}
			.four:hover p{transform: translateY(-50px);transition-delay: 0.3s;}				
			
			.frive:hover img{ transform: translateX(-20px);opacity: 0.5;}
			.frive div{transition: all 0.5s; width: 200px;height: 200px;border: 1px solid black;position: absolute;left: 0;top: -210px;}
			.frive:hover div{transform: translate(50%,260px) rotate(720deg);  }
			
			.six h2{position: absolute;left: 100px; top: 100px; transform: skew(90deg); transition: all 0.5s;}
			.six:hover img{ transform: translateX(-20px);opacity: 0.5;}			
			.six:hover h2{transform: skew(0deg);}
			
			.seven:hover img{ transform: translateX(-20px);opacity: 0.5; transform: scale(1); transition: all 1s ;}	
			.seven div{transition: all 1s ; transform: scale(1.2); position: absolute;left: 100px;top: 50px; border: 1px solid black;width: 200px; height: 200px;}		
			.seven h2{transform: scale(1.2);transition: all 1s ;}
			
			.seven:hover h2{transform: scale(1);}
			.seven:hover div{transform: scale(1);}
			.seven img{transform: scale(1.2);}
			
			.eight:hover img{ transform: translateX(-20px);opacity: 0.5;}			
			.eight .eightOne{ position: absolute;left: 55px;top: 50px; border-top: 1px solid white;width: 270px; height: 180px; border-bottom: 1px solid white;}
			.eight .eightTwo{ position: absolute;left: 100px;top: 20px; width: 180px; height: 250px; border-left: 1px solid white; border-right: 1px solid white;}
		</style>
	</head>
	<body>
		<div id="content">
			<div class="box one">
				<img src="img/img1.jpg"/>
				<h2>sdfujichao</h2>
			</div>
			<div class="box tow">
				<img src="img/img2.jpg"/>
				<h2 class="pOne">sdfujichao</h2>
				<h2 class="pTwo">sdfujichao</h2>
				<h2 class="pThree">sdfujichao</h2>
			</div>
			<div class="box three">
				<img src="img/img3.jpg"/>
				<div>的是否更多个人的个人sdafdsfds第三方的反倒是反倒是反倒是发的个个人Greg如果个热个人股份热风让我</div>
			</div>
			
			<div class="box four">
				<img src="img/img4.jpg"/>
				<p>sdfujichao</p>
				<div></div>
			</div>
			<div class="box frive">
				<img src="img/img5.jpg"/>
				<div></div>
			</div>
			<div class="box six">
				<img src="img/img5.jpg"/>
				<h2>sdfujichao</h2>
			</div>
			<div class="box seven">
				<img src="img/img5.jpg"/>
				<h2>sdfujichao</h2>
				<div></div>
			</div>
			<div class="box eight">
				<img src="img/img5.jpg"/>
				<div class="eightOne"></div>
				<div class="eightTwo"></div>
			</div>
		</div>
	</body>
</html>

运行结果截图

<img src="https://img-blog.csdn.net/20160708192046464?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />