想不想讓你的頁面有心形飄落呢 點擊進(jìn)來看看吧

引入JS 把下面的代碼存為JS文件 在頁面調(diào)用即可

(function(window,document,undefined){
var hearts = [];
window.requestAnimationFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function (callback){
setTimeout(callback,1000/60);
}
})();
init();
function init(){
css(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: absolute;}.heart:after{top: -5px;}.heart:before{left: -5px;}");
attachEvent();
gameloop();
}
function gameloop(){
for(var i=0;i<hearts.length;i++){
if(hearts[i].alpha <=0){
document.body.removeChild(hearts[i].el);
hearts.splice(i,1);
continue;
}
hearts[i].y--;
hearts[i].scale += 0.004;
hearts[i].alpha -= 0.013;
hearts[i].el.style.cssText = "left:"+hearts[i].x+"px;top:"+hearts[i].y+"px;opacity:"+hearts[i].alpha+";transform:scale("+hearts[i].scale+","+hearts[i].scale+") rotate(45deg);background:"+hearts[i].color;
}
requestAnimationFrame(gameloop);
}
function attachEvent(){
var old = typeof window.onclick==="function" && window.onclick;
window.onclick = function(event){
old && old();
createHeart(event);
}
}
function createHeart(event){
var d = document.createElement("div");
d.className = "heart";
hearts.push({
el : d,
x : event.clientX - 5,
y : event.clientY - 5,
scale : 1,
alpha : 1,
color : randomColor()
});
document.body.appendChild(d);
}
function css(css){
var style = document.createElement("style");
style.type="text/css";
try{
style.appendChild(document.createTextNode(css));
}catch(ex){
style.styleSheet.cssText = css;
}
document.getElementsByTagName('head')[0].appendChild(style);
}
function randomColor(){
return "rgb("+(~~(Math.random()*255))+","+(~~(Math.random()*255))+","+(~~(Math.random()*255))+")";
}
})(window,document);
<script src="__JS__/love.js"></script>
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末涩惑,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子锹漱,更是在濱河造成了極大的恐慌,老刑警劉巖铐姚,帶你破解...
    沈念sama閱讀 221,695評論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件败京,死亡現(xiàn)場離奇詭異,居然都是意外死亡唯沮,警方通過查閱死者的電腦和手機(jī)伏尼,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,569評論 3 399
  • 文/潘曉璐 我一進(jìn)店門忿檩,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人爆阶,你說我怎么就攤上這事燥透。” “怎么了辨图?”我有些...
    開封第一講書人閱讀 168,130評論 0 360
  • 文/不壞的土叔 我叫張陵班套,是天一觀的道長。 經(jīng)常有香客問我故河,道長吱韭,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 59,648評論 1 297
  • 正文 為了忘掉前任鱼的,我火速辦了婚禮理盆,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘凑阶。我一直安慰自己猿规,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 68,655評論 6 397
  • 文/花漫 我一把揭開白布晌砾。 她就那樣靜靜地躺著坎拐,像睡著了一般烦磁。 火紅的嫁衣襯著肌膚如雪养匈。 梳的紋絲不亂的頭發(fā)上哼勇,一...
    開封第一講書人閱讀 52,268評論 1 309
  • 那天,我揣著相機(jī)與錄音呕乎,去河邊找鬼积担。 笑死,一個胖子當(dāng)著我的面吹牛猬仁,可吹牛的內(nèi)容都是我干的帝璧。 我是一名探鬼主播,決...
    沈念sama閱讀 40,835評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼湿刽,長吁一口氣:“原來是場噩夢啊……” “哼的烁!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起诈闺,我...
    開封第一講書人閱讀 39,740評論 0 276
  • 序言:老撾萬榮一對情侶失蹤渴庆,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后雅镊,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體襟雷,經(jīng)...
    沈念sama閱讀 46,286評論 1 318
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,375評論 3 340
  • 正文 我和宋清朗相戀三年仁烹,在試婚紗的時候發(fā)現(xiàn)自己被綠了耸弄。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,505評論 1 352
  • 序言:一個原本活蹦亂跳的男人離奇死亡卓缰,死狀恐怖计呈,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情征唬,我是刑警寧澤震叮,帶...
    沈念sama閱讀 36,185評論 5 350
  • 正文 年R本政府宣布,位于F島的核電站鳍鸵,受9級特大地震影響苇瓣,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜偿乖,卻給世界環(huán)境...
    茶點故事閱讀 41,873評論 3 333
  • 文/蒙蒙 一击罪、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧贪薪,春花似錦媳禁、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,357評論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春毫别,著一層夾襖步出監(jiān)牢的瞬間娃弓,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,466評論 1 272
  • 我被黑心中介騙來泰國打工岛宦, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留台丛,地道東北人。 一個月前我還...
    沈念sama閱讀 48,921評論 3 376
  • 正文 我出身青樓砾肺,卻偏偏與公主長得像挽霉,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子变汪,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,515評論 2 359