zoukankan html css js c++ java
图片鼠标悬浮特效

参考链接：http://blog.csdn.net/libin_1/article/details/50879505
http://www.cnblogs.com/libin-1/p/5770699.html
<!DOCTYPE html>
<html>

	<head>
		<title>demo</title>
		<meta charset="UTF-8">
		<style type="text/css">
			* {
				padding: 0px;
				margin: 0px;
				color: red;
			}
			
			body {
				 100%;
			}
			
			figure {
				 33.33%;
				height: 300px;
				position: relative;
				float: left;
				overflow: hidden;
			}
			
			figure img {
				 100%;
				display: block;
			}
			
			figcaption {
				 100%;
				height: 100%;
				transform: translateX(0px);
				position: absolute;
				left: 0px;
				top: 0px;
			}
			
			figcaption * {
				transition: all 1s ease-in;
			}
			/**********test1***********/
			
			.test1 figcaption h2 {
				transform: translateX(-100px);
			}
			
			.test1 figcaption p {
				margin: 15px;
				transition-delay: 0.5s;
				transform: translateX(-100px);
			}
			
			.test1 img {
				transition: all 1s;
			}
			
			.test1:hover img {
				transform: scale(1.5);
			}
			
			.test1:hover figcaption h2 {
				transform: translateX(30px);
			}
			
			.test1:hover figcaption p {
				transform: translateX(30px);
			}
			/**********test2***********/
			
			.test2 figcaption h2,
			.test2 figcaption p {
				text-align: center;
				transform: translateY(100px);
			}
			
			.test2 figcaption div {
				 80%;
				height: 80%;
				border: 2px solid red;
				transform: translate(10%, -150%) rotate(0deg);
			}
			
			.test2:hover figcaption div {
				transform: translate(10%, -10%) rotate(360deg);
			}
			/**********test3***********/
			
			.test3 figcaption h2,
			.test3 figcaption p {
				text-align: center;
				transform: translateY(100px) skew(90deg);
			}
			
			.test3:hover figcaption h2 {
				transform: translateY(100px) skew(0deg);
			}
			
			.test3:hover figcaption p {
				transform: translateY(100px) skew(0deg);
			}
			/**********test4***********/
			
			.test4 figcaption h2,
			.test4 figcaption p {
				text-align: center;
				transform: translateY(100px);
			}
			
			.test4 figcaption div {
				 80%;
				height: 80%;
				border: 2px solid red;
				transform: translate(10%, -10%) scale(1.3);
				opacity: 0;
			}
			
			.test4:hover figcaption div {
				opacity: 1;
				transform: translate(10%, -10%) scale(1);
			}
			/**********test5***********/
			
			.test5 figcaption h2,
			.test5 figcaption p {
				text-align: center;
				transform: translateY(100px);
			}
			
			.test5 figcaption div {
				 110%;
				height: 100%;
				border: 2px solid red;
				position: absolute;
				left: 0px;
				top: 300px;
				transform-origin: left top;
				background: red;
			}
			
			.test5:hover figcaption div {
				transform: rotate(-15deg);
			}
			/**********test6***********/
			
			.test6 figcaption h2,
			.test6 figcaption p {
				text-align: center;
				transform: translateY(100px);
			}
			
			.test6 figcaption div {
				text-align: center;
				font-size: 36px;
				line-height: 60px;
				color: red;
				 100%;
				height: 60px;
				background: green;
				position: absolute;
				top: 300px;
				left: 0px;
			}
			
			.test6 img {
				transition: all 1s ease-in;
			}
			
			.test6:hover img {
				transform: translateY(-60px);
			}
			
			.test6:hover figcaption div {
				top: 240px;
			}
			/**********test7***********/
			
			.test7 figcaption h2,
			.test7 figcaption p {
				text-align: center;
				transform: translateY(100px);
			}
			
			.test7 .outter {
				position: absolute;
				top: 15%;
				left: 10%;
				 80%;
				height: 70%;
				border-top: 2px solid red;
				border-bottom: 2px solid red;
				opacity: 1;
				transform: translateX(-500px);
			}
			
			.test7 .inner {
				position: absolute;
				top: 10%;
				left: 15%;
				 70%;
				height: 80%;
				opacity: 1;
				border-left: 2px solid red;
				border-right: 2px solid red;
				transform: translateY(400px);
			}
			
			.test7:hover .outter {
				transform: translateX(0px);
			}
			
			.test7:hover .inner {
				transform: translateY(0px);
			}
			/**********test8***********/
			
			.test8 figcaption h2,
			.test8 figcaption p {
				text-align: center;
				transform: translateY(100px);
			}
			
			.test8 .outter {
				position: absolute;
				top: 15%;
				left: 10%;
				 80%;
				height: 70%;
				border-top: 2px solid red;
				border-bottom: 2px solid red;
				opacity: 1;
				transform: rotateY(90deg);
			}
			
			.test8 .inner {
				position: absolute;
				top: 10%;
				left: 15%;
				 70%;
				height: 80%;
				opacity: 1;
				border-left: 2px solid red;
				border-right: 2px solid red;
				transform: rotateX(90deg);
			}
			
			.test8:hover .outter {
				transform: rotateY(0deg);
			}
			
			.test8:hover .inner {
				transform: rotateX(0deg);
			}
			/**********test9***********/
			
			.test9 figcaption h2,
			.test9 figcaption p {
				text-align: center;
				transform: translateY(100px);
			}
			
			.test9 .outter {
				position: absolute;
				top: 15%;
				left: 10%;
				 80%;
				height: 70%;
				border-top: 2px solid red;
				border-bottom: 2px solid red;
				opacity: 1;
				transform: skewX(90deg);
			}
			
			.test9 .inner {
				position: absolute;
				top: 10%;
				left: 15%;
				 70%;
				height: 80%;
				opacity: 1;
				border-left: 2px solid red;
				border-right: 2px solid red;
				transform: skewY(90deg);
			}
			
			.test9:hover .outter {
				transform: skewX(0deg);
			}
			
			.test9:hover .inner {
				transform: skewY(0deg);
			}
			/**********test10***********/
			.test10 figcaption{
				transition: all 1s;
				transform: translateY(250px);
				background: rgba(0,0,0,0.8);
			}
			.test10 figcaption h2,
			.test10 figcaption p {
				text-align: center;
				line-height: 35px;
				transform: translateY(10px);
			}
			.test10:hover figcaption{
				transform: translateY(0px);
			}
			.test10:hover figcaption h2{
				transform: translateY(80px);
			}
			.test10:hover figcaption p{
				transform: translateY(80px);
			}
		</style>
	</head>

	<body>
		<figure class="test1">
			<img src="img/class1.jpg" />
			<figcaption>
				<h2>图片标题</h2>
				<p>图片描述1</p>
				<p>图片描述2</p>
				<p>图片描述3</p>
			</figcaption>
		</figure>

		<figure class="test2">
			<img src="img/class2.jpg" />
			<figcaption>
				<h2>旋转动画</h2>
				<p>飞来飞去，飞来飞舞</p>
				<div></div>
			</figcaption>
		</figure>

		<figure class="test3">
			<img src="img/class3.jpg" />
			<figcaption>
				<h2>斜切动画</h2>
				<p>斜切动画，变形显示</p>
			</figcaption>
		</figure>

		<figure class="test4">
			<img src="img/class4.jpg" />
			<figcaption>
				<h2>缩放动画</h2>
				<p>缩放动画，缩放显示</p>
				<div></div>
			</figcaption>
		</figure>

		<figure class="test5">
			<img src="img/class5.jpg" />
			<figcaption>
				<h2>旋转</h2>
				<p>酷酷的旋转</p>
				<div></div>
			</figcaption>
		</figure>

		<figure class="test6">
			<img src="img/class6.jpg" />
			<figcaption>
				<h2>复合</h2>
				<p>感觉萌萌的</p>
				<div>this is my page!</div>
			</figcaption>
		</figure>

		<figure class="test7">
			<img src="img/class1.jpg" />
			<figcaption>
				<h2>复合</h2>
				<p>感觉萌萌的</p>
				<div class="outter"></div>
				<div class="inner"></div>
			</figcaption>
		</figure>

		<figure class="test8">
			<img src="img/class2.jpg" />
			<figcaption>
				<h2>复合</h2>
				<p>感觉萌萌的</p>
				<div class="outter"></div>
				<div class="inner"></div>
			</figcaption>
		</figure>

		<figure class="test9">
			<img src="img/class3.jpg" />
			<figcaption>
				<h2>复合</h2>
				<p>感觉萌萌的</p>
				<div class="outter"></div>
				<div class="inner"></div>
			</figcaption>
		</figure>
		<figure class="test10">
			<img src="img/class3.jpg" />
			<figcaption>
				<h2>复合</h2>
				<p>感觉萌萌的</p>
				<div class="outter"></div>
				<div class="inner"></div>
			</figcaption>
		</figure>
	</body>

</html>
查看全文
相关阅读:
HDU2767 Proving Equivalences
POJ2771 Guardian of Decency
POJ1111 Image Perimeters
简单就好
 工具乃思维的奴隶
 “年终奖”
学点经济学知识（二）
被忽略的技能
 猿类己见
 学点经济学知识（一）
原文地址：https://www.cnblogs.com/libin-1/p/5779392.html