【css酷炫效果】實現魚群游動動態效果

【css酷炫效果】實現小魚游動動態效果

  • 創作背景
  • css代碼
  • 創建div容器
  • 引入jquery
  • 引入魚群js
  • 完整代碼
  • 效果圖

成品資源下載鏈接:點擊下載

在開發系統功能的時候,無意間看到了小魚游動特效,感覺很有意思,就在網上找了相關教程,分享給大家。

創作背景

剛看到csdn出活動了,趕時間,直接上代碼。

css代碼

.container{background-color:transparent; position:fixed;bottom:0;left:0;margin:0;padding:0;}
  • background-color:transparent;
    這行代碼設置了 .container 的背景顏色為透明(transparent)。
  • position:fixed;
    這行代碼將 .container 的定位方式設置為固定定位(fixed)。
  • bottom:0;
    無論頁面如何滾動,.container 都會保持在瀏覽器窗口的底部。
  • left:0;
    確保 .container 始終位于瀏覽器窗口的最左側。
  • margin:0;
    這行代碼將 .container 的外邊距(margin)設置為0。
  • padding:0;
    這行代碼將 .container 的內邊距(padding)設置為0。

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/diannao/73769.shtml
繁體地址,請注明出處:http://hk.pswp.cn/diannao/73769.shtml
英文地址,請注明出處:http://en.pswp.cn/diannao/73769.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

停車場停車位數據集,標注停車位上是否有車,平均正確識別率99.5%,支持yolov5-11, coco json,darknet,xml格式標注

停車場停車位數據集,標注停車位上是否有車,平均正確識別率98.0%,支持yolov5-11, coco json,darknet,xml格式標注 數據集-識別停車場所有車輛的數據集 數據集分割 一共184張圖片 訓練組 89&am…

結合基于標簽置信度的特征選擇方法用于部分多標簽學習-簡介版

假設 部分多標簽學習(PML)假設:假設樣本的標簽集合中存在偽正標簽,即某些標簽可能是錯誤的。目標是從候選標簽集中識別出真實標簽。特征與標簽的關系假設:假設不同的標簽對應的特征子空間可能是不同的,而不…

Lora微LLAMA模型實戰

引言 本文介紹如何復現Alpaca-lora,即基于alpaca數據集用lora方法微調Llama模型。 環境準備 實驗環境用的是lanyun,新用戶點擊注冊可以送算力。 下載huggingface上的模型是一個令人頭疼的問題,但在lanyun上可以通過在終端運行source /etc…

Maven常見問題匯總

Maven刷新,本地倉庫無法更新 現象 This failure was cached in the local repository and resolution is not reattempted until the update interval of aliyunmaven has elapsed or updates are forced原因 因為上一次嘗試下載,發現對應的倉庫沒有這個maven配置…

什么是站群服務器?站群服務器應該怎么選?

站群服務器是專門用于托管和管理多個網站的服務器。通常用于SEO優化、內容分發、廣告推廣等場景,用戶可以通過一個服務器管理多個站點,提升效率并降低成本。選擇站群服務器時,需根據業務需求、性能要求、IP資源等因素進行綜合考慮。 什么是站…

分享一個項目中遇到的一個算法題

需求背景: 需求是用戶要創建一個任務計劃在未來執行,要求在創建任務計劃的時候判斷選擇的時間是否符合要求,否則不允許創建,創建的任務類型有兩種,一種是單次,任務只執行一次;另一種是周期&…

【LInux進程六】命令行參數和環境變量

【LInux進程六】命令行參數和環境變量 1.main函數的兩個參數2.利用main函數實現一個簡單的計算器3.環境變量之一:PATH4.修改PATH5.在命令行解釋器bash中查看所有環境變量6.用自己寫的程序查看環境變量7.main函數的第三個參數8.本地的環境變量和環境變量9.環境變量具…

時間軸版本-2.0

文章簡述 這是本人自己封裝的時間軸2.0版本的代碼,用到了TypeScriptJavaScript 這篇文章只有代碼和具體的使用方式,如果想看具體的講解可以參考本人寫的時間軸1.0版本的,在1.0版本中可能計算時間線的邏輯略有不同,但是大致的計算…

大語言模型的壓縮技術

盡管人們對越來越大的語言模型一直很感興趣,但MistralAI 向我們表明,規模只是相對而言的,而對邊緣計算日益增長的興趣促使我們使用小型語言獲得不錯的結果。壓縮技術提供了一種替代方法。在本文中,我將解釋這些技術,并…

大華HTTP協議在智聯視頻超融合平臺中的接入方法

一. 大華HTTP協議介紹 大華HTTP協議是大華股份(Dahua Technology)為其安防監控設備開發的一套基于HTTP/HTTPS的通信協議,主要用于設備與客戶端(如PC、手機、服務器)之間的數據交互。該協議支持設備管理、視頻流獲取、…

Linux內核實時機制28 - RT調度器11 - RT 組調度

Linux內核實時機制28 - RT調度器11 - RT 組調度 相關數據結構 內核中通過static int sched_rt_runtime_exceeded(struct rt_rq *rt_rq)函數來判斷實時任務運行時間是否超出帶寬限制,判斷這個運行隊列rt_rq的運行時間是否超過了額定的運行時間。而“運行時間”和“額定時間”都…

java,poi,提取ppt文件中的文字內容

注意&#xff0c;不涉及圖片處理。 先上pom依賴&#xff1a; <!-- 處理PPTX文件 --><dependency><groupId>org.apache.poi</groupId><artifactId>poi-ooxml</artifactId><version>5.2.3</version></dependency><!--…

7、vue3做了什么

大佬認為有何優點&#xff1a; 組合式api----邏輯集中、對ts有更好的支持RFC–開放了一個討論機制&#xff0c;可以看到每一個api的提案&#xff0c;方便源碼維護&#xff0c;功能擴展&#xff0c;大家一起討論 官方rfc響應式獨立&#xff0c;new Proxy&#xff0c;天生自帶來…

多人在線聊天系統,創建群,視頻,語音,自帶帶授權碼

多人在線聊天系統&#xff0c;創建群&#xff0c;視頻&#xff0c;語音 帶授權碼&#xff0c;授權碼限制 10 個網站&#xff0c;需要下載研究吧 在線聊天&#xff0c;創建群&#xff0c;表情&#xff0c;圖片&#xff0c;文件&#xff0c;視頻&#xff0c;語音&#xff0c;自…

數據結構概覽

關鍵點&#xff1a; 數據結構是組織和存儲數據的方式&#xff0c;幫助高效訪問和操作數據。常見類型包括數組、鏈表、棧、隊列、樹和圖&#xff0c;每種都有特定用途。代碼示例和實際應用場景將幫助初學者理解這些概念。 什么是數據結構&#xff1f; 數據結構就像你整理書架或…

Android studio點擊運行按鈕在build\intermediates\apk\debug目錄下生成的apk在真機上安裝失敗,提示test only

Android studio點擊運行按鈕在build\intermediates\apk\debug目錄下生成的apk在真機上安裝失敗&#xff0c;提示test only DeepSeek R1 思考 15 秒 思考過程 針對Android Studio生成的APK在真機安裝時提示“test only”的問題&#xff0c;以下是詳細解決方案&#xff1a; 1.…

NFC 碰一碰發視頻源碼搭建,支持OEM

一、引言 NFC&#xff08;Near Field Communication&#xff09;近場通信技術&#xff0c;以其便捷、快速的數據交互特性&#xff0c;正廣泛應用于各個領域。其中&#xff0c;NFC 碰一碰發視頻這一應用場景&#xff0c;為用戶帶來了新穎且高效的視頻分享體驗。想象一下&#x…

Python基礎語法全解析:從入門到實踐

Python作為一門簡潔高效、功能強大的編程語言&#xff0c;憑借其易讀性和豐富的生態系統&#xff0c;已成為編程領域的“明星語言”。本文將系統講解Python的核心語法&#xff0c;涵蓋變量、數據類型、控制結構、函數、模塊等核心概念&#xff0c;幫助讀者快速掌握編程基礎。 一…

TypeScript中的類型斷言(type assertion),如何使用類型斷言進行類型轉換?

一、什么是類型斷言&#xff1f; 類型斷言&#xff08;Type Assertion&#xff09;是 TypeScript 中一種顯式指定變量類型的方式&#xff0c;它告訴編譯器&#xff1a;“我比編譯器更清楚這個值的類型”。?這不是運行時類型轉換&#xff0c;而是編譯階段的類型聲明輔助機制。…

分區表和分表

分區表&#xff08;Partitioning&#xff09; 定義 分區表是將單個表的數據按照某種規則&#xff08;如范圍、列表、哈希等&#xff09;劃分為多個邏輯部分&#xff0c;每個部分稱為一個分區。數據仍然存儲在一個物理表中&#xff0c;但邏輯上被分割為多個分區。 特點 邏輯…