以下是 css3鼠标滑过图片文字动画特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css3鼠标滑过图片文字动画特效</title>
<link rel="stylesheet" type="text/css" href="css/app.css">
</head>
<body class="content">
<div class="style1">
<h2>1.鼠标悬停图片变大文字消失</h2>
<ul>
<li><img src="img/1.jpg"><span>鼠标悬停图片变大文字消失</span></li>
<li><img src="img/2.jpg"><span>鼠标悬停图片变大文字消失</span></li>
<li><img src="img/3.jpg"><span>鼠标悬停图片变大文字消失</span></li>
<li><img src="img/4.jpg"><span>鼠标悬停图片变大文字消失</span></li>
</ul>
</div>
<div style="clear:both"></div>
<div class="style2">
<h2>2.鼠标悬停文字消失</h2>
<ul>
<li><img src="img/1.jpg"><span>鼠标悬停文字消失</span></li>
<li><img src="img/2.jpg"><span>鼠标悬停文字消失</span></li>
<li><img src="img/3.jpg"><span>鼠标悬停文字消失</span></li>
<li><img src="img/4.jpg"><span>鼠标悬停文字消失</span></li>
</ul>
</div>
<div style="clear:both"></div>
<div class="style3">
<h2>3.鼠标悬停整体旋转</h2>
<ul>
<li><img src="img/1.jpg"><span>鼠标悬停整体旋转</span></li>
<li><img src="img/2.jpg"><span>鼠标悬停整体旋转</span></li>
<li><img src="img/3.jpg"><span>鼠标悬停整体旋转</span></li>
<li><img src="img/4.jpg"><span>鼠标悬停整体旋转</span></li>
</ul>
</div>
<div style="clear:both"></div>
<div class="style4">
<h2>4.鼠标悬停整体旋转放大</h2>
<ul>
<li><img src="img/1.jpg"><span>鼠标悬停整体旋转放大</span></li>
<li><img src="img/2.jpg"><span>鼠标悬停整体旋转放大</span></li>
<li><img src="img/3.jpg"><span>鼠标悬停整体旋转放大</span></li>
<li><img src="img/4.jpg"><span>鼠标悬停整体旋转放大</span></li>
</ul>
</div>
<div style="clear:both"></div>
<div class="style5">
<h2>5.鼠标悬停整体上升</h2>
<ul>
<li><img src="img/1.jpg"><span>鼠标悬停整体上升</span></li>
<li><img src="img/2.jpg"><span>鼠标悬停整体上升</span></li>
<li><img src="img/3.jpg"><span>鼠标悬停整体上升</span></li>
<li><img src="img/4.jpg"><span>鼠标悬停整体上升</span></li>
</ul>
</div>
<div style="clear:both"></div>
</body>
</html>
CSS代码(app.css):
/** *CSS榧犳爣婊戣繃鐗规晥 * 2016骞?鏈?鏃?14:26:05 * 浣滆€咃細imo * 鍙嶉锛?05500091@qq.com * 杞荤偣鍠?.. **/
/*****鍏ㄥ眬閫氱敤*****/
*{padding:0;margin:0;font-family:"寰蒋闆呴粦"}
h2{margin:15px 0;font-weight:300;}
.content{margin:0 auto;max-width:728px;margin-top:20px;text-align:center}
/*****榧犳爣鎮仠鍥剧墖鍙樺ぇ鏂囧瓧娑堝け*****/
.style1 ul li{float:left;margin:0 6px;position:relative;list-style:none}
.style1 ul li{-webkit-transition:all 0.5s;-moz-transition:all 0.5s;-o-transition:all 0.5s;}
.style1 ul li img{width:170px;height:120px;border-radius:2px;}
.style1 ul li span{background:rgba(0,0,0,0.5);color:#fff;border-bottom-left-radius:2px;border-bottom-right-radius:2px;line-height:23px;position:absolute;bottom:3px;width:170px;left:0;font-size:12px;-webkit-transition:all 0.5s;-moz-transition:all 0.5s;-o-transition:all 0.5s;-ms-transition:all 0.5s;}
.style1 ul li:hover{-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-o-transform:scale(1.1);-ms-transform:scale(1.1);}
.style1 ul li:hover span{opacity:0}
/*****榧犳爣鎮仠鏂囧瓧娑堝け*****/
.style2 ul li{float:left;margin:0 6px;position:relative;list-style:none}
.style2 ul li img{width:170px;height:120px;border-radius:2px;-webkit-transition:all 0.5s;-moz-transition:all 0.5s;-o-transition:all 0.5s;}
.style2 ul li span{background:rgba(0,0,0,0.5);color:#fff;border-bottom-left-radius:2px;border-bottom-right-radius:2px;line-height:23px;position:absolute;bottom:3px;width:170px;left:0;font-size:12px;-webkit-transition:all 0.5s;-moz-transition:all 0.5s;-o-transition:all 0.5s;-ms-transition:all 0.5s;}
.style2 ul li:hover span{opacity:0}
/*****榧犳爣鎮仠鏁翠綋鏃嬭浆*****/
.style3 ul li{float:left;margin:0 6px;position:relative;list-style:none}
.style3 ul li{-webkit-transition:all 0.5s;-moz-transition:all 0.5s;-o-transition:all 0.5s;}
.style3 ul li img{width:170px;height:120px;border-radius:2px;}
.style3 ul li span{background:rgba(0,0,0,0.5);color:#fff;border-bottom-left-radius:2px;border-bottom-right-radius:2px;line-height:23px;position:absolute;bottom:3px;width:170px;left:0;font-size:12px;transition:All 0.4s ease-in-out;-webkit-transition:All 0.4s ease-in-out;-moz-transition:All 0.4s ease-in-out;-o-transition:All 0.4s ease-in-out;}
.style3 ul li:hover{transform:rotate(360deg);-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg);}
/*****榧犳爣鎮仠鏁翠綋鏃嬭浆鏀惧ぇ*****/
.style4 ul li{float:left;margin:0 6px;position:relative;list-style:none}
.style4 ul li{transition:All 0.4s ease-in-out;-webkit-transition:All 0.4s ease-in-out;-moz-transition:All 0.4s ease-in-out;-o-transition:All 0.4s ease-in-out;}
.style4 ul li img{width:170px;height:120px;border-radius:2px;}
.style4 ul li span{background:rgba(0,0,0,0.5);color:#fff;border-bottom-left-radius:2px;border-bottom-right-radius:2px;line-height:23px;position:absolute;bottom:3px;width:170px;left:0;font-size:12px;transition:All 0.4s ease-in-out;-webkit-transition:All 0.4s ease-in-out;-moz-transition:All 0.4s ease-in-out;-o-transition:All 0.4s ease-in-out;}
.style4 ul li:hover{transform:rotate(360deg) scale(1.2);-webkit-transform:rotate(360deg) scale(1.2);-moz-transform:rotate(360deg) scale(1.2);-o-transform:rotate(360deg) scale(1.2);-ms-transform:rotate(360deg) scale(1.2);}
/*****榧犳爣鎮仠鏁翠綋涓婂崌*****/
.style5 ul li{float:left;margin:0 6px;position:relative;list-style:none}
.style5 ul li{transition:All 0.4s ease-in-out;-webkit-transition:All 0.4s ease-in-out;-moz-transition:All 0.4s ease-in-out;-o-transition:All 0.4s ease-in-out;}
.style5 ul li img{width:170px;height:120px;border-radius:2px;}
.style5 ul li span{background:rgba(0,0,0,0.5);color:#fff;border-bottom-left-radius:2px;border-bottom-right-radius:2px;line-height:23px;position:absolute;bottom:3px;width:170px;left:0;font-size:12px;transition:All 0.4s ease-in-out;-webkit-transition:All 0.4s ease-in-out;-moz-transition:All 0.4s ease-in-out;-o-transition:All 0.4s ease-in-out;}
.style5 ul li:hover{transform:translate(0,-10px);-webkit-transform:translate(0,-10px);-moz-transform:translate(0,-10px);-o-transform:translate(0,-10px);-ms-transform:translate(0,-10px);}
分享到QQ
分享到微博
微信扫一扫
