CSS3完成图片lowpoly动画效果的过程详解
本篇文章主要介紹了CSS3實(shí)現(xiàn)任意圖片lowpoly動(dòng)畫效果實(shí)例，這是一個(gè)利用CSS3的動(dòng)畫屬性實(shí)現(xiàn)的結(jié)合lowpoly（低多邊形風(fēng)格）的效果，主要利用了CSS3 transform屬性的rotate旋轉(zhuǎn)，translate移動(dòng)，scale縮放
這是一個(gè)利用CSS3的動(dòng)畫屬性實(shí)現(xiàn)的結(jié)合lowpoly（低多邊形風(fēng)格）的效果，主要利用了CSS3 transform屬性的rotate旋轉(zhuǎn)，translate移動(dòng)，scale縮放，CSS代碼部分非常簡(jiǎn)單，唯一有趣的是 nth-of-type選擇器的使用，這里UI設(shè)計(jì)師小伙伴不用望而卻步，CSS部分完全可以拿來(lái)復(fù)用并根據(jù)自己的要求隨意改變參數(shù)（所有不能復(fù)用的SVG動(dòng)畫代碼都是耍流氓），然后，UI設(shè)計(jì)師再搭配上自己熟悉的AI利器，就可以完美的實(shí)現(xiàn)下面的效果了。
分步驟拆解：
1. 低多邊形風(fēng)格的圖片的制作
我的原圖是下面這種：
隨手從電腦上找了一張背景圖，然后借助一個(gè)神器 Image Triangulator，不得不感慨，這個(gè)工具真是太好用了，各位設(shè)計(jì)師需要做的只是在圖片上打點(diǎn)（我是為了測(cè)試，很粗糙的添加了頂點(diǎn)，如果需要得到很出彩的效果，需要在明暗分隔的邊緣精細(xì)添加）。
然后導(dǎo)出的pdf格式的文件，就可以用AI打開了。
2. 圖片的處理
這里在AI里需要一步重要的操作， “釋放剪切蒙版” ，如果不進(jìn)行這步操作，生成的SVG代碼里會(huì)有大量的路徑裁剪遮罩標(biāo)簽 <clipPath> 以及polygon的clip-path屬性。
釋放剪切路徑后選中圖形就可以看到此時(shí)圖片已經(jīng)由一個(gè)個(gè)三角形色塊組成了。
導(dǎo)出SVG代碼可以看到密密麻麻的多邊形標(biāo)簽 <polygon fill="" points=""/> 。
Image Triangulator生成lowpoly風(fēng)格的圖片；AI處理，釋放剪切蒙版
此處需注意，這個(gè)軟件生成的PDF是帶未處理的底圖的，SVG文件里有 <img> 標(biāo)簽，所以邊緣那里可以多加幾個(gè)點(diǎn)，或者截取掉一部分，防止邊緣出現(xiàn)鏤空。
3. 在線生成的低多邊形背景圖片的處理
如果需要的僅是一個(gè)背景圖，建議使用網(wǎng)站 qrohlf.com/trianglify-generator/ ，可以自定義尺寸、顏色和晶格大小，支持生成SVG格式。比如下面這種：
利用這個(gè)在線工具生成的圖片不處理的話里面會(huì)是 <path> 路徑標(biāo)簽，并且有描邊屬性，需要在AI里處理一下，全選，去掉所有的描邊屬性。此時(shí)，再導(dǎo)出的SVG文件就是對(duì)應(yīng)的多邊形標(biāo)簽 <polygon> 了。
截止到這一步，我們的圖形處理部分就已經(jīng)結(jié)束了，剩下的是動(dòng)畫效果的實(shí)現(xiàn)
4. CSS3動(dòng)畫
先說(shuō)一下動(dòng)畫實(shí)現(xiàn)的初步設(shè)想。我希望這些已經(jīng)生成的多邊形碎片進(jìn)行旋轉(zhuǎn)、位移和尺寸的變化，這對(duì)CSS來(lái)說(shuō)，也是很容易實(shí)現(xiàn)的一個(gè)效果，但我需要的是散布的不同效果，位移的方向不同，距離不同，縮放不同，可我這種JavaScript渣渣又不會(huì)寫隨機(jī)函數(shù)，還好CSS3提供了一個(gè)強(qiáng)大的選擇器 nth-of-type(an+b) ，利用它，我可以賦予不同的多邊形碎片不同的動(dòng)畫屬性值。
簡(jiǎn)單了解一下nth-of-type(an+b)，n從0開始取值，依次加1，所以你會(huì)得到第a+b個(gè)，2a+b個(gè)，3a+b個(gè)……元素。
比如，我希望我的 <polygon> 多邊形分成6組，每組設(shè)定不同的動(dòng)畫屬性，我的寫法如下：
polygon:nth-of-type(6n+1){transform: translate(x , y) scale() rotate();}
登錄后復(fù)制
這是順序?yàn)?n+1（即1,7,13,19……）的多邊形的動(dòng)畫效果，同理，下一組為polygon:nth-of-type(6n+2)，即選擇了第2,8,14,20……個(gè)多邊形，依次向后推，直到polygon:nth-of-type(6n+6)
現(xiàn)在附上全部的代碼及注釋
結(jié)合下面的全部代碼說(shuō)一下：
<html>
<head>
<style>
/*以下為可復(fù)用的CSS代碼部分*/
.cover{
position: absolute;
width: 800px;
height: 445px;
top: 20%;
left: 20%;
z-index: 2;
}
/*cover和svg的寬高位置都重合，唯一不同的是z-index屬性*/
svg {
position: absolute;
width: 800px;
height: 445px;
top: 20%;
left: 20%;
overflow: visible;
z-index: 1;
}
polygon{
transition:all 1s ease;
transform-origin: 50% 50%;
}
/*以下為設(shè)定的6組動(dòng)畫效果*/
.cover:hover + svg #lowpoly polygon:nth-of-type(6n+1){
transform: translate(-400% , -400%) scale(1.5) rotate(100deg);
opacity: .3
}
.cover:hover + svg #lowpoly polygon:nth-of-type(6n+2){
transform: translate(800% , -400%) scale(1.1) rotate(200deg);
opacity: .4;
}
.cover:hover + svg #lowpoly polygon:nth-of-type(6n+3){
transform: translate(-800% , 400%) scale(1.2) rotate(200deg);
opacity: .3;
}
.cover:hover + svg #lowpoly polygon:nth-of-type(6n+4){
transform: translate(-400% , 800%) scale(1.4) rotate(200deg);
opacity: .4
}
.cover:hover + svg #lowpoly polygon:nth-of-type(6n+5){
transform: translate(400% , 400%) scale(1.3) rotate(100deg);
opacity: .3
}
.cover:hover + svg #lowpoly polygon:nth-of-type(6n+6){
transform: translate(800% , 400%) scale(1.2) rotate(200deg);
opacity: .3
}
</style></head>
<body><p class="cover"></p><!--定義的觸發(fā)區(qū)域-->
<svg>
<g id="lowpoly">
……此處為若干<polygon>標(biāo)簽 即需要自行替換的部分
</g>
</svg></body></html>
登錄后復(fù)制
由于SVG在執(zhí)行動(dòng)畫效果后碎成滿屏，如果我們的動(dòng)畫要設(shè)置成鼠標(biāo)移入破碎，鼠標(biāo)移出復(fù)原的效果，需要一個(gè)區(qū)域來(lái)進(jìn)行動(dòng)作的觸發(fā)，這就是我們定義cover的意義，且層級(jí)屬性要高于SVG屬性。
關(guān)于動(dòng)畫效果的觸發(fā)，我用的是 :hover 鼠標(biāo)經(jīng)過(guò)，需要其他觸發(fā)事件可以求助前端攻城獅。
svg的 overflow 屬性一定要定義為可見(jiàn) visible ，以確動(dòng)畫效果后超出svg尺寸的部分可見(jiàn)。
關(guān)于polygon的動(dòng)畫屬性的設(shè)定，這種 transition:all 1s ease 表示所有的動(dòng)畫時(shí)間為1s，緩動(dòng)效果。 transform-origin: 50% 50% 定義了變換的原點(diǎn)為每個(gè)元素自己的center。
關(guān)于6組不同的動(dòng)畫效果，我設(shè)定了位移translate，縮放scale，選擇rotate以及透明度opacity的變化。
這里X軸和Y軸的位移，建議自己劃定一個(gè)范圍，值越大，擴(kuò)散度越高，比如我的X和Y方向都是-800%~800%。另外關(guān)于旋轉(zhuǎn)的角度，rotate()，為了符合物理規(guī)律，偏移的路徑越遠(yuǎn)的旋轉(zhuǎn)的角度更大，反之亦然。
如果你想設(shè)定更多的不同的效果，只需要改nth-of-type(an+b)中n的系數(shù)a就可以了。
如果懶得修改嘗試，UI設(shè)計(jì)師在套用這個(gè)模板時(shí)，只需要把自己制作（或者自動(dòng)生成）的 <polygon> 標(biāo)簽進(jìn)行替換就可以。比如我們?cè)囈幌掳涯菑埍尘皥D套用進(jìn)去，就能輕松得到下面這種動(dòng)畫效果。
知識(shí)點(diǎn)總結(jié)
1.關(guān)于低多邊形lowpoly風(fēng)格圖片的制作（重點(diǎn)為自己制作任意圖形）
2.CSS3選擇器nth-of-type(an+b)的使用
【相關(guān)推薦】
1. CSS3免費(fèi)視頻教程
2. 教你用CSS繪制標(biāo)準(zhǔn)的圓形圖案
3. 用css實(shí)現(xiàn)文本超鏈文字右邊加一個(gè)箭頭圖標(biāo)
4. 關(guān)于H5和CSS3表單驗(yàn)證的使用教程
5. CSS3完成一個(gè)方框圓角效果的代碼教程
以上就是CSS3完成圖片lowpoly動(dòng)畫效果的過(guò)程詳解的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注風(fēng)君子博客其它相關(guān)文章！
總結(jié)
以上是生活随笔為你收集整理的CSS3完成图片lowpoly动画效果的过程详解的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 为什么银行大额存单没有4年期？想存4年期
- 下一篇： JAVA之：OGNL表达式练习(Myba