HTML5制作3D愛心動畫教程獻給女友浪漫的禮物

2020-03-24 18:42:46

字體：大中小

供稿：網(wǎng)友

誰說程序員不懂得浪漫，看看程序員是怎么浪漫的，今天小編在國外的網(wǎng)站上看到一個利用HTML5和CSS3制作的3D愛心動畫，在情人節(jié)時送給心愛的人，還是非常不錯的。當然了。背景我們可以用一些浪漫元素。如加上女朋友漂亮的照片。這樣可以制作一個廉價又很有意義的情人節(jié)禮物。大家可以點解DEMO來看看。先上效果圖：實現(xiàn)代碼如下： html代碼：XML/HTML Code復制內(nèi)容到剪貼板
height:160px; -webkit-transform-style:preserve-3d; transform-style:preserve-3d; -webkit-animation:spin15sinfinitelinear; animation:spin15sinfinitelinear; } .heart3d[class^= rib ]{ position:absolute; width:100px; height:160px; border:solid#f22613; border-width:1px1px00; border-radius:50%50%0/40%50%0; } .heart3d[class$= 1 ]{ -webkit-transform:rotateY(10deg)rotateZ(45deg)translateX(30px); transform:rotateY(10deg)rotateZ(45deg)translateX(30px); } .heart3d[class$= 2 ]{ -webkit-transform:rotateY(20deg)rotateZ(45deg)translateX(30px); transform:rotateY(20deg)rotateZ(45deg)translateX(30px); } .heart3d[class$= 3 ]{ -webkit-transform:rotateY(30deg)rotateZ(45deg)translateX(30px); transform:rotateY(30deg)rotateZ(45deg)translateX(30px); } .heart3d[class$= 4 ]{ -webkit-transform:rotateY(40deg)rotateZ(45deg)translateX(30px); transform:rotateY(40deg)rotateZ(45deg)translateX(30px); } .heart3d[class$= 5 ]{ -webkit-transform:rotateY(50deg)rotateZ(45deg)translateX(30px); transform:rotateY(50deg)rotateZ(45deg)translateX(30px); } .heart3d[class$= 6 ]{ -webkit-transform:rotateY(60deg)rotateZ(45deg)translateX(30px); transform:rotateY(60deg)rotateZ(45deg)translateX(30px); } .heart3d[class$= 7 ]{ -webkit-transform:rotateY(70deg)rotateZ(45deg)translateX(30px); transform:rotateY(70deg)rotateZ(45deg)translateX(30px); } .heart3d[class$= 8 ]{ -webkit-transform:rotateY(80deg)rotateZ(45deg)translateX(30px); transform:rotateY(80deg)rotateZ(45deg)translateX(30px); } .heart3d[class$= 9 ]{ -webkit-transform:rotateY(90deg)rotateZ(45deg)translateX(30px); transform:rotateY(90deg)rotateZ(45deg)translateX(30px); } .heart3d[class$= 10 ]{ -webkit-transform:rotateY(100deg)rotateZ(45deg)translateX(30px); transform:rotateY(100deg)rotateZ(45deg)translateX(30px); } .heart3d[class$= 11 ]{ -webkit-transform:rotateY(110deg)rotateZ(45deg)translateX(30px); transform:rotateY(110deg)rotateZ(45deg)translateX(30px); } .heart3d[class$= 12 ]{ -webkit-transform:rotateY(120deg)rotateZ(45deg)translateX(30px); transform:rotateY(120deg)rotateZ(45deg)translateX(30px); } .heart3d[class$= 13 ]{ -webkit-transform:rotateY(130deg)rotateZ(45deg)translateX(30px); transform:rotateY(130deg)rotateZ(45deg)translateX(30px); } .heart3d[class$= 14 ]{ -webkit-transform:rotateY(140deg)rotateZ(45deg)translateX(30px); transform:rotateY(140deg)rotateZ(45deg)translateX(30px); } .heart3d[class$= 15 ]{ -webkit-transform:rotateY(150deg)rotateZ(45deg)translateX(30px); transform:rotateY(150deg)rotateZ(45deg)translateX(30px); } .heart3d[class$= 16 ]{ -webkit-transform:rotateY(160deg)rotateZ(45deg)translateX(30px); transform:rotateY(160deg)rotateZ(45deg)translateX(30px); } .heart3d[class$= 17 ]{ -webkit-transform:rotateY(170deg)rotateZ(45deg)translateX(30px); transform:rotateY(170deg)rotateZ(45deg)translateX(30px); } .heart3d[class$= 18 ]{ -webkit-transform:rotateY(180deg)rotateZ(45deg)translateX(30px); transform:rotateY(180deg)rotateZ(45deg)translateX(30px); } .heart3d[class$= 19 ]{ -webkit-transform:rotateY(190deg)rotateZ(45deg)translateX(30px); transform:rotateY(190deg)rotateZ(45deg)translateX(30px); } .heart3d[class$= 20 ]{ -webkit-transform:rotateY(200deg)rotateZ(45deg)translateX(30px); transform:rotateY(200deg)rotateZ(45deg)translateX(30px); } .heart3d[class$= 21 ]{ -webkit-transform:rotateY(210deg)rotateZ(45deg)translateX(30px); transform:rotateY(210deg)rotateZ(45deg)translateX(30px); } .heart3d[class$= 22 ]{ -webkit-transform:rotateY(220deg)rotateZ(45deg)translateX(30px); transform:rotateY(220deg)rotateZ(45deg)translateX(30px); } .heart3d[class$= 23 ]{ -webkit-transform:rotateY(230deg)rotateZ(45deg)translateX(30px); transform:rotateY(230deg)rotateZ(45deg)translateX(30px); } .heart3d[class$= 24 ]{ -webkit-transform:rotateY(240deg)rotateZ(45deg)translateX(30px); transform:rotateY(240deg)rotateZ(45deg)translateX(30px); } .heart3d[class$= 25 ]{ -webkit-transform:rotateY(250deg)rotateZ(45deg)translateX(30px); transform:rotateY(250deg)rotateZ(45deg)translateX(30px); } .heart3d[class$= 26 ]{ -webkit-transform:rotateY(260deg)rotateZ(45deg)translateX(30px); transform:rotateY(260deg)rotateZ(45deg)translateX(30px); } .heart3d[class$= 27 ]{ -webkit-transform:rotateY(270deg)rotateZ(45deg)translateX(30px); transform:rotateY(270deg)rotateZ(45deg)translateX(30px); } .heart3d[class$= 28 ]{ -webkit-transform:rotateY(280deg)rotateZ(45deg)translateX(30px); transform:rotateY(280deg)rotateZ(45deg)translateX(30px); } .heart3d[class$= 29 ]{ -webkit-transform:rotateY(290deg)rotateZ(45deg)translateX(30px); transform:rotateY(290deg)rotateZ(45deg)translateX(30px); } .heart3d[class$= 30 ]{ -webkit-transform:rotateY(300deg)rotateZ(45deg)translateX(30px); transform:rotateY(300deg)rotateZ(45deg)translateX(30px); } .heart3d[class$= 31 ]{ -webkit-transform:rotateY(310deg)rotateZ(45deg)translateX(30px); transform:rotateY(310deg)rotateZ(45deg)translateX(30px); } .heart3d[class$= 32 ]{ -webkit-transform:rotateY(320deg)rotateZ(45deg)translateX(30px); transform:rotateY(320deg)rotateZ(45deg)translateX(30px); } .heart3d[class$= 33 ]{ -webkit-transform:rotateY(330deg)rotateZ(45deg)translateX(30px); transform:rotateY(330deg)rotateZ(45deg)translateX(30px); } .heart3d[class$= 34 ]{ -webkit-transform:rotateY(340deg)rotateZ(45deg)translateX(30px); transform:rotateY(340deg)rotateZ(45deg)translateX(30px); } .heart3d[class$= 35 ]{ -webkit-transform:rotateY(350deg)rotateZ(45deg)translateX(30px); transform:rotateY(350deg)rotateZ(45deg)translateX(30px); } .heart3d[class$= 36 ]{ -webkit-transform:rotateY(360deg)rotateZ(45deg)translateX(30px); transform:rotateY(360deg)rotateZ(45deg)translateX(30px); }
對這些線條進行渲染，以便其有3D的視覺效果。然后定義了一組名稱為spin的HTML5動畫：CSS Code復制內(nèi)容到剪貼板
to{ -webkit-transform:rotateY(360deg)rotateX(360deg); transform:rotateY(360deg)rotateX(360deg); } } @keyframesspin{ to{ -webkit-transform:rotateY(360deg)rotateX(360deg); transform:rotateY(360deg)rotateX(360deg); } }
以上就是HTML代碼和CSS代碼實現(xiàn)的3D愛心動畫效果，浪漫的小伙子可以試著學習一下哦，又get一個交友技能，謝謝閱讀，希望能幫到大家，請繼續(xù)關注phpstudy，我們會努力分享更多優(yōu)秀的文章。html教程

鄭重聲明：本文版權歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。

上一篇：html中的font是什么標簽？怎么使用？（代碼詳解）

下一篇：html的錨文本怎么寫