a:link{
    color:orange;
}
a:visited{
    color:rgba(245, 105, 189, 0.884);
}
a:hover{
    color:aqua;
}

.floatright {
    animation: myAnimation 3s ease-in-out 1s infinite alternate forwards; /*轉場*/
     
    position: absolute;
    top: 15%;
    left: 50%;
    border-top:5px solid rgba(232, 216, 155, 0.747);
    border-bottom:5px solid green;
    border-left:5px dashed #000;
    border-right:5px dashed #000;
    filter: drop-shadow(20px 15px 5px #5050ca); /*加陰影*/

  }
  @keyframes myAnimation { /*轉場*/
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(3);
        background-color: red;
    }
    
}
.floatright2 {
    animation: myAnimation 3s ease-in-out 1s infinite alternate forwards; /*轉場*/
     
    position: absolute;
    
    border-top:5px solid rgba(232, 216, 155, 0.747);
    border-bottom:5px solid green;
    border-left:5px dashed #000;
    border-right:5px dashed #000;
    filter: drop-shadow(20px 15px 5px #5050ca); /*加陰影*/

  }

#floatright3 {
    animation: myAnimation 3s ease-in-out 1s infinite alternate forwards; /*轉場*/
     
   
    
    border-top:5px solid rgba(232, 216, 155, 0.747);
    border-bottom:5px solid green;
    border-left:5px dashed #000;
    border-right:5px dashed #000;
    filter: drop-shadow(20px 15px 5px #5050ca); /*加陰影*/

  }
  #floatright4 {
    animation: myAnimation 3s ease-in-out 1s infinite alternate forwards; /*轉場*/
    margin-left: auto; /*放最右邊*/
    display: block;
   
    
    border-top:5px solid rgba(232, 216, 155, 0.747);
    border-bottom:5px solid green;
    border-left:5px dashed #000;
    border-right:5px dashed #000;
    filter: drop-shadow(20px 15px 5px #5050ca); /*加陰影*/

  }

  .floatright01 {
    margin-left: auto; /*放最右邊*/
    display: block;
    
    border-top:5px solid rgba(232, 216, 155, 0.747);
    border-bottom:5px solid green;
    border-left:5px dashed #000;
    border-right:5px dashed #000;
    animation: rotation 2s infinite linear;
  
  }


.floatright1 {
   
  
    
    border-top:5px solid rgba(232, 216, 155, 0.747);
    border-bottom:5px solid green;
    border-left:5px dashed #000;
    border-right:5px dashed #000;
    animation: rotation 2s infinite linear;
  
  }
  @keyframes rotation {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(359deg);
    }
}
.img1{
    border-top:5px solid rgba(232, 216, 155, 0.747);
    border-bottom:5px solid green;
    border-left:5px dashed #000;
    border-right:5px dashed #000;
    filter: drop-shadow(20px 15px 5px #5050ca); /*加陰影*/
    background-color: #30be20;
    animation: tr  1s infinite linear ;

    
}
@keyframes tr {
    from {
        transform:translateY(0px);
    }
    to {
        transform:translateY(100px);
    }
}
.coverflow{
    width: 400px;
    height: 300px;
    position: relative;
    float:left;
}
.coverflow>a{
    float:left;
    display: block;
    position: absolute;
    top:0;
    left:0;
    opacity: 0;
filter: alpha(opacity=0);
/*當圖片數量增加，影片長度需更改，變為5s圖片數量*/
-webkit-animation: silder 15s linear infinite;
                animation: silder 15s linear infinite;
}
.coverflow>a>img{
    max-width: 100%;
}


/*動畫關鍵影格*/
@-webkit-keyframes silder {
    3% {
        opacity: 1;
        filter: alpha(opacity=100);
    }
    27% {
        opacity: 1;
        filter: alpha(opacity=100);
    }
    30% {
        opacity: 0;
        filter: alpha(opacity=0);
    }
}
@keyframes silder {
    3% {
        opacity: 1;
        filter: alpha(opacity=100);
    }
    27% {
        opacity: 1;
        filter: alpha(opacity=100);
    }
    30% {
        opacity: 0;
        filter: alpha(opacity=0);
    }
}



/*每個圖片各延遲5秒*/
.coverflow>a:nth-child(3) {
    -webkit-animation-delay: 10s;
            animation-delay: 10s;

}
.button1{
    width:100px;
    height:1.5em;
    color: #cfc9ce;
    background-color:#000000;
    text-decoration: none;
    padding: 10px 20px;
    margin:20px 0;
    text-align:center;
    border-radius: 48px;
    font-weight: bold;
  }