HTML5特效庫 9款css3鼠標劃過圖片散開特效源碼

例

各位長友大家早上好，

今天給大家?guī)淼氖?9款css3鼠標劃過圖片散開特效源碼！

大家可以自行發(fā)揮做成自己喜歡的樣子！

若想要文件版源碼，請看評論區(qū)！

廢話不多說，上源碼！

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鼠標劃過圖片散開特效代碼 | 手機網(wǎng)站特效| 網(wǎng)頁特效庫</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旋轉(zhuǎn)圖：主要用css3中transform屬性中的rotate,translate;以及用來做舞臺效果的 perspective: 800px;(景深)和使立方體呈3d效果展示的transform-style：preserve-3d來實現(xiàn)；

全屏的雪花飄落：用原生js來實現(xiàn)(隨機的大小，透明度的變化等)，有詳細注釋；

html5主要是實現(xiàn)背景音樂和頭部的字體卷動效果。

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

html部分：

css部分

js部分

是不是也想要加入HTML5的學(xué)習(xí)呢？如果你想要在短時間內(nèi)掌握HTML5 專業(yè)技術(shù)，不妨就選擇千鋒重慶HTML5培訓(xùn)。千鋒重慶HTML5技術(shù)開發(fā)培訓(xùn)課程采用全程面授教學(xué)，拒絕視頻同步授課，拒絕雙元視頻班教學(xué)，拒絕直播授課，教師一對一指導(dǎo)學(xué)員做項目，全新打造“主流技術(shù)+前沿技術(shù)+企業(yè)級聯(lián)動”教學(xué)課程，重新優(yōu)化和定義HTML5技術(shù)，采用最新版本技術(shù)開展教學(xué)，致力于為學(xué)員打造最牛的、最新的技術(shù)，助力學(xué)員拿下BAT級企業(yè)Offer。

千鋒重慶HTML5技術(shù)開發(fā)培訓(xùn)，讓你在同樣的起跑線，跑出不一樣的高度。

果圖

各位叔叔阿姨，大哥大姐，弟弟妹妹，全國的老少爺們大家好！

今天給大家?guī)淼腍TML5特效屬于banner輪播的切換效果

若想要文件源碼，請看評論區(qū)

廢話不多說，上源碼！

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小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

HTML5特效庫 9款css3鼠標劃過圖片散開特效源碼

CSS源碼：

index：

CSS源碼：

您的項目需求