CSS3怎么做出关门开门效果
- php中世界最好的语言原创
- 2017-11-24 10:42:033486浏览
今天给大家带来一段实例代码，怎么用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>效果代码就是上面这些了，感兴趣的朋友可以手动操作一下，更多精彩请关注php中文网其它相关文章！
相关阅读：
以上是CSS3怎么做出关门开门效果的详细内容。更多信息请关注PHP中文网其他相关文章！