您好,游客注册登录繁體
首页 >> css3 >> CSS3鼠标悬停图片动画 多种文字动画效果

CSS3鼠标悬停图片动画 多种文字动画效果

Tyna 2015-08-03 0
浏览次数821
 
这是一款基于CSS3的图片鼠标悬停动画,这款CSS3应用的特点是当鼠标移动至图片上方时,在图片上将会出现自定义的动画,可以是文字动画、图标动画等。另外,这款CSS3鼠标悬停图片动画的形式非常丰富,基本可以满足你的需求。
 
css3-image-mouse-hover
 

在线演示源码下载

 
下面我们一起来看看实现这款CSS3鼠标悬停动画的过程和代码,代码主要由HTML和CSS组成。
 

HTML代码:

 

<div class="grid">
			<figure class="effect-lily">
				<img src="img/12.jpg" alt="img12"/>
				<figcaption>
					<div>
						<h2>Nice <span>Lily</span></h2>
						<p>Lily likes to play with crayons and pencils</p>
					</div>
					<a href="http://www.bdyingbin.com/css/">View more</a>
				</figcaption>			
			</figure>
			<figure class="effect-lily">
				<img src="img/1.jpg" alt="img1"/>
				<figcaption>
					<div>
						<h2>Nice <span>Lily</span></h2>
						<p>Lily likes to play with crayons and pencils</p>
					</div>
					<a href="http://www.bdyingbin.com/css/">View more</a>
				</figcaption>			
			</figure>
		</div>


 
这里我们一两张图片为例,下面是渲染的CSS代码
 

CSS代码

 

figure.effect-lily img {
	max-width: none;
	width: -webkit-calc(100% + 50px);
	width: calc(100% + 50px);
	opacity: 0.7;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(-40px,0, 0);
	transform: translate3d(-40px,0,0);
}
 
figure.effect-lily figcaption {
	text-align: left;
}
 
figure.effect-lily figcaption > div {
	position: absolute;
	bottom: 0;
	left: 0;
	padding: 2em;
	width: 100%;
	height: 50%;
}
  
figure.effect-lily h2,
figure.effect-lily p {
	-webkit-transform: translate3d(0,40px,0);
	transform: translate3d(0,40px,0);
}
 
figure.effect-lily h2 {
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
}
 
figure.effect-lily p {
	color: rgba(255,255,255,0.8);
	opacity: 0;
	-webkit-transition: opacity 0.2s, -webkit-transform 0.35s;
	transition: opacity 0.2s, transform 0.35s;
}
 
figure.effect-lily:hover img,
figure.effect-lily:hover p {
	opacity: 1;
}
 
figure.effect-lily:hover img,
figure.effect-lily:hover h2,
figure.effect-lily:hover p {
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}
 
figure.effect-lily:hover p {
	-webkit-transition-delay: 0.05s;
	transition-delay: 0.05s;
	-webkit-transition-duration: 0.35s;
	transition-duration: 0.35s;
}


 
其他的效果大家可以下载源码来看看,效果很不错。
 

在线演示源码下载

 

学习来源:http://www.html5tricks.com/css3-image-mouse-hover.html
 

全部评论:0

需要登录才能发表评论!

需要 登录 才能发表评论

<