今天是節(jié)后上班第一天，早上醒來一睜眼，嗯？啊...？什么...？這是哪？我是誰？上什么班？
然鵝，還是被昨晚特意設(shè)置的八個鬧鐘:alarm_clock:吵醒，冬天早上起床的難度...想必各位都心有體會 :sob:，抱著一萬個不情愿起床早早地來到了辦公室，還是熟悉的環(huán)境，還是熟悉的味道。。。
還有，熟悉的任務(wù)需求:joy:。
今天的第一個任務(wù)是寫個登錄頁面，老大給了我一個參(chao)考(xi)案例，大家點擊鏈接就能看到。嗯，這個登錄頁面確實很簡潔、大方，尤其是它的氣泡背景，第一反應(yīng)這應(yīng)該是張動態(tài)圖片，打開審查元素才發(fā)現(xiàn)原來這是用代碼寫的，一下子激起了寶寶的好奇心，所以也試著寫了一個帶氣泡背景的登錄頁面，效果如下：
emm...為什么上傳的 gif 動態(tài)圖總是這么小，來補張截圖：
(大家可以自行腦補這些背景氣泡往上升的畫面 :sob:)
只需一些簡單的代碼就可以實現(xiàn)這樣的效果,
首先我們先定義10個 li 列表標簽，我用的是 vue 框架：
<ul class="bg-bubbles"> <li v-for="(item, index) in bubbles" :key="index"></li></ul>
created() { this.bubbles.length = 10; },樣式是用 less 編寫的：
.bg-bubbles { position: absolute; // 使氣泡背景充滿整個屏幕 top: 0; left: 0; width: 100%; height: 100%; li { position: absolute; // bottom 的設(shè)置是為了營造出氣泡從頁面底部冒出的效果； bottom: -160px; // 默認的氣泡大小； width: 40px; height: 40px; background-color: rgba(255, 255, 255, 0.15); list-style: none; // 使用自定義動畫使氣泡漸現(xiàn)、上升和翻滾； animation: square 15s infinite; transition-timing-function: linear; // 分別設(shè)置每個氣泡不同的位置、大小、透明度和速度，以顯得有層次感； &:nth-child(1) { left: 10%; } &:nth-child(2) { left: 20%; width: 90px; height: 90px; animation-delay: 2s; animation-duration: 7s; } &:nth-child(3) { left: 25%; animation-delay: 4s; } &:nth-child(4) { left: 40%; width: 60px; height: 60px; animation-duration: 8s; background-color: rgba(255, 255, 255, 0.3); } &:nth-child(5) { left: 70%; } &:nth-child(6) { left: 80%; width: 120px; height: 120px; animation-delay: 3s; background-color: rgba(255, 255, 255, 0.2); } &:nth-child(7) { left: 32%; width: 160px; height: 160px; animation-delay: 2s; } &:nth-child(8) { left: 55%; width: 20px; height: 20px; animation-delay: 4s; animation-duration: 15s; } &:nth-child(9) { left: 25%; width: 10px; height: 10px; animation-delay: 2s; animation-duration: 12s; background-color: rgba(255, 255, 255, 0.3); } &:nth-child(10) { left: 85%; width: 160px; height: 160px; animation-delay: 5s; } } // 自定義 square 動畫； @keyframes square { 0% { opacity: 0.5; transform: translateY(0px) rotate(45deg); } 25% { opacity: 0.75; transform: translateY(-400px) rotate(90deg) } 50% { opacity: 1; transform: translateY(-600px) rotate(135deg); } 100% { opacity: 0; transform: translateY(-1000px) rotate(180deg); } } }至此，一個氣泡背景圖就完成了。回過頭來看，確實不難，但也愈來愈讓人感受到 css 動畫的魅力和強大 :relaxed:。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習有所幫助，也希望大家多多支持VeVb武林網(wǎng)。
新聞熱點
疑難解答
