CSS3怎么做出關門開門效果

來源：懂視網責編：小采時間：2020-11-27 18:49:48

CSS3怎么做出關門開門效果

CSS3怎么做出關門開門效果:今天給大家帶來一段實例代碼，怎么用CSS3做出關門開門的效果，需要用到的屬性有border-width， border-style等，我們一起來看一下。border-width：邊框的寬度 thin 細的 medium 默認的 thick 粗的不常用數值px border-style:none

推薦度：

點擊下載本文 文檔為doc格式

導讀CSS3怎么做出關門開門效果:今天給大家帶來一段實例代碼，怎么用CSS3做出關門開門的效果，需要用到的屬性有border-width， border-style等，我們一起來看一下。border-width：邊框的寬度 thin 細的 medium 默認的 thick 粗的不常用數值px border-style:none

今天給大家帶來一段實例代碼，怎么用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>

效果代碼就是上面這些了，感興趣的朋友可以手動操作一下，更多精彩請關注Gxl網其它相關文章！

CSS3怎么做出關門開門效果

推薦度：

點擊下載本文 文檔為doc格式

標簽：制作效果開門

熱門焦點

国产99久久精品_欧美日本韩国一区二区_激情小说综合网_欧美一级二级视频_午夜av电影_日本久久精品视频

CSS3怎么做出關門開門效果

CSS3怎么做出關門開門效果

CSS3怎么做出關門開門效果

最新推薦

猜你喜歡

熱門推薦