器之心原創
作者:陳萍
不同于人類,計算機「看待」世界有自己的方式。為了達到類似人類的視覺水平,各種算法層出不窮,本篇就來窺探其冰山一角。
我們生活的世界是一個三維物理空間。直觀而言,三維視覺系統有助于機器更好地感知和理解真實的三維場景。三維視覺作為計算機視覺的一個比較重要的研究方向,在過去幾十年間得到了扎實和系統地發展,形成了一套完整的理論體系。近年來,隨著三維成像技術如激光雷達、TOF 相機及結構光等的快速發展,三維視覺研究再次成為研究熱點。
在上一篇文章中,我們對 3D 視覺基礎相關內容進行了概括性總結,本文我們將進行比較深層次的介紹,主要涉及 3D 視覺算法及其應用領域。
3D 目標檢測多模態融合算法
基于視覺的目標檢測是環境感知系統的重要組成,也是計算機視覺、機器人研究等相關領域的研究熱點。三維目標檢測是在二維目標檢測的基礎上,增加目標尺寸、深度、姿態等信息的估計。相比于二維目標檢測,三維目標檢測在準確性、實時性等方面仍有較大的提升空間。
在目標檢測領域,2D 目標檢測方面發展迅速,出現了以 R-CNN、Fast RCNN、Mask RCNN 為代表的 two-stage 網絡架構,以及以 YOLO、SSD 為代表的 one-stage 網絡架構。然而由于 2D 圖像缺乏深度、尺寸等物理世界參數信息,在實際應用中存在一定局限性,往往需要結合激光雷達、毫米波等傳感器實現多模態融合算法,以增強系統的可靠性。
因此,研究者們提出了許多 3D 目標檢測方法,根據傳感器的不同大致可分為視覺、激光點云以及多模態融合三大類。其中視覺又包括單目視覺和雙目視覺(深度視覺)兩類;激光點云包括三維點云投影和三維空間體素特征;而多模態融合實現了激光點云與視覺的融合。下面將對現階段比較流行的 3D 目標檢測多模態融合算法研究進行介紹。
論文 1《3D-CVF: Generating Joint Camera and LiDAR Features Using Cross-View Spatial Feature Fusion for 3D Object Detection》提出了 voxel-based 的多模態特征融合。
論文地址:https://arxiv.org/pdf/2004.12636
該研究提出的網絡整體結構如下所示。可以看出上下兩層分別是對激光雷達點云信息的特征提取 (voxel-backbone) 和對多張圖像信息的特征提取與模態轉換。這里需要提及的是由于圖像信息僅僅只有一個方向的視野,但是多個攝像頭的圖像存在視野重疊,所以多張圖像的信息融合是為了保證整個環視點云場景的特征都被涉及到。
論文 2《PI-RCNN: An Efficient Multi-sensor 3D Object Detector with Point-based Attentive Cont-conv Fusion Module》提出了 point-based 的多模態融合方法。
論文地址:https://arxiv.org/pdf/1911.06084.pdf
該研究提出了一種新穎的融合方法——基于點的 Attentive Cont-conv Fusion(PACF)模塊,該模塊將多傳感器特征直接融合在 3D 點上。除了連續卷積外,該研究還添加了 Point-Pooling 和 Attentive Aggregation 等組件,以使融合特征更具表達力。
此外,基于 PACF 模塊,研究人員提出了一個叫做 Pointcloud-Image RCNN(PI-RCNN)的 3D 多傳感器多任務網絡,該網絡負責圖像分割和 3D 目標檢測任務。PI-RCNN 使用分段子網從圖像中提取全分辨率語義特征圖,然后通過功能強大的 PACF 模塊融合多傳感器特征。受益于 PACF 模塊的效果和分段模塊的有表達力的語義特征,PI-RCNN 使 3D 目標檢測的性能大大改善。在 KITTI 3D 檢測基準測試中的實驗揭示了 PACF 模塊和 PI-RCNN 的有效性,并且該方法可以在 3D AP 的度量標準上達到最新水平。
網絡框架如上圖所示,實現過程可分為以下四步:
論文 3《EPNet: Enhancing Point Features with Image Semantics for 3D Object Detection》提出了一種新的融合模塊,在不需要任何圖像注釋的情況下,對具有語義特征的點特征進行逐點增強。該研究設計了一個端到端的可學習框架 EPNet 來集成兩個組件。在 KITTI 和 SUN-RGBD 數據集上進行的大量實驗表明,EPNet 優于當前最優方法。其網絡結構點云分支是 point encoder-decoder 結構,圖像分支則是一個逐步 encoder 的網絡,并且逐層做特征融合。
論文地址:https://arxiv.org/pdf/2007.08856.pdf
網絡整體框架如下圖所示:
點云特征和圖像特征融合過程如下圖所示:
融合過程由三部分組成:grid generator、image sampler 和 LI-Fusion layer。
論文 4《CLOCs: Camera-LiDAR Object Candidates Fusion for 3D Object Detection》提出了一種新穎的 Camera-LiDAR 目標候選(CLOC)融合網絡。CLOC 融合提供了一種低復雜度的多模態融合架構,顯著提高了單模態檢測器的性能。CLOC 在非最大抑制 (NMS) 之前對任意 2D 和任意 3D 的組合輸出候選項進行操作,并被訓練利用它們的幾何和語義一致性,以產生更準確的最終 3D 和 2D 檢測結果,最后采用 maxpooling 的方式選擇最終的融合結果。
論文地址:https://arxiv.org/pdf/2009.00784.pdf
網絡架構圖如下所示:
該網絡由三個階段完成:1)2D 和 3D 的目標檢測器分別提出 proposal;2)將兩種模態的 proposal 編碼成稀疏張量;3)對于非空的元素采用二維卷積做對應的特征融合。
3D 人臉檢測基本流程
人臉識別技術在國家安全、軍事安全、金融安全、共同安全等領域具有廣泛的應用前景。人的大腦具備天生的人臉識別能力,可以輕易地分辨出不同的人。但是計算機自動識別人臉技術卻面臨著巨大的挑戰。由于二維人臉識別不可避免地受到光照、姿態和表情的影響,這些因素已成為二維人臉識別技術向前發展的最大障礙。
隨著結構光和立體視覺等三維成像技術的日益成熟,越來越多的人臉識別研究人員將目光投向了三維人臉識別技術領域。
目前 3D 人臉識別技術的主要技術流程如下:
目前 3D 人臉識別算法分為如下幾個類別:
3D 數據集簡介
目前 3D 公開數據少,遠少于 2D 圖片;3D 高精度數據集只能靠昂貴的設備采集,過程繁瑣。這里我們來了解一下現有的 3D 數據集。
1. BU-3DFE (Binghamton University 3D Facial Expression) 數據集:該數據庫目前包含 100 位受試者(女性 56%,男性 44%),年齡從 18 歲到 70 歲不等,包含各種種族,包括白人、黑人、東亞人、中東人等。
下載地址:http://www.cs.binghamton.edu/~lijun/Research/3DFE/3DFE_Analysis.html
2. KITTI 數據集:由德國卡爾斯魯厄理工學院和豐田美國技術研究院聯合創辦,是目前國際上最大的自動駕駛場景下的計算機視覺算法評測數據集。該數據集用于評估 3D 目標檢測和 3D 跟蹤等計算機視覺技術在車載環境下的性能。
下載地址:http://www.cvlibs.net/datasets/kitti/raw_data.php
3. Cityscapes 數據集:這是一個較新的大規模數據集,它包含 50 個不同城市的街道場景中所記錄的各種立體視頻序列,除了一組較大的 20000 個弱注釋幀外,還具有 5000 幀的高質量像素級注釋。
下載地址:https://www.cityscapes-dataset.com/
4. Matterport 3D 重建數據集:該數據集包含 10800 個對齊的三維全景視圖(RGB + 每個像素的深度),來自 90 個建筑規模場景的 194400 個 RGB + 深度圖像。
下載地址:https://matterport.com/
5. 3D 人臉重建相關數據集:該數據集包含用 iPhone X 拍攝的 100 名受試者的 2054 張 2D 圖像,以及每個受試者的單獨 3D 頭部掃描。
下載地址:https://ringnet.is.tue.mpg.de/challenge
6. TUM 數據集:主要包含多視圖數據集、3D 物體的識別分割、場景識別、3D 模型匹配、vSALM 等各個方向的數據。
下載地址:https://vision.in.tum.de/
人臉數據庫匯總官網指路:http://www.face-rec.org/databases/
面部 3D 重建
人臉重建是計算機視覺領域中一個比較熱門的方向,3D 人臉相關應用也是近年來短視頻領域的新玩法。不管是 Facebook 收購的 MSQRD,還是 Apple 研發的 Animoji,底層技術都與三維人臉重建有關。
面部 3D 重建,可以理解為從一張或多張 2D 圖像中重建出人臉的 3D 模型。對于面部 3D 重建,我們先來直觀地感受一下效果。
如下動圖所示,最右邊的重建人臉除了沒有皺紋以外,身份特征和面部表情都和原圖相當一致,陰影效果也高度還原。只是眼睛部分似乎不太對,顯得渾濁無神。
論文《FML: Face Model Learning from Videos》效果展示
下圖中的合成效果也很不錯,表情動態很到位。只是可能實驗者的眼神實在太有戲,AI 表示無力模仿。
論文《FML: Face Model Learning from Videos》效果展示
論文《3D Face Reconstruction from A Single Image Assisted by 2D Face Images in the Wild》效果展示
論文《Joint 3D Face Reconstruction and Dense Alignment with Position Map Regression Network 》效果展示
直觀感受完面部 3D 重建效果后,我們再來探究模型背后的算法。
傳統 3D 人臉重建方法,大多立足于圖像信息,如基于圖像亮度、邊緣信息、線性透視、顏色、相對高度、視差等一種或多種信息建模技術進行 3D 人臉重建。
三維變形模型(3DMM)
隨著技術的發展,研究者們又提出了基于模型的 3D 人臉重建方法,這是目前較為流行的 3D 人臉重建方法。3D 模型主要用三角網格或點云來表示,現下流行的模型有通用人臉模型(CANDIDE-3)和三維變形模型(3DMM)及其變種模型,基于它們的 3D 人臉重建算法既有傳統算法也有深度學習算法。
三維變形模型(3DMM)是一個通用的三維人臉模型,用固定的點數來表示人臉。其核心思想是人臉可以在三維空間中一一匹配,并且可以由其他許多幅人臉正交基加權線性相加而來。三維空間中的每一點 (x, y, z) 實際上都是由三維空間三個方向的基量 (1, 0, 0),(0, 1, 0),(0, 0, 1) 加權相加所得,只是權重分別為 x,y,z。
每一個三維人臉都可以在一個數據庫中的所有人臉組成的基向量空間中進行表示,而求解任意三維人臉的模型,實際上等價于求解各個基向量的系數問題。每一張人臉可以表示為形狀向量和紋理向量的線性疊加。
任意人臉模型均可以由數據集中的 m 個人臉模型進行加權組合,如下:
其中 Si、Ti 表示數據庫中第 i 張人臉的形狀向量和紋理向量。但是我們實際在構建模型的時候不能使用這里的 Si、Ti 作為基向量,因為它們之間并非正交相關,所以接下來需要使用 PCA 進行降維分解。
上式可以轉換為下式:
其中第一項是形狀和紋理的平均值,而 si、ti 則是 Si、Ti 減去各自平均值后的協方差矩陣的特征向量,它們對應的特征值按照大小進行降序排列。
等式右邊仍然是 m 項,但是累加項降了一維,減少了一項。si、ti 都是線性無關的,取其前幾個分量可以對原始樣本做很好地近似,因此能夠大大減少需要估計的參數數目,并不損失準確率。
基于 3DMM 的方法都是在求解這幾個系數,隨后的很多模型在這個基礎上添加了表情、光照等系數,但是原理與之類似。
參考鏈接:
https://zhuanlan.zhihu.com/p/101330861
https://my.oschina.net/u/4304462/blog/4557678
https://cloud.tencent.com/developer/article/1419949
https://blog.csdn.net/u011681952/article/details/82623328
一、項目背景】
隨著HTML5 CSS3的出現和發展,使得我們的網頁可以實現更加復雜的效果,也使得我們的瀏覽體驗更加豐富,所以今天我們將制作一個正方體的3D效果。
【二、項目分析】
想要利用CSS3實現3D立方體,就要清楚立方體是由六個面組成,分上下左右和前后,考慮這些可以幫助我們更好的融入CSS3的代碼。
因此我設置了6個div,作為立方體的6個面。因為定位的原因,一開始所有的盒子都是面對著屏幕這面的,因此要賦予每個面不一樣的值,即不一樣的位置它才能展現出來。
【三、需要的工具】
Adobe Dreamweaver
【四、項目目標】
實現3的l立方體旋轉,鼠標移上去實現縮放效果。
【五、項目實現】
1、打開Adobe Dreamweaver,新建html文檔。把標題改為“3d立方體”。
<body>
<div class="box">
<div class="box2">
<div class="box-2">top</div>
<div class="box-2">btm</div>
<div class="box-2">left</div>
<div class="box-2">right</div>
<div class="box-2">face</div>
<div class="box-2">back</div>
</div>
</div>
</body>
3、創建CSS樣式
<style type="text/css">
.box {
width: 200px;
height: 200px;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
transition: all 2s;
transform-style: preserve-3d;
transform: rotateX(15deg) rotateY(-15deg);
}
.box:hover {
transform: rotateX(300deg) rotateZ(300deg) rotateY(-300deg) scale(0.5);
}
.box .box-2 {
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
font-size: 1.2em;
position: absolute;
top: 0;
left: 0;
}
.box .box-2:nth-child(1) {
/*小立方體第一面*/
background: rgba(225,0,0,0.5);
transform: rotateX(90deg) translateZ(50px); #角度 偏移量
}
.box .box-2:nth-child(2) {
/*小立方體第二面*/
background: rgba(255,255,0,0.5);
transform: rotateX(-90deg) translateZ(50px);
}
.box .box-2:nth-child(3) {
/*小立方體第三面*/
background: rgba(225,0,255,0.5);
transform: rotateY(-90deg) translateZ(50px);
}
.box .box-2:nth-child(4) {
/*小立方體第四面*/
background: rgba(0,255,0,0.5);
transform: rotateY(90deg) translateZ(50px);
}
.box .box-2:nth-child(5) {
/*小立方體第五面*/
background: rgba(225,0,0,0.5);
transform: translateZ(50px);
}
.box .box-2:nth-child(6) {
/*小立方體第六面*/
background: rgba(0,0,255,0.5);
transform: rotateY(180deg) translateZ(50px);
}
</style>
</head>
<body>
<div class="box">
<div class="box2">
<div class="box-2">top</div>
<div class="box-2">btm</div>
<div class="box-2">left</div>
<div class="box-2">right</div>
<div class="box-2">face</div>
<div class="box-2">back</div>
</div>
</div>
</body>
</html>
方法說明:
通過 rotateX() 方法,元素圍繞其 X 軸以給定的度數進行旋轉。
通過 rotateY() 方法,元素圍繞其 Y 軸以給定的度數進行旋轉。
通過 rotateZ() 方法,元素圍繞其 Z 軸以給定的度數進行旋轉。
下表是部分屬性所代表的含義:
4、運行一下看下效果;點擊F12運行。
5、呈現的效果如下圖所示。
可以看到效果基本上可以 ,可是鼠標移上去沒有效果。
.box:hover{
transform: rotateX(300deg) rotateZ(300deg) rotateY(-300deg) scale(0.5);
} # scale是縮放倍數
body代碼:
<div class="box">
<div class="box-1">top</div>
<div class="box-1">btm</div>
<div class="box-1">left</div>
<div class="box-1">right</div>
<div class="box-1">face</div>
<div class="box-1">back</div>
</div>
CSS樣式代碼
<style type="text/css">
.box .box-1{
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
font-size: 2em;
position: absolute;
top: 0;
left: 0;
}
.box .box-1:nth-child(1){
/*大立方體第一面*/
background: rgba(225,0,0,0.5);
transform:rotateX(90deg) translateZ(100px);
}.box .box-1:nth-child(2){
/*大立方體第二面*/
background: rgba(255,255,0,0.5);
transform:rotateX(-90deg) translateZ(100px);
}.box .box-1:nth-child(3){
/*大立方體第三面*/
background: rgba(225,0,255,0.5);
transform:rotateY(-90deg) translateZ(100px);
}.box .box-1:nth-child(4){
/*大立方體第四面*/
background: rgba(0,255,0,0.5);
transform:rotateY(90deg) translateZ(100px);
}.box .box-1:nth-child(5){
/*大立方體第五面*/
background: rgba(225,0,0,0.5);
transform:translateZ(100px);
}.box .box-1:nth-child(6){
/*大立方體第六面*/
background: rgba(0,0,255,0.5);
transform:rotateY(180deg) translateZ(100px);
}
</style>
【六、效果展示】
1、點擊運行,效果如下圖所示。
2、鼠標移到立方體上,縮放效果展示,如下圖所示。
【七、總結】
1、整個效果寫出來,還是比較簡單的,只要明白各個命令的意思,剩下的就是組織一下邏輯而已。
5、如果需要本文源碼,請在公眾號后臺回復“立方體”四個字獲取。
看完本文有收獲?請轉發分享給更多的人
IT共享之家
入群請在微信后臺回復【入群】
想學習更多Python網絡爬蟲與數據挖掘知識,可前往專業網站:http://pdcfighting.com/
果圖
各位媛猿大家好
今天給大家帶來的是 CSS3 3D圖片相冊特效
大家可以按照自己的意愿 修改成喜歡的樣子!
廢話不多說,上源碼!
@charset "utf-8";
/*科e互聯特效基本框架CSS*/
body, ul, dl, dd, dt, ol, li, p, h1, h2, h3, h4, h5, h6, textarea, form, select, fieldset, table, td, div, input {margin:0;padding:0;-webkit-text-size-adjust: none}
h1, h2, h3, h4, h5, h6{font-size:12px;font-weight:normal}
body>div{margin:0 auto}
div {text-align:left}
a img {border:0}
body { color: #333; text-align: center; font: 12px "微軟雅黑"; }
ul, ol, li {list-style-type:none;vertical-align:0}
a {outline-style:none;color:#535353;text-decoration:none}
a:hover { color: #D40000; text-decoration: none}
.clear{height:0; overflow:hidden; clear:both}
.button {display: inline-block;zoom: 1; *display: inline;vertical-align: baseline;margin: 0 2px;outline: none;cursor: pointer;text-align: center;text-decoration: none;font: 14px/100% Arial, Helvetica, sans-serif;padding:0.25em 0.6em 0.3em;text-shadow: 0 1px 1px rgba(0,0,0,.3);-webkit-border-radius: .5em; -moz-border-radius: .5em;border-radius: .5em;-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.red {color: #faddde;border: solid 1px #980c10;background: #d81b21;background: -webkit-gradient(linear, left top, left bottom, from(#ed1c24), to(#A51715));background: -moz-linear-gradient(top, #ed1c24, #A51715);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24', endColorstr='#aa1317');
}
.red:hover { background: #b61318; background: -webkit-gradient(linear, left top, left bottom, from(#c9151b), to(#a11115)); background: -moz-linear-gradient(top, #c9151b, #a11115); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c9151b', endColorstr='#a11115'); color:#fff;}
.red:active {color: #de898c;background: -webkit-gradient(linear, left top, left bottom, from(#aa1317), to(#ed1c24));background: -moz-linear-gradient(top, #aa1317, #ed1c24);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#aa1317', endColorstr='#ed1c24');}
.cor_bs,.cor_bs:hover{color:#ffffff;}
.keBody{background:url(../images/bodyBg.jpg) repeat #333;}
.keTitle{height:100px; line-height:100px; font-size:30px; font-family:'微軟雅黑'; color:#FFF; text-align:center; background:url(../images/bodyBg3.jpg) repeat-x bottom left; font-weight:normal}
.kePublic{background:#FFF; padding:50px;}
.keBottom{color:#FFF; padding-top:25px; line-height:28px; text-align:center; font-family:'微軟雅黑'; background:url(../images/bodyBg2.jpg) repeat-x top left; padding-bottom:25px}
.keTxtP{font-size:16px; color:#ffffff;}
.keUrl{color:#FFF; font-size:30px;}
.keUrl:hover{ text-decoration: underline; color: #FFF; }
.mKeBanner,.mKeBanner div{text-align:center;}
/*科e互聯特效基本框架CSS結束,應用特效時,以上樣式可刪除*/
.warper{ width: 860px; height: 300px; border: 2px solid #efefef; margin: 0 auto; padding: 3px 3px 0px 0px; }
#wowslider-container1 { zoom: 1; position: relative; max-width: 716px; float:right; z-index: 90 }
* html #wowslider-container1 { width: 716px }
#wowslider-container1 .ws_images ul { position: relative; width: 10000%; height: auto; left: 0; list-style: none; margin: 0; padding: 0; border-spacing: 0; overflow: visible }
#wowslider-container1 .ws_images ul li { width: 1%; line-height: 0; float: left; font-size: 0; padding: 0!important; margin: 0!important }
#wowslider-container1 .ws_images { position: relative; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden }
#wowslider-container1 .ws_images a { width: 100%; display: block; color: transparent }
#wowslider-container1 img { max-width: none!important }
#wowslider-container1 .ws_images img { width: 100%; border: none 0; max-width: none; padding: 0; margin: 0 }
#wowslider-container1 a { text-decoration: none; outline: 0; border: 0 }
#wowslider-container1 a.ws_next, #wowslider-container1 a.ws_prev { position: absolute; display: none; top: 50%; margin-top: -3.5em; z-index: 60; height: 7.1em; width: 7.1em; background-image: url(../images/arrows.png); background-size: 200% }
#wowslider-container1 a.ws_next { background-position: 100% 0; right: 1em }
#wowslider-container1 a.ws_prev { left: 1em; background-position: 0 0 }
#wowslider-container1 a.ws_next:hover { background-position: 100% 100% }
#wowslider-container1 a.ws_prev:hover { background-position: 0 100% }
* html #wowslider-container1 a.ws_next, * html #wowslider-container1 a.ws_prev { display: block }
#wowslider-container1:hover a.ws_next, #wowslider-container1:hover a.ws_prev { display: block }
#wowslider-container1 .ws_playpause { display: none; width: 7.1em; height: 7.1em; position: absolute; top: 50%; left: 50%; margin-left: -3.5em; margin-top: -3.5em; z-index: 59; background-size: 100% }
#wowslider-container1:hover .ws_playpause { display: block }
#wowslider-container1 .ws_pause { background-image: url(../images/pause.png) }
#wowslider-container1 .ws_play { background-image: url(../images/play.png) }
#wowslider-container1 .ws_pause:hover, #wowslider-container1 .ws_play:hover { background-position: 100% 100%!important }
#wowslider-container1 .ws-title { position: absolute; display: block; bottom: 3.5em; left: 1em; margin-right: 1em; padding: 1em .9em .9em .9em; background-color: rgba(0,0,0,0.4); color: #fff; z-index: 50; font-weight: bold; text-transform: uppercase; border-radius: .2em; -moz-border-radius: .2em; -webkit-border-radius: .2em }
#wowslider-container1 .ws-title div { margin-top: .3em; font-size: 1.6em; line-height: 1.15em; font-weight: normal; text-transform: none; color: #fff }
#wowslider-container1 .ws-title span { font-size: 2.4em }
#wowslider-container1 .ws_thumbs { font-size: 0; position: absolute; overflow: auto; z-index: 70; left: -19.51%; top: 0; width: 18.72%; height: 100% }
#wowslider-container1 .ws_thumbs img { text-decoration: none; border: 0; width: 100% }
#wowslider-container1 .ws_thumbs a { position: relative; text-indent: -4000px; color: transparent; opacity: .85; text-decoration: none; display: inline-block; border: 0; margin-bottom: 4%; text-indent: 0; padding: 2.99%; width: 89.54%; background-color: #fff }
#wowslider-container1 .ws_thumbs a:hover { opacity: 1 }
#wowslider-container1 .ws_thumbs a:hover img { visibility: visible }
#wowslider-container1 .ws_thumbs div { position: relative; width: 100% }
#wowslider-container1 .ws_thumbs a.ws_selthumb { background-color: #bce0dd }
#wowslider-container1 .ws_images ul { animation: wsBasic 16s infinite; -moz-animation: wsBasic 16s infinite; -webkit-animation: wsBasic 16s infinite }
@keyframes wsBasic { 0% {
left:-0%
}
12.5% {
left:-0%
}
25% {
left:-100%
}
37.5% {
left:-100%
}
50% {
left:-200%
}
62.5% {
left:-200%
}
75% {
left:-300%
}
87.5% {
left:-300%
}
}
@-moz-keyframes wsBasic { 0% {
left:-0%
}
12.5% {
left:-0%
}
25% {
left:-100%
}
37.5% {
left:-100%
}
50% {
left:-200%
}
62.5% {
left:-200%
}
75% {
left:-300%
}
87.5% {
left:-300%
}
}
@-webkit-keyframes wsBasic { 0% {
left:-0%
}
12.5% {
left:-0%
}
25% {
left:-100%
}
37.5% {
left:-100%
}
50% {
left:-200%
}
62.5% {
left:-200%
}
75% {
left:-300%
}
87.5% {
left:-300%
}
}
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3 3D圖片相冊特效 - 網頁特效庫 - jquery特效</title>
<link rel='stylesheet' href='css/style.css' type='text/css' />
<script type='text/javascript' src='js/jquery.min.js'></script>
</head>
<body class="keBody">
<h1 class="keTitle">CSS3 3D圖片相冊特效</h1>
<div class="kePublic">
<!--效果html開始-->
<div class="warper">
<div id="wowslider-container1">
<div class="ws_images">
<ul>
<li><a target="_blank" href="#"><img title="高級職位都在這里" src="images/bimg1.jpg" /></a></li>
<li><a target="_blank" href="#"><img title="互聯網設計布道者馮鐵看診把脈" src="images/bimg2.jpg" /></a></li>
<li><a target="_blank" href="#"><img title="顏值不高別裝“表”" src="images/bimg3.jpg" /></a></li>
<li><a target="_blank" href="#"><img title="高級職位都在這里" src="images/bimg1.jpg" /></a></li>
<li><a target="_blank" href="#"><img title="互聯網設計布道者馮鐵看診把脈" src="images/bimg2.jpg" /></a></li>
<li><a target="_blank" href="#"><img title="顏值不高別裝“表”" src="images/bimg3.jpg" /></a></li>
</ul>
</div>
<div class="ws_thumbs">
<div>
<a target="_blank" href="#"><img src="images/simg1.jpg" /></a>
<a target="_blank" href="#"><img src="images/simg2.jpg" /></a>
<a target="_blank" href="#"><img src="images/simg3.jpg" /></a>
<a target="_blank" href="#"><img src="images/simg1.jpg" /></a>
<a target="_blank" href="#"><img src="images/simg2.jpg" /></a>
<a target="_blank" href="#"><img src="images/simg3.jpg" /></a>
</div>
</div>
<div class="ws_shadow"></div>
</div>
<script type="text/javascript" src="js/slider.js"></script>
</div>
<!--效果html結束-->
<div class="clear"></div>
</div>
<div style="text-align:center;margin:10px 0; font:normal 14px/24px 'MicroSoft YaHei'; color: #fff;">
<p>T</p>
</div>
</body>
</html>
*請認真填寫需求信息,我們會在24小時內與您取得聯系。