|
马上注册,结交更多好友,享用更多功能^_^
您需要 登录 才可以下载或查看,没有账号?立即注册
x
效果图:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="Keyword" content="css3阴影">
- <meta name="Description" content="盒子练习复习">
- <title>拉帘小案例(盒子模型练习)</title>
- <style type="text/css">
- body{
- margin: 0;
- padding: 0;
- background-color:black;
- }
- .wrap{
- width: 800px;
- height: 444px;
- margin: 100px auto;/*上下100px 左右居中*/
- }
- .content{
- position: relative;
- width: 222px;/*盒模型计算:width+padding*2+border*2*/
- height: 222px;
- float: left;/*浮动*/
- background-color: black;
- border-radius: 50% ;
- transition: .4s;
- margin: 15px;
- }
- .content:hover{
- transform: scale(1.2);
- }
- .hide{
- position: absolute;
- left: 0;
- top: 0;
- width: 100%;
- height: 100%;/*继承父级*/
- border-radius: 50%;
- background: rgba(0,0,0,0.5);
- transition: .4s;
- }
- .content:hover .hide{
- height: 0;
- }
- .content1:hover .hide{
- top: 50%;/*hide下移50%*/
- }
- .imgs{
- width: 200px;
- height: 200px;
- padding: 10px;
- border-radius: 50%;
- border: 1px solid #FFFFFF;/*边框*/
- }
- </style>
- </head>
- <body>
- <div class="wrap">
- <div class="content">
- <div class="hide"></div>
- <img class="imgs" src="1.jpg" >
- </div>
- <div class="content content1">
- <div class="hide"></div>
- <img class="imgs" src="2.jpg" >
- </div>
- <div class="content">
- <div class="hide"></div>
- <img class="imgs" src="3.jpg" >
- </div>
- <div class="content content1">
- <div class="hide"></div>
- <img class="imgs" src="4.jpg" >
- </div>
- <div class="content ">
- <div class="hide"></div>
- <img class="imgs" src="5.jpg" >
- </div>
- <div class="content content1">
- <div class="hide"></div>
- <img class="imgs" src="6.jpg" >
- </div>
- </div>
- </body>
- </html>
复制代码
|
|