2. 程式人生 > >css3實現圖片平滑切換

css3實現圖片平滑切換

阿新 • • 發佈：2019-01-31

疑惑點透徹分析，側重點：hover實現圖片切換
css部分：

 <style>
        #div01{
            width:200px;
            height:200px;
            position: relative;
        }
        img{
            width:200px;
            height:200px;
            border:1px solid aqua;
            transition:all 1s ease-in-out;
            /*這裡的transition屬性要放在img元素內，這樣兩張圖片來回切換才會過渡的比較平滑*/
 

        }
        .img01-top{
            position: absolute;
            opacity: 0;
            -webkit-transform: scale(0,0);
            -moz-transform: scale(0,0);
            -ms-transform: scale(0,0);
            -o-transform: scale(0,0);
            transform: scale(0,0);
        }


     /*我之前一直沒有搞懂，我要觸發的是圖片，為什麼直接用.img01-top:hover就達不到我想要的效果呢，後來想明白了，在這裡我就詳細的解釋一下*/
 

     /*（這裡的.div01:hover .img01-top=.div01_hover.img01-top 後者主要是主要是相容IE瀏覽器的）
        我們需要的做的是讓.img02-bottom圖片消失的同時.img01-top圖片顯示，
        然而.img02-bottom圖片消失後.img01-top圖片還是消失的狀態（因為它的opacity:0;transform: scale(0,0);只有觸發它才能顯示），（因為圖片放置的層疊順序我們只能觸發到.img02-bottom，也就是.img02-bottom的圖片是可見的）所以無法給其新增.img01-top:hover，
        所以這裡要用.div01:hover .img01-top，因為div是永遠存在，不會消失的，先觸發div01 再觸發.img01-top，這就是為什麼我們平時所見到span，div元素外面還要再套一層div，只是作為一個容器，方便於新增你想完成的觸發事件或樣式等*/
 


        .div01:hover .img01-top , .div01_hover .img01-top{       
             opacity:1;
             transform: scale(1,1);
             transform-origin: right top;
         }
        .div01:hover .img02-bottom , .div01_hover .img02-bottom{
            opacity:0;
            transform: scale(0,0);
            transform-origin:left bottom ;
        }
    </style>

body部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3實現圖片平滑轉換</title>
</head>
<body>
<div id="div01" class="div01">
    <img  class="img01-top" src="sweety.jpg" alt="sweety">
    <img  class="img02-bottom" src="honey.jpg" alt="honey">
</div>
</body>
</html>

相關推薦

css3實現圖片平滑切換

疑惑點透徹分析，側重點：hover實現圖片切換 css部分： <style> #div01{ width:200px;

純css3實現圖片自動切換

實現圖片自動切換需要用到的主要是css3裡面的過渡這一節的內容。 大致思路是這樣的： 1、將圖片設定為li的背景圖片； 2、規定一個@keyframes的規則使得圖片按照這個規則進行切換； 3、設定每

原生js+css3實現圖片自動切換，圖片輪播

運用CSS3transition及opacity屬性 製作圖片輪播動畫 自己這兩天根據用js來控制觸發CSS3中transition屬性，從而寫出來的以CSS3動畫為基礎，js控制過程的圖片輪播

利用CSS3實現圖片切換特效

利用label標籤和:checked，並使用到了transform和transition屬性。實現簡單，相比JS而言，非常方便，且效果更佳，有興趣可以拷貝程式碼，修改圖片路徑，執行看看效果。 <

使用javascript實現圖片上下切換效果並且實現順序循環播放

css3實現圖片木桶布局

wrap ado 設置 ctype adding selector 前端學習 i++ creat 思路： 1、容器flex布局2、圖片定高、超出換行3、圖片都設置 flex-grow: 1; 以充滿整行4、圖片都設置 object-fit: cover; 以解決圖片變形5、

css3實現圖片的變大變小

out transform head body inner mar orm add gin 主要是使用 css3的animation，scale等於1是原圖大小，大於1是把圖片放大，小於1 是把圖片縮小。animation-delay用來延遲5秒觸發這個動畫 <

CSS3 實現圖片倒影炫酷特效

-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(70%, transparent) , to(rgba(250

js實現圖片自動切換

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>圖片切換</title>     <sty

[程式碼] 使用css3實現圖片輪播

使用css3實現圖片輪播 前言：實現圖片輪播的方式有很多種 ，例如js ，css 等等。 本文主要講述使用純css3實現輪播圖 工具介紹： 使用的編輯器： Hbuilder 進入正題 htm

純css3實現圖片輪播

用css3的動畫可以實現圖片輪播 無非就是兩種型別： 　左右滾動型別，　漸變型別 １　左右滾動 定義一個大盒子 在一個小盒子裡面　裝３張圖片（這裡用３張圖片為例子） 三張圖片可以向左浮動，大盒子　overflow :hidden 小盒子增加css3

純CSS3實現圖片展示特效

Web瀏覽器端的特效越來越讓人興奮，通過CSS和JavaScript，各種意想不到的絢麗效果都能用簡單的幾句程式碼完成。本文中要實現的一個純CSS3的圖片展示特效，以前只能用JavaScript實現，可想而知會受到多方面的限制，特別是效能。而今天我們將用簡單的CSS3程式碼實現，你會發現它的動畫效果在現代

css3實現圖片3d翻轉效果

@charset: "utf-8"; * { margin: 0; padding: 0; box-sizing: border-box; } ul, ol { list-style: none; } img { border: none; } body {

CSS3&JavaScript 圖片分隔切換

這個切換效果在firebox上測試正常，但到了chrome上就沒有切換效果了。原因可能是它們在處理transition的流程上有差別，解決方案就是用animation來實現更精細的動畫。 （通常只有兩個狀態，這種簡單的情況適用transition比較方便；多個

【CSS3】 CSS3實現“圖片陰影”效果

學習前端有點類似於學習英語，很多東西需要一點點累積，下面講解CSS3實現圖片陰影效果。 1、效果展示:Shadow Effect這個塊有陰影的效果，尤其是底邊的曲線陰影非常明顯，本文主要以“Shadow Effect”這個塊進行講解曲線陰影的效果。 2、結構編寫：把大體

CSS3實現圖片翻轉效果

直接上程式碼看效果 html: <div class="father"> <div class="before">正面</div> <div cla

CSS3:實現圖片輪播

/** login頁面圖片切換 */ @-webkit-keyframes slide { 0% { background-image: url(../images/backgro

css3 實現圖片遮罩效果,hover出現文字

滑鼠hover 以後。圖片上面出現一個遮罩, 透明度變化，  顯示設定好的文字的文字，完全使用css 實現，下圖是效果 關鍵程式碼   .featured-image:hover { opacity: 0.9; color: #fff; background:

CSS3實現絢麗的圖片切換效果

css3 代碼 grid class 好看的圖片 ans jpg overflow hid 　　逛博客看到的一個很好看的圖片切換效果，用CSS3做的，自己也嘗試了一下。想法很巧妙，實現起來並不困難。將一個圖片分為了四個部分，通過絕對定位的方式使每個li中顯示圖片的一個部分，

CSS3實現鼠標經過圖片時圖片放大

oct jpg pro pre odi css code lin log 在鼠標經過圖片時，圖片被放大，而且還有個過渡的效果.... 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <l