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

appleliushiqiD發表於2024-03-27
網頁HTMLCSS

網頁影像漸變的方法（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. 當設定了 flex 和 justify-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 內容。

相關文章