HTML5特效库 9款css3鼠标划过图片散开特效源码

HTML5特效库  9款css3鼠标划过图片散开特效源码

案例

各位长友大家早上好,

今天给大家带来的是 9款css3鼠标划过图片散开特效源码!

大家可以自行发挥做成自己喜欢的样子!

若想要文件版源码,请看评论区

废话不多说,上源码!

CSS源码:

body {

margin: 0px;

padding: 0px;

background-color: #C3CCD5;

font-family: 'Source Sans Pro', sans-serif;

}

.albums{

width: 100%;

float: left;

}

.albums-inner{

width: 1100px;

margin-top: 20px;

margin-right: auto;

margin-left: auto;

}

.albums-title {

float: left;

width: 100%;

color: rgba(53,117,159,1);

font-size: 20px;

border-bottom-width: 2px;

border-bottom-style: solid;

border-bottom-color: rgba(53,117,159,1);

line-height: 50px;

margin-bottom: 100px;

}

.albums-tab{

float: left;

width: 300px;

margin-right: 100px;

margin-bottom: 100px;

}

.albums-tab:nth-child(3n+0) {

margin-right: 0px;

}

.albums-tab-thumb{

float: left;

width: 300px;

height: 200px;

}

.albums-tab-thumb img {

height: auto;

width: 290px;

background-color: rgba(255,255,255,1);

padding: 5px;

}

.albums-tab-text{

float: left;

width: 100%;

text-align: center;

color: rgba(53,117,159,1);

margin-top: 15px;

font-size: 18px;

}

.albums-tab-text span {

font-size: 14px;

color: rgba(102,102,102,1);

}

index:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>9款css3鼠标划过图片散开特效代码 | 手机网站特效| 网页特效库</title>

<meta name="keywords" content="SVG特效, 手机微信网站特效, css3动画, html5特效, 网页特效" />

<link href="css/main.css" rel="stylesheet" type="text/css"/>

<link href="css/sim-prev-anim.css" rel="stylesheet" type="text/css" />

</head>

<body>

<div class="albums">

<div class="albums-inner">

<div class="albums-tab">

<div class="albums-tab-thumb sim-anim-1">

<img src="images/studio_0001.jpg" class="all studio"/>

<img src="images/studio_0002.jpg" class="all studio"/>

<img src="images/studio_0003.jpg" class="all studio"/>

<img src="images/studio_0004.jpg" class="all studio"/>

<img src="images/studio_0005.jpg" class="all studio"/>

<img src="images/studio_0006.jpg" class="all studio"/>

<img src="images/studio_0001.jpg" class="all studio"/>

</div>

<div class="albums-tab-text">.sim-anim-1 <span>(7 pictures)</span></div>

</div>

<div class="albums-tab">

<div class="albums-tab-thumb sim-anim-2">

<img src="images/studio_0001.jpg" class="all studio"/>

<img src="images/studio_0002.jpg" class="all studio"/>

<img src="images/studio_0003.jpg" class="all studio"/>

<img src="images/studio_0004.jpg" class="all studio"/>

<img src="images/studio_0010.jpg" class="all studio"/>

</div>

<div class="albums-tab-text">.sim-anim-2 <span>(5 pictures)</span></div>

</div>

<div class="albums-tab">

<div class="albums-tab-thumb sim-anim-3">

<img src="images/studio_0001.jpg" class="all studio"/>

<img src="images/studio_0002.jpg" class="all studio"/>

<img src="images/studio_0003.jpg" class="all studio"/>

<img src="images/studio_0004.jpg" class="all studio"/>

<img src="images/studio_0005.jpg" class="all studio"/>

<img src="images/studio_0006.jpg" class="all studio"/>

<img src="images/studio_0007.jpg" class="all studio"/>

<img src="images/studio_0008.jpg" class="all studio"/>

<img src="images/studio_0011.jpg" class="all studio"/>

</div>

<div class="albums-tab-text">.sim-anim-3 <span>(9 pictures)</span></div>

</div>

<div class="albums-tab">

<div class="albums-tab-thumb sim-anim-4">

<img src="images/studio_0001.jpg" class="all studio"/>

<img src="images/studio_0002.jpg" class="all studio"/>

<img src="images/studio_0003.jpg" class="all studio"/>

<img src="images/studio_0004.jpg" class="all studio"/>

<img src="images/studio_0005.jpg" class="all studio"/>

<img src="images/studio_0006.jpg" class="all studio"/>

<img src="images/studio_0007.jpg" class="all studio"/>

<img src="images/studio_0008.jpg" class="all studio"/>

<img src="images/studio_0009.jpg" class="all studio"/>

</div>

<div class="albums-tab-text">.sim-anim-4 <span>(9 pictures)</span></div>

</div>

<div class="albums-tab">

<div class="albums-tab-thumb sim-anim-5">

<img src="images/studio_0001.jpg" class="all studio"/>

<img src="images/studio_0002.jpg" class="all studio"/>

<img src="images/studio_0003.jpg" class="all studio"/>

<img src="images/studio_0004.jpg" class="all studio"/>

<img src="images/studio_0005.jpg" class="all studio"/>

</div>

<div class="albums-tab-text">.sim-anim-5 <span>(5 pictures)</span></div>

</div>

<div class="albums-tab">

<div class="albums-tab-thumb sim-anim-6">

<img src="images/studio_0001.jpg" class="all studio"/>

<img src="images/studio_0009.jpg" class="all studio"/>

<img src="images/studio_0003.jpg" class="all studio"/>

<img src="images/studio_0004.jpg" class="all studio"/>

<img src="images/studio_0005.jpg" class="all studio"/>

<img src="images/studio_0006.jpg" class="all studio"/>

<img src="images/studio_0007.jpg" class="all studio"/>

<img src="images/studio_0008.jpg" class="all studio"/>

<img src="images/studio_0002.jpg" class="all studio"/>

</div>

<div class="albums-tab-text">.sim-anim-6 <span>(9 pictures)</span></div>

</div>

<div class="albums-tab">

<div class="albums-tab-thumb sim-anim-7">

<img src="images/studio_0001.jpg" class="all studio"/>

<img src="images/studio_0002.jpg" class="all studio"/>

<img src="images/studio_0003.jpg" class="all studio"/>

<img src="images/studio_0004.jpg" class="all studio"/>

</div>

<div class="albums-tab-text">.sim-anim-7 <span>(4 pictures)</span></div>

</div>

<div class="albums-tab">

<div class="albums-tab-thumb sim-anim-8">

<img src="images/studio_0001.jpg" class="all studio"/>

<img src="images/studio_0002.jpg" class="all studio"/>

<img src="images/studio_0009.jpg" class="all studio"/>

<img src="images/studio_0004.jpg" class="all studio"/>

<img src="images/studio_0005.jpg" class="all studio"/>

<img src="images/studio_0006.jpg" class="all studio"/>

<img src="images/studio_0007.jpg" class="all studio"/>

<img src="images/studio_0008.jpg" class="all studio"/>

<img src="images/studio_0003.jpg" class="all studio"/>

</div>

<div class="albums-tab-text">.sim-anim-8 <span>(9 pictures)</span></div>

</div>

<div class="albums-tab">

<div class="albums-tab-thumb sim-anim-9">

<img src="images/studio_0001.jpg" class="all studio"/>

<img src="images/studio_0002.jpg" class="all studio"/>

<img src="images/studio_0003.jpg" class="all studio"/>

<img src="images/studio_0004.jpg" class="all studio"/>

<img src="images/studio_0005.jpg" class="all studio"/>

<img src="images/studio_0009.jpg" class="all studio"/>

<img src="images/studio_0007.jpg" class="all studio"/>

<img src="images/studio_0008.jpg" class="all studio"/>

<img src="images/studio_0006.jpg" class="all studio"/>

</div>

<div class="albums-tab-text">.sim-anim-9 <span>(9 pictures)</span></div>

</div>

</div>

</div>

<div style="width: 100%; height: 50px; line-height: 50px; text-align: center;">

TT

</div>

</body>

</html>