整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
注本頭條，專注做前端
馬上就到520，作為程序員來說，這是不可多得的表白神器——html5+canvas制作的愛心，由很多個小愛心組成的大愛心，可3d旋轉(zhuǎn)，效果非常不錯
愛心中間名字可自定義
// 演示
https://www.html5tricks.com/demo/html5-heart-explain/index2.html
// 下載
https://www.html5tricks.com/download/html5-heart-explain.rar
20要來了，為回饋朋友們所有專欄8折優(yōu)惠，感興趣的朋友可以訂閱，感謝大家的支持！
520馬上就要到，作為程序員的你是不是也想送個特別的禮物。今天給大家分享一個HTML5+CSS3+jQuery實現(xiàn)的情侶浪漫表白JS特效，視覺效果還是相當不錯！得此表白神器，程序猿也可以很浪漫！快去追你的女神吧，把這個告白愛心動畫發(fā)給你心愛的她！
這個特效主要實現(xiàn)了這幾個功能，功能一基于jQuery實現(xiàn)的文字打印動態(tài)效果，文字的顏色個樣式通過定義不同的CSS樣式來控制的。功能二動態(tài)生成隨機的花瓣并拼成一個愛心圖案，通過prototype屬性向?qū)ο筇砑訉傩院头椒ā９δ苋龕坌闹械奈淖值腼@示，這個主要是利用了fadeIn方法來實現(xiàn)。最后一個功能就是當點擊接受時開始計時功能，通過new Date()獲取當前時間再把時間差轉(zhuǎn)換為天數(shù)、小時數(shù)、分鐘數(shù)和秒數(shù)顯示即可。
這里的d.html(c.substring(0,b)+(b&1?"_":""))是為了實現(xiàn)打印的動態(tài)效果了,當下標index為奇數(shù)的時候最后一個字符顯示為"_",當為偶數(shù)的時候顯示" ",這樣就能形成打印文字的那種動態(tài)效果。
這里主要的功能就是創(chuàng)建矢量線，告訴我們花瓣的走向。接著再繪制隨機生成的花瓣圖案，最后再加上開花的效果。這里的Vector方法繪制了愛心的大致形狀，Petal方法則負責繪制隨機生成的花瓣，Bloom方法則定義了花瓣的綻放效果。Garden方法為花園入口，負責參數(shù)選項配置選項及方法調(diào)用以實現(xiàn)愛心圖案的生成。
在愛心中間的字體采用了淡入的效果，這里我們可以通過jQuery封裝的fadeIn()方法實現(xiàn)淡入效果來顯示一個隱藏的元素。文字默認樣式通過CSS定義為隱藏狀態(tài)，fadeIn()由兩個參數(shù)分別是speed（速度）和callback（回調(diào)函數(shù)）。當花瓣愛心繪制完成之后我們調(diào)用fadeIn方法顯示愛心中的內(nèi)容，回調(diào)中繼續(xù)顯示loveu中的內(nèi)容。
當鏈接被點擊的時候觸發(fā)timeElapse方法開始計時，這里獲取了當前的時間并對時間進行了換算為天數(shù)、小時數(shù)、分鐘數(shù)和秒數(shù)顯示。parse()方法可解析一個日期時間字符串，并返回 1970/1/1 午夜距離該日期時間的毫秒數(shù)。floor()方法則是對一個數(shù)進行向下取整計算，返回的是小于或等于且最接近計算值的整數(shù)。
源碼說明：本例中的源碼非本人創(chuàng)作，本文僅作簡單的解析和分享。需要源碼的朋友可以在評論區(qū)留言，本源碼僅限學習參考請勿它用。以上內(nèi)容是小編給大家分享的【520情侶浪漫表白JS特效分享（附源碼）】，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。更多Vue實戰(zhàn)技巧可以參考專欄：Vue實戰(zhàn)系列，在此也非常感謝大家對小編的支持！
案修改
愛心文案
效果地址：碼農(nóng)的浪漫 示愛html代碼
源碼地址：
謝謝大家的支持。
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
