How to create the effect of closing the door and opening the door in CSS3-CSS Tutorial-php.cn

How to create the effect of closing the door and opening the door in CSS3

php中世界最好的语言

Release： 2017-11-24 10:42:03

Original

3506 people have browsed it

Today I will bring you a piece of example code. How to use CSS3 to create the effect of closing the door and opening the door. The attributes needed are border-width, border-style, etc., we Let’s take a look.

border-width: The width of the border thin

medium Default

Not commonly used

border-style:none No border = hidden (except for tables, used to resolve table border conflicts)

solid solid line style

dotted dotted

dashed dashed dashed line

double double line

border-color

:hex #fff transparent transparent

border: 1px solid #000; border-top: 1px solid #000;top border

border-top-width

border-top-style

border-top-color

border-right:

border-bottom:

border-left:

css3 new attributes

border-image: Use pictures to fill the border

Border-image-source: The source of the image, path

Border-image-slice: How to divide the picture

border-image-width: The width of the picture

border-image-outset: Image extension

border-image-repeat: Image repetition

Effect implementation code:

<!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>

Copy after login

The effect codes are the above. Friends who are interested can do it manually. For more exciting information, please pay attention to other related articles on the php Chinese website!