整合營銷服務(wù)商

          電腦端+手機端+微信端=數(shù)據(jù)同步管理

          免費咨詢熱線:

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

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

          <head>

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

          <title>9款css3鼠標劃過圖片散開特效代碼 | 手機網(wǎng)站特效| 網(wǎng)頁特效庫</title>

          <meta name="keywords" content="SVG特效, 手機微信網(wǎng)站特效, css3動畫, html5特效, 網(wǎng)頁特效" />

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

          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;

          }


          主站蜘蛛池模板: 在线|一区二区三区| 国产麻豆精品一区二区三区 | 99精品高清视频一区二区| 国产精品制服丝袜一区| 无码一区二区三区免费| 久久无码一区二区三区少妇| 亚洲欧美国产国产综合一区| 国99精品无码一区二区三区| 亚洲日韩精品一区二区三区无码| 日本一区二区三区在线网| 国产成人精品无码一区二区老年人 | 亚洲一区二区三区高清视频| 亚洲日本一区二区三区在线| 成人一区二区免费视频| 久久国产精品一区| 91福利国产在线观看一区二区| 国产观看精品一区二区三区| 国产vr一区二区在线观看| 一区二区3区免费视频| 精品成人av一区二区三区| 国产AⅤ精品一区二区三区久久| 无码精品人妻一区二区三区影院| 日韩电影在线观看第一区| 亚洲一区精品伊人久久伊人| 国产亚洲一区二区三区在线不卡| 精品一区二区三区高清免费观看| 成人午夜视频精品一区| 中文字幕aⅴ人妻一区二区| 久久久久成人精品一区二区| 无码人妻精品一区二区在线视频 | 久久无码人妻一区二区三区午夜 | 亚洲AV成人精品一区二区三区| 怡红院一区二区在线观看| 精品成人一区二区三区免费视频 | 一区在线免费观看| 美女视频一区二区三区| 日本精品一区二区三区在线视频一| 福利一区在线视频| 日韩精品无码视频一区二区蜜桃| 日韩人妻一区二区三区蜜桃视频| 亚洲国产精品一区二区久久|