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:

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

.sim-anim-1 (7 pictures)

.sim-anim-2 (5 pictures)

.sim-anim-3 (9 pictures)

.sim-anim-4 (9 pictures)

.sim-anim-5 (5 pictures)

.sim-anim-6 (9 pictures)

.sim-anim-7 (4 pictures)

.sim-anim-8 (9 pictures)

.sim-anim-9 (9 pictures)

TT

推荐阅读

分类标签

加入我们

热门文章