(2)Merry Christmas(桌機main)

三、圖說美化應用

section2: 應用1

.imgblock {
    width: 90%;
    border-radius: 20px 20px 0 0;
    box-shadow: 0px -1px  #000;
    
    position: relative;
    
    overflow: hidden;
    
}
.imgblock img{
    width: 100%;
}
.imgblock:before {
    content: '';  width: 200%; height: 100px;
    background-color: #b2dfdb;
/*    display: block;*/
        
    transform: rotate(-8deg) translateY(0);

    position: absolute;
    bottom: -80px;   left: -80%;   z-index: 1;

    
    box-shadow: 0 -1px 2px  #000;
    
    transition: transform .3s;    
}

figure:hover .imgblock:before{
    transform: rotate(-8deg) translateY(100%);
}

 

 

section2: 應用2

.imgchange {
    width: 100%;   height: 300px;
    
    position: relative;
}
.imgchange img{
    width: 100%; height: 100%;
    box-shadow: 0 0 5px #000;
    position: absolute; z-index: 1;
    left: 50%; transform: translateX(-50%);
    
    animation:imgAn 3.5s infinite alternate paused;
    animation-delay: 0s;                     /*設置動畫在啟動前的延遲間隔*/
    animation-direction: alternate;          /*是否迴圈交替反向播放動畫*/
    animation-play-state: paused;            /*動畫是否正在運行或已暫停*/
    animation-iteration-count: infinite;     /*定義動畫應該播放多少次*/
}
.imgchange:after{
    content: ''; 
    position: absolute;
    width: 100%;
    height: 100%;
    border:1px solid #666;
    
    animation: imgAn 2.6s infinite alternate paused;
    animation-delay: -1s;                    /*設置動畫在啟動前的延遲間隔*/
    animation-direction: alternate;          /*是否迴圈交替反向播放動畫*/
    animation-play-state: paused;            /*動畫是否正在運行或已暫停*/
    animation-iteration-count: infinite;     /*定義動畫應該播放多少次*/
}
figure:hover .imgchange img,
figure:hover .imgchange:after{
    animation-play-state: running;
}
@keyframes imgAn{
    0%   { border-radius: 40% 60% 40% 60% / 40% 40% 60% 60%; }
    20%  { border-radius: 35% 65% 65% 35% / 50% 64% 36% 50%; }
    40%  { border-radius: 50% 50% 65% 35% / 37% 60% 40% 63%; }
    60%  { border-radius: 60% 40% 63% 37% / 65% 55% 45% 35%; }
    80%  { border-radius: 40% 60% 44% 56% / 57% 35% 65% 43%; }
    100% { border-radius: 37% 63% 53% 47% / 65% 64% 36% 35%; }
}

參考連結:

animation:動畫集合

animation-delay :定義動畫什麼時候開始

animation-direction :定義是否迴圈交替反向播放動畫

animation–play-state:指定動畫是否正在運行或已暫停

animation-iteration-count:定義動畫應該播放次數

說明參考連結