網頁圖像漸變的方法(HTML+CSS) (漸變與切換)

来源:https://www.cnblogs.com/appleliushiqiD/p/18099942
-Advertisement-
Play Games

網頁圖像漸變的方法(HTML+CSS)(漸變與切換) Date: 2024.03.27 參考 色彩 runoob-漸變色工具 漸變 - 水平多圖 效果 HTML <div class="conBox pubCon"> <div class="imgBox"> <img class="img1" sr ...


網頁圖像漸變的方法(HTML+CSS)(漸變與切換)

Date: 2024.03.27

參考

  1. 色彩 runoob-漸變色工具

漸變 - 水平多圖

  • 效果
    漸變效果圖 gif

  • HTML

<div class="conBox pubCon">
  <div class="imgBox">
    <img class="img1" src="" />
    <img class="img2" src="" />
  </div>
  <div class="imgBox">
    <img class="img1" src="" />
    <img class="img2" src="" />
  </div>
  <div class="imgBox">
    <img class="img1" src="" />
    <img class="img2" src="" />
  </div>
</div>

  • CSS
img{ border: none; height: 250px; width: 250px; border-radius: 2% }
.pubCon{ width: 1000px; margin: auto } /* exp1: if you donot need, ignnore */

.conBox{ display: flex; justify-content: space-around } /* exp2: if you have more images */
.imgBox{ height: 250px; width: 250px } /* exp3: fit flex */
.imgBox img{ position: absolute } /* exp4: about position */

.imgBox .img1{ background: linear-gradient(-45deg, #a8cecf, #cee4da) } /* exp5: gave images a color, if you have src value, ignore */
.imgBox .img2{ background: linear-gradient(45deg,  #c6ffdd, #f7797d) } /* exp5: gave images other color, if you have src value, ignore */

.imgBox img:first-child{ animation: am 20s ease-in-out infinite; z-index: 1 } /* exp6: about 'z-index' */


@keyframes am {
  0%, 40% { opacity: 1 }
  50%, 90% { opacity: 0 }
}

  • CSS 說明:
  1. 這隻是一個控制水平寬度和居中的模板,不需要可以忽略。
  2. 當你有多組圖片需要進行一起切換時,可以這樣,讓圖像組分散在水平方向。
  3. 當設置了 flexjustify-content 時,你需要子元素有寬度,以控制它的位置。參考 MDN-flexible參考 MDN-justify-content
  4. position: 讓表層與裡層進行切換展示,需要圖片重疊,你需要將圖像 img 設置為絕對位置參考 MDN-position
  5. 如果你的圖像有 src 可以不用設置背景,這裡只是由於替代 img 內容。
  6. 當你使用 opacity 屬性控制了第一個 img 元素透明,將改變其層疊上下文參考 MDN-opacity,需要將其優先設置在上層,使得其 opacity 恢復後能再顯示在上層,覆蓋掉第二章圖。

切換 - 水平多圖

  • 效果

切換效果圖 gif

  • HTML
<div class="conBox pubCon">
     <div class="outBox">                                                      
        <div class="imgBox">
            <img class="img1" src="" />
            <img class="img2" src="" />
        </div>
    </div>
    <div class="outBox">
        <div class="imgBox">
            <img class="img1" src="" />
            <img class="img2" src="" />
        </div>
    </div>
    <div class="outBox">
        <div class="imgBox">
            <img class="img1" src="" />
            <img class="img2" src="" />
        </div>
    </div>
</div>

  • CSS
img{ border: none; height: 250px; width: 250px; border-radius: 2% }
.pubCon{ width: 1000px; margin: auto } /* exp1: if you donot need, ignnore */

.conBox{ display: flex; justify-content: space-around } /* exp2: if you have more images */
.outBox{ width: 250px; height: 250px; border-radius: 2%; overflow: hidden } /* exp3: control the width height */
.imgBox{ width: 500px; display: flex } /* exp4: make imgs inline */
/* .imgBox{ float:left; display: flex } /* exp4: other way */

.imgBox .img1{ background: linear-gradient(-45deg, #a8cecf, #cee4da) } /* exp5: gave images a color, if you have src value, ignore */
.imgBox .img2{ background: linear-gradient(45deg,  #c6ffdd, #f7797d) } /* exp5: gave images other color, if you have src value, ignore */

.imgBox{ animation: am 10s ease-in-out infinite }


@keyframes am {
  0%, 40% { margin-left: 0 }
  50%, 90% { margin-left: -250px }
}

  • CSS 說明:
  1. 這隻是一個控制水平寬度和居中的模板,不需要可以忽略。
  2. 當你有多組圖片需要進行一起切換時,可以這樣,讓圖像組分散在水平方向。
  3. 你需要設置一個外部的邊界大小,以控製圖像顯示的內容,即讓暫時不需要顯示的內容先隱藏起來。
  4. 如果你有很多圖片,需要讓外框里的圖像顯示在一行中,這樣可以左右切換(當然你可以設置為上下切換,會更方便,這裡左右切換隻是作為需要的參考)。你可以試著使用 'other way',我不知道如何解釋 float 對整個盒子中內容的影響,你可以參考參考 MDN-float(當然,為什麼不刪除 float呢?只有 flex 可不能讓你的圖像顯示正常,參考參考 MDN-flexible)。
  5. 如果你的圖像有 src 可以不用設置背景,這裡只是由於替代 img 內容。

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 資料庫三大範式的學習與資料庫表設計的瞭解 內容簡單介紹 對於資料庫三大範式的理解以及一些設計表示要註意的方面 本章內容梳理圖 資料庫三大範式比較官方的定義 資料庫的三大範式(Normal Forms)是關係資料庫設計中用於確保數據結構化、減少數據冗餘、並提高數據完整性的指導和規則。 以下是三大範式的 ...
  • 1.背景概述 最近在做數據同步測試,需要通過DTS將kafka中的數據同步到資料庫中,4G的數據量同步到資料庫用了大約4個多小時,這看起來並不合理;此時查看資料庫所在主機的CPU,IO的使用率都不高,沒有瓶頸;最後通過排查發現由於kafka,DTS,資料庫不再同一個機房,網路延遲較大,導致同步速率緩 ...
  • 目錄一、什麼是多實例二、MySQL多實例配置1、創建數據目錄2、創建配置文件3、編輯330{7..9}的配置文件4、初始化330{7..9}數據5、修改目錄許可權6、啟動多實例7、查看server_id8、進入單獨的MySQL實例9、關閉實例 一、什麼是多實例 Mysql多實例就是在一臺伺服器上同時開 ...
  • 升級背景 因項目需要使用數據質量模塊功能,可以為數倉提供良好的數據質量監控功能。故要對已有2.0版本升級到3.0版本以上,此次選擇測試了3.0.1 和 3.1.1 兩個版本,對進行同數據等任務調度暫停等操作測試,最後選擇3.0.1 版本 原因: 1. 3.1.1 在測試sql任務時 ,同時啟動上百s ...
  • 這些年大家都在談分散式資料庫,各大企業也紛紛開始做資料庫的分散式改造。那麼,所謂的分散式資料庫到底是什麼?採用什麼架構?優勢在哪?為什麼越來越多企業選擇它?分散式資料庫技術會向什麼方向發展?帶著這些疑問,一探究竟吧!參與文末的話題互動,更有機會贏取精美獎品~ 分散式資料庫的架構演進 隨著數據量的爆發 ...
  • 一、mediaquery 1.概述 媒體查詢(mediaquery)它允許根據設備的不同特性(如屏幕大小、屏幕方向、解析度、顏色深度等)來動態地調整網頁的樣式和佈局。 通過媒體查詢,可以為不同的設備定義不同的樣式規則,以適應不同的屏幕大小和解析度。這樣就可以實現響應式設計,使頁面在不同設備上 ...
  • 本文腳本修改自github上的一個腳本。 環境為Mac OS-Arm版 1. 創建一個目錄 mkdir magisk-sh 2. 下載Magisk apk 可以去github上下載,鏈接:https://github.com/topjohnwu/Magisk/releases 本文采用v26.1版本 ...
  • 一、GridRow/GridCol 1.概述 柵格佈局是一種通用的輔助定位工具,可以幫助開發人員解決多尺寸多設備的動態佈局問題。通過將頁面劃分為等寬的列數和行數,柵格佈局提供了可循的規律性結構,方便開發人員對頁面元素進行定位和排版。 此外,柵格佈局還提供了一種統一的定位標註,幫助保證不同設備 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...