首頁 > web前端 > css教學 > 主體

CSS3怎麼做關門效果

php中世界最好的语言
發布: 2017-11-24 10:42:03
原創
3457 人瀏覽過

今天帶給大家一段實例程式碼,怎麼用CSS3做出關門開門的效果,需要用到的屬性有border-width,  border-style等,我們一起來看一下。

border-width:邊框的寬度    thin 細的 

                               medium 默認的

                               thick 粗的

                              不常用

                      數值px

  border-style:none 沒有邊框 = hidden(用於表格除外,用來解決表格邊框衝突)

                   dotted 點狀

                   dashed 虛線

                  

 

border-color

:十六進位 #fff  transparent 透明

# border: 1px solid #000;

##  border-top: 1px solid #000;上邊框    

       ##         border-top-color

  border-right:

  border-bottom:

  border-left:

css3新增的屬性border-image:  使用圖片填滿邊框

         border-image-source:圖片的來源,路徑       ##         border-image-width:圖片的寬度

        border-image-outset:圖片擴充    ##

<!DOCTYPE html>
<html>
         <head>
                   <meta charset="UTF-8">
                   <title></title>
                   <style type="text/css">
                            *{padding: 0;margin: 0;}
                            #box{
                                     width: 300px;
                                     height: 400px;
                                     background: url(img/05.jpg);
                                     background-size:cover;
                                     margin: 150px auto;
                                     position: relative;
                                     overflow: hidden;
                            }
                            .left{width: 100%;
                                     height: 100%;
                                     background: rgba(122,0,0,0.5);
                                     position: absolute;
                                     top: 0;
                                     left: -100%;
                                    
                                     transition: all 2s;
                                    
                            }
                            .right{
                                     width: 100%;
                                     height: 100%;
                                     background: rgba(0,0,135,0.5);
                                     position: absolute;
                                     top: 0;
                                     left: 100%;
                                     transition: all 4s;
                            }
                            #box:hover .left{
                                     left:-50%
                            }
                            #box:hover .right{
                                     left:50%
                            }
                   </style>
         </head>
         <body>
                   <div id="box">
                            <div></div>
                            <div></div>
                   </div>
         </body>
</html>
登入後複製

效果程式碼就是上面這些了,有興趣的朋友可以手動操作一下,更多精彩請關注php中文網其它相關文章! ######相關閱讀:#########HTML裡怎麼使用margin 0 auto############html裡div居中需要注意哪些###### ######html裡的if註解怎麼使用######

以上是CSS3怎麼做關門效果的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板