Home > Article > Web Front-end > How to create the effect of closing the door and opening the door in CSS3
How to create the effect of closing the door and opening the door in CSS3
- php中世界最好的语言Original
- 2017-11-24 10:42:033450browse
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>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!
Related reading:
How to use margin 0 autoWhat should you pay attention to when centering a div in HTML
How to use if comments in html
The above is the detailed content of How to create the effect of closing the door and opening the door in CSS3. For more information, please follow other related articles on the PHP Chinese website!