助CSS所提供的animation動畫屬性及2D、3D變換屬性,我們可以擺脫對JavaScript的依賴,設(shè)計(jì)開發(fā)各類效果優(yōu)秀的前端動態(tài)效果,在之前文章和視頻中我們也介紹了不少基于CSS與JavaScript技術(shù)實(shí)現(xiàn)的各類動畫及頁面元素設(shè)計(jì)效果。本文主要介紹使用CSS技術(shù)實(shí)現(xiàn)精美的3D旋轉(zhuǎn)相冊效果。主要實(shí)現(xiàn)效果動畫展示如下:
純CSS技術(shù)實(shí)現(xiàn)旋轉(zhuǎn)相冊效果展示
本例開發(fā)主要涉及使用技術(shù)包括animation動畫屬性、keyframes關(guān)鍵幀、transform變形等相關(guān)知識及方法、技術(shù)。部分核心技術(shù)說明如下:
1、CSS自定義屬性(變量)
在使用CSS進(jìn)行樣式定義時(shí),可以使用自定義屬性,即變量。從變量而言考慮的話,會涉及到變量的定義、賦值與使用等。自定義屬性的聲明使用--表示。其賦值與style樣式其他屬性類似可通過:(冒號)進(jìn)行賦值。在使用該自定義屬性時(shí)需要用var()函數(shù)對屬性名進(jìn)行包裹。如在自定義變量需要進(jìn)行數(shù)學(xué)運(yùn)算時(shí)需要使用calc()方法。自定義屬性實(shí)例如下:
:root{--fontSize:2em;}
p{font-size:var(--fontSize);}
CSS自定義屬性使用實(shí)例如上所示,我們定義了一個(gè)fontSize變量,在P元素選擇器中使用了該定義的變量,即設(shè)置P段落字體size為2em。
2、3D變換屬性與方法
實(shí)現(xiàn)3D效果需要使用3D變換相關(guān)屬性與方法,其主要屬性方法包括transform-origin(旋轉(zhuǎn)原點(diǎn))、transform-style(旋轉(zhuǎn)類型2D/3D)、perspective(透視點(diǎn))等屬性,主要方法包括translate位移、scale放縮、rotate旋轉(zhuǎn)與skew扭曲等。使用實(shí)例代碼如下:
position: absolute;//定位
transform-origin: center;//中心點(diǎn)
transform-style: preserve-3d;//類型
transform:
translateZ(400px) rotateY(60deg);
//沿Z軸移動400px,沿Y軸旋轉(zhuǎn)60度
3、flex布局
本例需要使用flex布局用于實(shí)現(xiàn)將頁面元素在頁面中位置進(jìn)行定位與布局設(shè)置,主要設(shè)置水平與垂直居中效果,實(shí)例代碼如下:
display: flex;
justify-content: center;
align-items: center;
在明確以上基本技術(shù)點(diǎn)之后,我們就可以收集素材完整3D旋轉(zhuǎn)相冊的設(shè)計(jì)與制作。首先第一步就是素材的采集,本例所需圖片如下所示:
3D旋轉(zhuǎn)相冊圖片素材
在完成素材搜集基礎(chǔ)上就可以使用CSS頁面布局技術(shù)等,實(shí)現(xiàn)頁面的布局,通過旋轉(zhuǎn)變換,將10張圖片進(jìn)行不同角度的分布。其中頁面布局代碼如下:
頁面布局代碼
完成頁面元素設(shè)置之后,就要考慮頁面布局問題,本例需要實(shí)現(xiàn)旋轉(zhuǎn)因此需要將每一個(gè)圖片所對應(yīng)元素進(jìn)行旋轉(zhuǎn)等變換設(shè)置。部分代碼如下:
CSS樣式設(shè)置
核心CSS樣式設(shè)置如上圖所示,其中我們定義了動畫animate,因此需要使用keyframes對其關(guān)鍵幀進(jìn)行定義,關(guān)鍵幀定義如下:
動畫關(guān)鍵幀定義
通過關(guān)鍵幀定義之后,整個(gè)gallery層就會繞著y軸進(jìn)行旋轉(zhuǎn)最終實(shí)現(xiàn)動態(tài)旋轉(zhuǎn)效果。本例靜態(tài)展示如下圖所示:
3D旋轉(zhuǎn)相冊靜態(tài)效果展示
以上給出了3D旋轉(zhuǎn)相冊設(shè)計(jì)及實(shí)現(xiàn)過程核心知識點(diǎn)及實(shí)現(xiàn)思路過程、核心代碼說明。如需完整代碼請關(guān)注并私信。
本頭條號長期關(guān)注編程資訊分享;編程課程、素材、代碼分享及編程培訓(xùn)。如果您對以上方面有興趣或代碼錯(cuò)誤、建議與意見,可在評論區(qū)回復(fù)。更多程序設(shè)計(jì)相關(guān)教程及實(shí)例分享,期待大家關(guān)注與閱讀!
天學(xué)習(xí)了平面動畫,今天來3D動畫:
css3的強(qiáng)大之處就在于它可以用很少量的標(biāo)簽,來實(shí)現(xiàn)一些要用到插件或者js,jq很多代碼才能實(shí)現(xiàn)的復(fù)雜功能。隨著css3版本的推進(jìn),各瀏覽器的兼容性也會越來越好,開發(fā)會很容易。
實(shí)現(xiàn)上圖的關(guān)鍵點(diǎn)在于,如何布局不了解css3的可能會說要定位,其實(shí)不然,我們只需要transform的rotate和translate即可輕松實(shí)現(xiàn)旋轉(zhuǎn)位移.至于圖片了可以用img也可以直接背景圖。下面是我的頁面結(jié)構(gòu)和css樣式
<style>
*{margin:0; padding:0; list-style: none;}
div{
width: 105px;
height: 150px;
margin:100px auto;
-webkit-perspective: 1000;
-webkit-perspective-origin: center center;
}
ul{
width: 105px;
height: 150px;
position: relative;
-webkit-transform-style: preserve-3d;
-webkit-transform:rotateX(-16deg) rotateY(0deg) rotateZ(0deg);
-webkit-animation: ;
}
@-webkit-keyframes run{
from{ }
to{ }
}
ul li{width: 105px; height: 150px; position: absolute; -webkit-background-size:100% 100%;}
ul li:nth-child(1){
background-image: url(images/01.jpg);
-webkit-transform: translateZ(200px);
}
ul li:nth-child(2){
background-image: url(images/02.jpg);
-webkit-transform:rotateY(30deg) translateZ(200px);
}
ul li:nth-child(3){
background-image: url(images/03.jpg);
-webkit-transform:rotateY(60deg) translateZ(200px);
}
ul li:nth-child(4){
background-image: url(images/04.jpg);
-webkit-transform:rotateY(90deg) translateZ(200px);
}
ul li:nth-child(5){
background-image: url(images/05.jpg);
-webkit-transform:rotateY(120deg) translateZ(200px);
}
ul li:nth-child(6){
background-image: url(images/06.jpg);
-webkit-transform:rotateY(150deg) translateZ(200px);
}
ul li:nth-child(7){
background-image: url(images/07.jpg);
-webkit-transform:rotateY(180deg) translateZ(200px);
}
ul li:nth-child(8){
background-image: url(images/08.jpg);
-webkit-transform:rotateY(210deg) translateZ(200px);
}
ul li:nth-child(9){
background-image: url(images/09.jpg);
-webkit-transform:rotateY(240deg) translateZ(200px);
}
ul li:nth-child(10){
background-image: url(images/10.jpg);
-webkit-transform:rotateY(270deg) translateZ(200px);
}
ul li:nth-child(11){
background-image: url(images/11.jpg);
-webkit-transform:rotateY(300deg) translateZ(200px);
}
ul li:nth-child(12){
background-image: url(images/12.jpg);
-webkit-transform:rotateY(330deg) translateZ(200px);
}
</style>
結(jié)構(gòu)是div抱著ul和li有多少圖片就有多少個(gè)li(這里就不展示了)
只有這個(gè)相冊就可以旋轉(zhuǎn)了么,當(dāng)然不會,各位還需要在上文@-webkit-keyframes處補(bǔ)全animation動畫即可,animation動畫在上篇《純css實(shí)現(xiàn)無縫滾動》中又詳細(xì)代碼 拿過來即可
這是一款基于 PHP + MySQL 的開源項(xiàng)目,選定本地電腦的圖庫目錄之后,就能變成一個(gè)很漂亮的相冊網(wǎng)頁,并且可以通過分類、標(biāo)簽、顏色、鏈接、注釋、時(shí)長、尺寸等參數(shù)檢索內(nèi)容,支持預(yù)覽圖片、視頻、音頻,甚至 txt 文檔 。
官方提供了一個(gè)演示站點(diǎn):http://pichome.oaooa.com/
可以輕松地放大縮小、翻轉(zhuǎn)鏡像查看,并且可以查看和下載原圖,全憑之后可以通過左右鍵來瀏覽內(nèi)容,可播放視頻、音頻,最有用的就是搜索功能了,找圖快才用的爽。
基于 PHP + MySQL 環(huán)境則可以部署在各種設(shè)備中,比如服務(wù)器、NAS、個(gè)人電腦、云服務(wù)器等,部署后可以在任何瀏覽器打開,所以手機(jī)電腦都可以方便的訪問,最重要的是免費(fèi)、開源,還是相當(dāng)不錯(cuò)的。
官方安裝部署文檔: https://www.yuque.com/pichome/install
本次采用nginx+php7搭建
Gitee下載 https://gitee.com/zyx0814/Pichome/releases
下載安裝包:筆者這邊下載Pichome-beta3.3.tar.gz。
github下載 https://github.com/zyx0814/Pichome/releases
國內(nèi)使用gitee地址
https://gitee.com/zyx0814/Pichome/releases
備用下載: http://js.funet8.com/centos_software/Pichome-beta3.3.tar.gz
cd /data/wwwroot/web
wget http://js.funet8.com/centos_software/Pichome-beta3.3.tar.gz
tar -zxvf Pichome-beta3.3.tar.gz
mv Pichome-beta3.3 p.xgss.net
nginx的配置
server {
listen 80;
server_name p.xgss.net;
root /data/wwwroot/web/p.xgss.net;
access_log /data/wwwroot/log/p.xgss.net-access.log main_aliyun;
error_log /dev/null;
location / {
index index.php index.htm index.html;
if (!-e $request_filename){
rewrite ^(.*)$ /index.php?s=$1 last;
}
}
location ~ .*\.(php|php5)?$ {
fastcgi_pass 127.0.0.1:7300;
fastcgi_index index.php;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
include fastcgi_params;
}
location ~ .*\.(css|js|jpg|jpeg|gif|png|ico|bmp|gz|xml|zip|rar|swf|txt|xls|xlsx|flv|mid|doc|ppt|pdf|mp3|wma|exe)?$ {
expires max;
access_log off;
}
}
域名解析到服務(wù)器
訪問: http://p.xgss.net/
新建數(shù)據(jù)庫用戶
分配權(quán)限
參考文檔
官網(wǎng):https://oaooa.com/pichome.html
開發(fā)者提供了 Windows、Linux 以及 Docker 安裝方式。
使用Eagle或者Billfish,在本地windows系統(tǒng)下安裝Billfish素材管理工具,billfish為免費(fèi)的。
在billfish軟件中將照片分類
將目錄上傳到服務(wù)器中,庫設(shè)置中添加目錄,就可以在web頁面中顯示你的圖片了。
*請認(rèn)真填寫需求信息,我們會在24小時(shí)內(nèi)與您取得聯(lián)系。