CSS3实现一个炫酷的lowpoly动画实例
本篇文章主要介绍了CSS3实现任意图片lowpoly动画效果实例，这是一个利用CSS3的动画属性实现的结合lowpoly（低多边形风格）的效果，主要利用了CSS3 transform属性的rotate旋转，translate移动，scale缩放
这是一个利用CSS3的动画属性实现的结合lowpoly（低多边形风格）的效果，主要利用了CSS3 transform属性的rotate旋转，translate移动，scale缩放，CSS代码部分非常简单，唯一有趣的是 nth-of-type选择器的使用，这里UI设计师小伙伴不用望而却步，CSS部分完全可以拿来复用并根据自己的要求随意改变参数（所有不能复用的SVG动画代码都是耍流氓），然后，UI设计师再搭配上自己熟悉的AI利器，就可以完美的实现下面的效果了。
分步骤拆解：
1. 低多边形风格的图片的制作
我的原图是下面这种：
随手从电脑上找了一张背景图，然后借助一个神器 Image Triangulator，不得不感慨，这个工具真是太好用了，各位设计师需要做的只是在图片上打点（我是为了测试，很粗糙的添加了顶点，如果需要得到很出彩的效果，需要在明暗分隔的边缘精细添加）。
然后导出的pdf格式的文件，就可以用AI打开了。
2. 图片的处理
这里在AI里需要一步重要的操作， “释放剪切蒙版” ，如果不进行这步操作，生成的SVG代码里会有大量的路径裁剪遮罩标签 <<a href="http://www.php.cn/wiki/921.html" target="_blank">clip</a>Path> 以及polygon的clip-path属性。
释放剪切路径后选中图形就可以看到此时图片已经由一个个三角形色块组成了。
导出SVG代码可以看到密密麻麻的多边形标签 <polygon fill="" points=""/> 。
Image Triangulator生成lowpoly风格的图片；AI处理，释放剪切蒙版
此处需注意，这个软件生成的PDF是带未处理的底图的，SVG文件里有 标签，所以边缘那里可以多加几个点，或者截取掉一部分，防止边缘出现镂空。
3. 在线生成的低多边形背景图片的处理
如果需要的仅是一个背景图，建议使用网站 qrohlf.com/trianglify-generator/ ，可以自定义尺寸、颜色和晶格大小，支持生成SVG格式。比如下面这种：
利用这个在线工具生成的图片不处理的话里面会是
截止到这一步，我们的图形处理部分就已经结束了，剩下的是动画效果的实现
4. CSS3动画
先说一下动画实现的初步设想。我希望这些已经生成的多边形碎片进行旋转、位移和尺寸的变化，这对CSS来说，也是很容易实现的一个效果，但我需要的是散布的不同效果，位移的方向不同，距离不同，缩放不同，可我这种JavaScript渣渣又不会写随机函数，还好CSS3提供了一个强大的选择器 nth-of-type(an+b) ，利用它，我可以赋予不同的多边形碎片不同的动画属性值。
简单了解一下nth-of-type(an+b)，n从0开始取值，依次加1，所以你会得到第a+b个，2a+b个，3a+b个……元素。
比如，我希望我的
polygon:nth-of-type(6n+1){transform: translate(x , y) scale() rotate();}这是顺序为6n+1（即1,7,13,19……）的多边形的动画效果，同理，下一组为polygon:nth-of-type(6n+2)，即选择了第2,8,14,20……个多边形，依次向后推，直到polygon:nth-of-type(6n+6)
现在附上全部的代码及注释
结合下面的全部代码说一下：
<html>
<head>
<style>
/*以下为可复用的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%;
}
/*以下为设定的6组动画效果*/
.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><!--定义的触发区域-->
<svg>
<g id="lowpoly">
……此处为若干<polygon>标签 即需要自行替换的部分
</g>
</svg></body></html>由于SVG在执行动画效果后碎成满屏，如果我们的动画要设置成鼠标移入破碎，鼠标移出复原的效果，需要一个区域来进行动作的触发，这就是我们定义cover的意义，且层级属性要高于SVG属性。
关于动画效果的触发，我用的是 :hover 鼠标经过，需要其他触发事件可以求助前端攻城狮。
svg的 overflow 属性一定要定义为可见 visible ，以确动画效果后超出svg尺寸的部分可见。
关于polygon的动画属性的设定，这种 transition:all 1s ease 表示所有的动画时间为1s，缓动效果。 transform-origin: 50% 50% 定义了变换的原点为每个元素自己的center。
关于6组不同的动画效果，我设定了位移translate，缩放scale，选择rotate以及透明度opacity的变化。
这里X轴和Y轴的位移，建议自己划定一个范围，值越大，扩散度越高，比如我的X和Y方向都是-800%~800%。另外关于旋转的角度，rotate()，为了符合物理规律，偏移的路径越远的旋转的角度更大，反之亦然。
如果你想设定更多的不同的效果，只需要改nth-of-type(an+b)中n的系数a就可以了。
如果懒得修改尝试，UI设计师在套用这个模板时，只需要把自己制作（或者自动生成）的
知识点总结
1.关于低多边形lowpoly风格图片的制作（重点为自己制作任意图形）
2.CSS3选择器nth-of-type(an+b)的使用
【相关推荐】
1. 特别推荐：“php程序员工具箱”V0.1版本下载
2. 免费css在线视频教程
Atas ialah kandungan terperinci CSS3实现一个炫酷的lowpoly动画实例. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1384
52
Bagaimana untuk mempercepatkan kesan animasi dalam Windows 11: 2 kaedah dijelaskan
Apr 24, 2023 pm 04:55 PM
Apabila Microsoft melancarkan Windows 11, ia membawa banyak perubahan. Salah satu perubahan ialah peningkatan dalam bilangan animasi antara muka pengguna. Sesetengah pengguna ingin mengubah cara sesuatu kelihatan dan mereka perlu mencari cara untuk melakukannya. Mempunyai animasi menjadikannya lebih baik dan lebih mesra pengguna. Animasi menggunakan kesan visual untuk menjadikan komputer kelihatan lebih menarik dan responsif. Sebahagian daripada mereka termasuk menu gelongsor selepas beberapa saat atau minit. Terdapat banyak animasi pada komputer anda yang boleh menjejaskan prestasi PC, memperlahankannya dan mengganggu kerja anda. Dalam kes ini, anda perlu mematikan animasi. Artikel ini akan memperkenalkan beberapa cara pengguna boleh meningkatkan kelajuan animasi mereka pada PC. Anda boleh menggunakan perubahan menggunakan Registry Editor atau fail tersuai yang anda jalankan. Bagaimana untuk menambah baik animasi dalam Windows 11
Animasi CSS: Cara Mencapai Kesan Kilat Elemen
Nov 21, 2023 am 10:56 AM
Animasi CSS: Bagaimana untuk mencapai kesan kilat elemen, contoh kod khusus diperlukan Dalam reka bentuk web, kesan animasi kadangkala boleh membawa pengalaman pengguna yang baik ke halaman. Kesan glitter ialah kesan animasi biasa yang boleh menjadikan elemen lebih menarik perhatian. Berikut akan memperkenalkan cara menggunakan CSS untuk mencapai kesan kilat elemen. 1. Pelaksanaan asas kilat Pertama, kita perlu menggunakan sifat animasi CSS untuk mencapai kesan kilat. Nilai atribut animasi perlu menentukan nama animasi, masa pelaksanaan animasi dan masa tunda animasi
![Animasi tidak berfungsi dalam PowerPoint [Tetap]](https://img.php.cn/upload/article/000/887/227/170831232982910.jpg?x-oss-process=image/resize,m_fill,h_207,w_330)
Animasi tidak berfungsi dalam PowerPoint [Tetap]
Feb 19, 2024 am 11:12 AM
Adakah anda cuba membuat persembahan tetapi tidak boleh menambah animasi? Jika animasi tidak berfungsi dalam PowerPoint pada PC Windows anda, maka artikel ini akan membantu anda. Ini adalah masalah biasa yang dikeluhkan oleh ramai orang. Contohnya, animasi mungkin berhenti berfungsi semasa pembentangan dalam Microsoft Teams atau semasa rakaman skrin. Dalam panduan ini, kami akan meneroka pelbagai teknik penyelesaian masalah untuk membantu anda membetulkan animasi yang tidak berfungsi dalam PowerPoint pada Windows. Mengapa animasi PowerPoint saya tidak berfungsi? Kami mendapati bahawa beberapa sebab yang mungkin menyebabkan animasi dalam PowerPoint tidak berfungsi pada Windows adalah seperti berikut: Disebabkan oleh peribadi
Bagaimana untuk menyediakan animasi ppt untuk masuk dahulu dan kemudian keluar
Mar 20, 2024 am 09:30 AM
Kami sering menggunakan ppt dalam kerja harian kami, jadi adakah anda biasa dengan setiap fungsi operasi dalam ppt? Contohnya: Bagaimana untuk menetapkan kesan animasi dalam ppt, bagaimana untuk menetapkan kesan pensuisan, dan apakah tempoh kesan setiap animasi? Bolehkah setiap slaid bermain secara automatik, masuk dan kemudian keluar dari animasi ppt, dan lain-lain. Dalam isu ini, saya akan berkongsi dengan anda langkah-langkah khusus untuk memasuki dan kemudian keluar dari animasi ppt. Kawan, datang dan lihat. Lihatlah! 1. Mula-mula, kita buka ppt pada komputer, klik di luar kotak teks untuk memilih kotak teks (seperti yang ditunjukkan dalam bulatan merah dalam rajah di bawah). 2. Kemudian, klik [Animasi] dalam bar menu dan pilih kesan [Padam] (seperti yang ditunjukkan dalam bulatan merah dalam rajah). 3. Seterusnya, klik [
Cara menggunakan Vue untuk melaksanakan kesan animasi mesin taip
Sep 19, 2023 am 09:33 AM
Cara menggunakan Vue untuk melaksanakan kesan khas animasi mesin taip Animasi mesin taip ialah kesan khas yang biasa dan menarik perhatian yang sering digunakan dalam tajuk tapak web, slogan dan paparan teks lain. Dalam Vue, kita boleh mencapai kesan animasi mesin taip dengan menggunakan arahan tersuai Vue. Artikel ini akan memperkenalkan secara terperinci cara menggunakan Vue untuk mencapai kesan khas ini dan memberikan contoh kod khusus. Langkah 1: Buat projek Vue Pertama, kita perlu mencipta projek Vue. Anda boleh menggunakan VueCLI untuk membuat projek Vue baharu dengan cepat atau secara manual
Bagaimana untuk melumpuhkan animasi dalam Windows 11
Apr 16, 2023 pm 11:34 PM
Microsoft Windows 11 menyertakan banyak ciri dan fungsi baharu. Antara muka pengguna telah dikemas kini dan syarikat juga telah memperkenalkan beberapa kesan baharu. Secara lalai, kesan animasi digunakan pada kawalan dan objek lain. Patutkah saya melumpuhkan animasi ini? Walaupun Windows 11 menampilkan animasi yang menarik secara visual dan kesan pudar, ia boleh menyebabkan komputer anda berasa lembap kepada sesetengah pengguna kerana mereka menambahkan sedikit kelewatan pada tugasan tertentu. Sangat mudah untuk mematikan animasi untuk pengalaman pengguna yang lebih responsif. Selepas kami melihat perubahan lain yang telah dibuat pada sistem pengendalian, kami akan membimbing anda melalui cara menghidupkan atau mematikan kesan animasi dalam Windows 11. Kami juga mempunyai artikel tentang cara
Selepas penangguhan selama dua tahun, filem animasi 3D domestik 'Er Lang Shen: The Deep Sea Dragon' dijadualkan ditayangkan pada 13 Julai.
Jan 26, 2024 am 09:42 AM
Laman web ini melaporkan pada 26 Januari bahawa filem animasi 3D domestik "Er Lang Shen: The Deep Sea Dragon" mengeluarkan satu set gambar pegun terbaharu dan secara rasmi mengumumkan bahawa ia akan dikeluarkan pada 13 Julai. Difahamkan bahawa "Er Lang Shen: The Deep Sea Dragon" diterbitkan oleh Mihuxing (Beijing) Animation Co., Ltd., Horgos Zhonghe Qiancheng Film Co., Ltd., Zhejiang Hengdian Film Co., Ltd., Zhejiang Gongying Film Co., Ltd., Chengdu Filem animasi terbitan Tianhuo Technology Co., Ltd. dan Huawen Image (Beijing) Film Co., Ltd. dan diarahkan oleh Wang Jun pada asalnya dijadualkan ditayangkan di tanah besar China pada 22 Julai 2022 . Sinopsis plot laman web ini: Selepas Pertempuran Dewa Yang Dikurniakan, Jiang Ziya mengambil "Senarai Tuhan Yang Dikurniakan" untuk membahagikan tuhan, dan kemudian Senarai Tuhan Yang Dikurniakan dimeterai oleh Mahkamah Syurga di bawah laut dalam Kyushu Alam Rahsia. Malah, selain menganugerahkan kedudukan ilahi, terdapat juga banyak roh jahat yang kuat yang dimeterai dalam Senarai Dewa Yang Diberikan.
Filem animasi Hayao Miyazaki 'Porco Rosso' telah dilanjutkan kepada 16 Januari tahun depan, dengan skor Douban 8.6
Dec 18, 2023 am 08:07 AM
Menurut berita dari laman web ini, filem animasi Hayao Miyazaki "Porco Rosso" telah mengumumkan bahawa ia akan melanjutkan tarikh tayangan hingga 16 Januari 2024. Laman web ini sebelum ini melaporkan bahawa "Porco Rosso" telah dilancarkan di Pawagam Talian Khas Persekutuan Seni Kebangsaan. pada 17 November, dengan box office kumulatif lebih 2,000 10,000, dengan skor Douban 8.6, dan 85.8% daripada ulasan 4 dan 5 bintang. "Porco Rosso" diterbitkan oleh Studio Ghibli dan diarahkan oleh Hayao Miyazaki Moriyama, Tokiko Kato, Otsuka Akio, Okamura Akemi dan lain-lain telah mengambil bahagian dalam alih suara. Ia pada asalnya dikeluarkan di Jepun pada tahun 1992. Filem ini diadaptasi daripada buku komik Hayao Miyazaki "The Age of Airships" dan menceritakan kisah juruterbang tentera Tentera Udara Itali Pollock Rosen yang secara ajaib berubah menjadi babi. Selepas itu, dia menjadi pemburu hadiah, melawan perompak udara dan melindungi orang di sekelilingnya. Sinopsis plot: Rosen ialah seorang askar dalam Perang Dunia I
