b【李昊冉吧】_百度贴吧

03月10日漏签0天

李昊冉吧关注：12贴子：62

3回复贴，共1页

<返回李昊冉吧

b

只看楼主收藏回复

送TA礼物

IP属地:北京

1楼2018-05-03 00:08回复

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.aa{
width: 295px;
height: 270px;
border:1px solid green;
padding: 5px ;
border-radius: 5px;
}
.a {width: 295px;
height: 50px;
background-color: green; }
.b>div:nth-child(1) {width: 245px;height: 52px;background-color: orange;margin-top: 3px; }
.b>div:nth-child(2) {width: 245px;height: 52px;background-color: orange;margin-top: 3px; }
.b>div:nth-child(3) {width: 245px;height: 52px;background-color: orange;margin-top: 3px; }
.b>div:nth-child(4) {width: 45px;height: 163px;background-color: green;margin-top: -163px;margin-left: 250px; }
.c>div:nth-child(1){width: 95px;height: 52px;background-color: green;margin-top: 3px;margin-bottom: -50px;}
.c>div:nth-child(2){width: 95px;height: 52px;background-color: green;margin-left: 100px;}
.c>div:nth-child(3){width: 95px;height: 52px;background-color: green;margin-left: 200px;margin-top: -52px;}
</style>
</style>
</head>
<body>
<div class="aa">
<div class="a"></div>
<div class="b">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="c">
<div></div>
<div></div>
<div></div>
</div>
</div>
</body>
</html>

IP属地:北京

2楼2018-05-03 00:09

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title><style type="text/css">
.box{
transform-style: preserve-3d;
background: url(imgs/b20.jpg);
width: 500px;height: 350px;}
.box div:nth-of-type(1){
background: url(imgs/b21.png);width: 80px;height: 80px;
position: relative;margin-left: 50px;top: 50px;}
.box div:nth-of-type(2){
background: url(imgs/b22.png);width: 80px;height: 80px;
position: relative;margin-left: 200px;top: -30px;}
.box div:nth-of-type(3){
background: url(imgs/b23.png);width: 80px;height: 80px;
position: relative;margin-left: 340px;top: -110px;}
.box div:nth-of-type(4){
background: url(imgs/b24.png);width: 80px;height: 80px;
position: relative;margin-left: 130px;top: -30px;}
.box div:nth-of-type(5){
background: url(imgs/b25.png);width: 80px;height: 80px;
position: relative;margin-left: 280px;top: -110px;}
.box div:hover{transition:all 1s; -webkit-transform:scale(1.3) rotate(360deg);}
</style>
</head>
<body>
<div class="box">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>

IP属地:北京

3楼2018-05-03 00:09

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.stage{
margin: 20px auto;
perspective:1000px;
}
.container{
margin: 50px auto;
}
.container>div{
margin: 10px;
float: left;
transform-style: preserve-3d;
transform: rotateY(0deg) ;
transition:1s ;
}
.bk{
transform: rotateX(-90deg);
/*display: none;*/
position: absolute;
background:#333d4b;
opacity: 0.8;
width: 300px;
height: 300px;
top: 50px;
text-align: center;
line-height: 50px;
}
.container>div {
position: relative;
}
.container1{
transform: rotateX(0deg) translateZ(1em);
}
.container2 {
transform: rotateX(0deg) translateZ(1em);
}
.container3 {
transform: rotateX(0deg) translateZ(1em);
}
.container1:hover{
transform: rotateX(90deg) ;
}
.container2:hover{
transform: rotateX(90deg) ;
}
.container3:hover{
transform: rotateX(90deg) ;
}
</style>
</head>
<body>
<div class="stage">
<div class="container">
<div class="container1"><div><img src="imgs/b31.jpg"></div><div class="bk">aaaaaaaaaa</div></div>
<div class="container2"><div><img src="imgs/b32.jpg"></div><div class="bk">aaaaaaaaaa</div></div>
<div class="container3"><div><img src="imgs/b33.jpg"></div><div class="bk">aaaaaaaaaa</div></div>
</div>
</div>
</div>
</body>
</html>

IP属地:北京

4楼2018-05-03 00:10

扫二维码下载贴吧客户端

下载贴吧APP
看高清直播、视频！

贴吧热议榜

3回复贴，共1页

<返回李昊冉吧

发表回复

发贴请遵守贴吧协议及“七条底线”贴吧投诉

内容:

使用签名档查看全部

发表

保存至快速回贴

日	一	二	三	四	五	六

b

登录百度账号

扫二维码下载贴吧客户端