彈幕告白男神or女神

??????? 2017年5月3號髓需,值得紀(jì)念的日子刑峡,我注冊了簡書刻肄。接觸這個APP是從一位“百度人”(ps:也不知道這么稱呼合理不合理)那里得知的吻氧,我關(guān)注他的朋友圈溺忧,瀏覽著幾乎每天發(fā)布的文章,是我對前端有了更大的興趣盯孙,也對簡書這個APP也有了更大的吸引力鲁森。在這個平臺上知識是可以共享的,交流的振惰。再次我要發(fā)表我的一個文章歌溉,有不足希望業(yè)內(nèi)人士給出批評和指導(dǎo)。

520馬上來臨骑晶,“單身狗”想要擺脫單身嗎痛垛?想要邂逅你的男神和女神嗎?鄙人簡單做了一個彈幕告白墻透罢,但這也是初級的版本榜晦,僅供參考。

一 羽圃、心形的圖形加載懸掛到頁面的頂部乾胶,呈現(xiàn)一種來回擺動的動畫效果效果


此時運用CSS3中的animation屬性抖剿,對圖片設(shè)置的源代碼如下:

-webkit-animation:bd 5s ease-in-out infinite;/*動畫名稱 動畫完成時間 運動速度 永遠無限*/}

@-webkit-keyframes bd{

0%{-webkit-transform:rotate(30deg); -webkit-transform-origin:center top;}

50%{-webkit-transform:rotate(-30deg);-webkit-transform-origin:center top;}

100%{-webkit-transform:rotate(30deg);-webkit-transform-origin:center top;}

}

transform 屬性向元素應(yīng)用 2D 或 3D 轉(zhuǎn)換。該屬性允許我們對元素進行旋轉(zhuǎn)(ratate)识窿、縮放斩郎、移動或傾斜。

二喻频、給頁面加載音樂

我引用的是告白氣球單曲缩宜,利用<audio src='' id='mymuisc'></audio>,利用js中play()方法控制播放

$(#mymuisc).get(0).play();

對音樂進行控制播放甥温,可以將圖片設(shè)置為一個控制的開關(guān)锻煌,點擊圖片播放音樂,再點擊停止音樂

利用js中的play()和pause()方法

var i=0;

$("img").click(function(){

if (i==0) {

$("#mymusic").get(0).play();

i=1;

} else{

$("#mymusic").get(0).pause();

i=0;

}

});

我后期的音樂播放器也會利用這種方法去控制音樂的播放姻蚓。

今天先寫到這里宋梧,我還要寫畢業(yè)論文呢,明天老師要檢查狰挡,怕怕怕捂龄,又要挨訓(xùn)了,也是對自己的學(xué)過的知識總結(jié)加叁,明天繼續(xù)把告白彈幕寫過的內(nèi)容進行更新倦沧,我寫這個也是預(yù)備給別人告白呢,哈哈哈它匕,妹子有些猛呢展融,很喜歡簡書這個APP,自己的留言板超凳,自己的天地愈污。

???????????????????????????????????????????? the best wish to everyone!

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市轮傍,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌首装,老刑警劉巖创夜,帶你破解...
    沈念sama閱讀 218,607評論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異仙逻,居然都是意外死亡驰吓,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,239評論 3 395
  • 文/潘曉璐 我一進店門系奉,熙熙樓的掌柜王于貴愁眉苦臉地迎上來檬贰,“玉大人,你說我怎么就攤上這事缺亮∥痰樱” “怎么了?”我有些...
    開封第一講書人閱讀 164,960評論 0 355
  • 文/不壞的土叔 我叫張陵,是天一觀的道長葵礼。 經(jīng)常有香客問我号阿,道長,這世上最難降的妖魔是什么鸳粉? 我笑而不...
    開封第一講書人閱讀 58,750評論 1 294
  • 正文 為了忘掉前任扔涧,我火速辦了婚禮,結(jié)果婚禮上届谈,老公的妹妹穿的比我還像新娘枯夜。我一直安慰自己,他們只是感情好艰山,可當(dāng)我...
    茶點故事閱讀 67,764評論 6 392
  • 文/花漫 我一把揭開白布湖雹。 她就那樣靜靜地躺著,像睡著了一般程剥。 火紅的嫁衣襯著肌膚如雪劝枣。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,604評論 1 305
  • 那天织鲸,我揣著相機與錄音舔腾,去河邊找鬼。 笑死搂擦,一個胖子當(dāng)著我的面吹牛稳诚,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播瀑踢,決...
    沈念sama閱讀 40,347評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼扳还,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了橱夭?” 一聲冷哼從身側(cè)響起氨距,我...
    開封第一講書人閱讀 39,253評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎棘劣,沒想到半個月后俏让,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,702評論 1 315
  • 正文 獨居荒郊野嶺守林人離奇死亡茬暇,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,893評論 3 336
  • 正文 我和宋清朗相戀三年首昔,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片糙俗。...
    茶點故事閱讀 40,015評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡勒奇,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出巧骚,到底是詐尸還是另有隱情赊颠,我是刑警寧澤格二,帶...
    沈念sama閱讀 35,734評論 5 346
  • 正文 年R本政府宣布,位于F島的核電站巨税,受9級特大地震影響蟋定,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜草添,卻給世界環(huán)境...
    茶點故事閱讀 41,352評論 3 330
  • 文/蒙蒙 一驶兜、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧远寸,春花似錦抄淑、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,934評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至灶芝,卻和暖如春郑原,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背夜涕。 一陣腳步聲響...
    開封第一講書人閱讀 33,052評論 1 270
  • 我被黑心中介騙來泰國打工犯犁, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人女器。 一個月前我還...
    沈念sama閱讀 48,216評論 3 371
  • 正文 我出身青樓酸役,卻偏偏與公主長得像,于是被迫代替她去往敵國和親驾胆。 傳聞我的和親對象是個殘疾皇子涣澡,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,969評論 2 355

推薦閱讀更多精彩內(nèi)容

  • 各種純css圖標(biāo) CSS3可以實現(xiàn)很多漂亮的圖形,我收集了32種圖形丧诺,在下面列出入桂。直接用CSS3畫出這些圖形,要比...
    劍殘閱讀 9,549評論 0 8
  • 選擇qi:是表達式 標(biāo)簽選擇器 類選擇器 屬性選擇器 繼承屬性: color驳阎,font事格,text-align,li...
    love2013閱讀 2,315評論 0 11
  • 選擇qi:是表達式 標(biāo)簽選擇器 類選擇器 屬性選擇器 繼承屬性: color搞隐,font,text-align远搪,li...
    wzhiq896閱讀 1,754評論 0 2
  • 001 化敵為友 目前遇到過最有分歧最需要解決的“敵人”是我老公劣纲。幾年前大寶不到一歲咳嗽嚴(yán)重,我極度不想讓他...
    大果果大沐沐閱讀 167評論 0 1
  • 在那陽光直射的午后绷柒,一個無人問津的小草叢中志于,一個幼小的腦袋探了出來東張西望,正是小空道废睦。 他抬起那稚嫩的臉...
    杜若滿汀洲閱讀 464評論 3 10