精品无码一区二区三区AV片无码,丰满人妻一区二区三区视频53

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

來源：易賢網閱讀：1112 次日期：2014-11-20 10:34:21

溫馨提示：易賢網小編為您整理了“HTML5制作3D愛心動畫教程獻給女友浪漫的禮物”,方便廣大網友查閱！

誰說程序員不懂得浪漫，看看程序員是怎么浪漫的，今天小編在國外的網站上看到一個利用HTML5和CSS3制作的3D愛心動畫，在情人節(jié)時送給心愛的人，還是非常不錯的。當然了。背景我們可以用一些浪漫元素。如加上女朋友漂亮的照片。這樣可以制作一個廉價又很有意義的情人節(jié)禮物。大家可以點解DEMO來看看。先上效果圖：

實現(xiàn)代碼如下：

html代碼：

XML/HTML Code復制內容到剪貼板

</div>

這么多div，主要是構造愛心的線條區(qū)域。

CSS代碼：

CSS Code復制內容到剪貼板

.heart3d {

position: absolute;

top: 0;

rightright: 0;

bottombottom: 0;

left: 0;

margin: auto;

width: 100px;

height: 160px;

-webkit-transform-style: preserve-3d;

transform-style: preserve-3d;

-webkit-animation: spin 15s infinite linear;

animation: spin 15s infinite linear;

}

.heart3d [class^="rib"] {

position: absolute;

width: 100px;

height: 160px;

border: solid #f22613;

border-width: 1px 1px 0 0;

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復制內容到剪貼板

@-webkit-keyframes spin {

to {

-webkit-transform: rotateY(360deg) rotateX(360deg);

transform: rotateY(360deg) rotateX(360deg);

}

@keyframes spin {

to {

-webkit-transform: rotateY(360deg) rotateX(360deg);

transform: rotateY(360deg) rotateX(360deg);

}

以上就是HTML代碼和CSS代碼實現(xiàn)的3D愛心動畫效果，浪漫的小伙子可以試著學習一下哦，又get一個交友技能，謝謝閱讀，希望能幫到大家，請繼續(xù)關注腳本之家，我們會努力分享更多優(yōu)秀的文章。

更多信息請查看IT技術專欄

上一篇：實例教程利用html5和css3打造一款創(chuàng)意404頁面

下一篇：html5 css3實例教程一款html5和css3實現(xiàn)的小機器人走路動畫

易賢網手機網站地址：HTML5制作3D愛心動畫教程獻給女友浪漫的禮物

由于各方面情況的不斷調整與變化，易賢網提供的所有考試信息和咨詢回復僅供參考，敬請考生以權威部門公布的正式信息和咨詢?yōu)闇剩?/div>

相關閱讀網絡編程

Shell中如何刪除文本比較長的行的實現(xiàn)方法10月30日

vue.js語法及常用指令10月30日

python 讀寫中文json的實例詳解10月30日

Objective-C Json 實例詳解10月30日

bootstrap table sum總數(shù)量統(tǒng)計實現(xiàn)方法10月30日

python生成二維碼的實例詳解10月30日

Python批量更改文件名的實現(xiàn)方法10月30日

解決出現(xiàn)Incorrect integer value的問題10月30日

jQuery實現(xiàn)切換隱藏與顯示同時切換圖標功能10月30日

docker python api 安裝配置的詳解10月30日

javascript按鈕禁用和啟用的效果實例代碼10月30日

vue.js todolist實現(xiàn)代碼10月30日

vue.js 父向子組件傳參的實例代碼10月30日

apache 開啟重定向 rewrite的實現(xiàn)方法10月30日

Vue.js劃分組件的方法10月30日

python logging日志模塊的詳解10月30日

vue中的scope使用詳解10月30日

docker cgroup 資源監(jiān)控的詳解10月30日

使用Android Studio 開發(fā)自己的SDK教程10月23日

linux系統(tǒng)下MongoDB單節(jié)點安裝教程10月23日

易賢網移動網站

2025國考·省考課程試聽報名

報班類型
姓名
手機號
驗證碼