CSS3怎么做出关门开门效果

php中世界最好的语言
Lepaskan: 2017-11-24 10:42:03
asal
3436 orang telah melayarinya

今天给大家带来一段实例代码,怎么用CSS3做出关门开门的效果,需要用到的属性有border-width,  border-style等,我们一起来看一下。

border-width:边框的宽度    thin 细的 

                               medium 默认的

                               thick 粗的

                              不常用

                      数值px

  border-style:none 没有边框 = hidden(用于表格除外,用来解决表格边框冲突)

                   solid 实线型

                   dotted 点状

                   dashed 虚线

                   double 双线

                  

  border-color:十六进制 #fff  transparent 透明

  border: 1px solid #000;

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

        border-top-width

         border-top-style

         border-top-color

  border-right:

  border-bottom:

  border-left:

css3新增的属性

border-image:  使用图片来填充边框

         border-image-source:图片的来源,路径

         border-image-slice:图片的分割方式

         border-image-width:图片的宽度

        border-image-outset:图片扩展

         border-image-repeat:图片重复

效果实现代码:

<!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>
Salin selepas log masuk

效果代码就是上面这些了,感兴趣的朋友可以手动操作一下,更多精彩请关注php中文网其它相关文章!

相关阅读:

HTML里怎么使用margin 0 auto

html里div居中需要注意哪些

html里的if注释怎么使用

Atas ialah kandungan terperinci CSS3怎么做出关门开门效果. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!