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">

<head>

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

</head>

<body>

</div>

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

</div>

</div>

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

</div>

</div>

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

</div>

</div>

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

</div>

</div>

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

</div>

</div>

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

</div>

</div>

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

</div>

</div>

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

</div>

</div>

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

</div>

</div>

</body>

</html>

d旋转图：主要用css3中transform属性中的rotate,translate;以及用来做舞台效果的 perspective: 800px;(景深)和使立方体呈3d效果展示的transform-style：preserve-3d来实现；

全屏的雪花飘落：用原生js来实现(随机的大小，透明度的变化等)，有详细注释；

html5主要是实现背景音乐和头部的字体卷动效果。

< audio src=“music.mp3” hidden=“true” loop=“true” preload=“auto”>< /audio> 或者< embed src=“music.mp3” type=""/>

html部分：

css部分

js部分

是不是也想要加入HTML5的学习呢？如果你想要在短时间内掌握HTML5 专业技术，不妨就选择千锋重庆HTML5培训。千锋重庆HTML5技术开发培训课程采用全程面授教学，拒绝视频同步授课，拒绝双元视频班教学，拒绝直播授课，教师一对一指导学员做项目，全新打造“主流技术+前沿技术+企业级联动”教学课程，重新优化和定义HTML5技术，采用最新版本技术开展教学，致力于为学员打造最牛的、最新的技术，助力学员拿下BAT级企业Offer。

千锋重庆HTML5技术开发培训，让你在同样的起跑线，跑出不一样的高度。

果图

各位叔叔阿姨，大哥大姐，弟弟妹妹，全国的老少爷们大家好！

今天给大家带来的HTML5特效属于banner轮播的切换效果

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

废话不多说，上源码！

CSS源码：

/* General Demo Style */

@import url(http://fonts.useso.com/css?family=Lato:300,400,700);

@font-face {

font-family: 'AnimalsNormal';

src: url('fonts/animals-webfont.eot');

src: url('fonts/animals-webfont.eot?#iefix') format('embedded-opentype'),

url('fonts/animals-webfont.woff') format('woff'),

url('fonts/animals-webfont.ttf') format('truetype'),

url('fonts/animals-webfont.svg#AnimalsNormal') format('svg');

font-weight: normal;

font-style: normal;

}

在线咨询

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

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

CSS源码：

index：

CSS源码：

您的项目需求