请教一下各位大神老师，照着写的代码，但是显示的和视频里面的不一样啊
cutecat1234567890_
2017-03-19 16:07
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>css3+js实现散列画廊特效</title> <style type="text/css"> *{padding: 0;margin: 0;} //所有标签都会遵从这个样式 body{ background-color: #fff; color:#555; font-family: 'Avenir Next','Lantinghei SC'; font-size: 14px; -webkit-font-smoothing: antialiased; //字体平滑 } .wrap{ width:100%; height :600px; position: absolute; top:50%; margin-top: -300px; background-color:#333 ; overflow: hidden; } //海报样式 .photo{ width:260px; height: 320px; position:absolute; z-index: 1; box-shadow: 0 0 1px rgda(0,0,0,.01); } .photo.side{ width: 100%; height:100%; background-color: #eee; position:absolute; top:0; right:0; padding:20px; box-sizing: border-box; } .photo.side-front{} .photo.side-front.image{ width :100px; height: 250px; line-height: 250px; overflow:hidden; } .photo.side-front.image img{ width: 100%; } .photo.side-front.caption{ text-align: center; font-size: 16px; line-height: 50px; } .photo.side-back{} .photo.side-back.de1{ color: #666; font-size: 14px; line-height: 1.5em; } //当前选中的海报样式 .photo-center{ left:50px; top:50px; margin-top: -160px 0 0 -130px; z-index: 999; } </style> </head> <body onselectstart="return false;"> <div class="wrap"> <div class="photo"> <div class="side side-front"> <p class="image"><img src="图片/2.jpeg" ></p> <p class="caption">2</p> </div> <div class="side side-back"></div> <p class="desc">描述的文字</p> </div> </div> </body></html>
3回答
-
- cutecat1234567890_
- 2017-03-30 21:43:54
最后图片还是没出来，请问这要怎么解决呢 -
- 慕粉1248579142
- 2017-03-28 18:23:10
这问题我也遇到了估计，和浏览器有关
-
- caicai31
- 2017-03-25 14:06:51
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>css3+js实现散列画廊特效</title>
<style>
*{
padding: 0;
margin: 0;
}
body{
background-color: #fff;
color: #555;
font-family: "Avenir Next", "Lantinghei SC";
font-size: 14px;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
}
.wrap{
width: 100%;
height: 600px;
position: absolute;
top: 50%;
margin-top: -300px;
background-color: #333;
overflow: hidden;
-webkit-perspective: 800px;
-moz-perspective: 800px;
}
/*海报样式*/
.photo{
width: 260px;
height: 320px;
position: absolute;
z-index: 1;
box-shadow: 0 0 1px rgba(0,0,0,.01);
-webkit-transition: all .6s;
}
.photo .side{
width: 100%;
height: 100%;
background-color: #eee;
position: absolute;
top: 0;
right: 0;
padding: 20px;
box-sizing: border-box;
}
.photo .side-front{}
.photo .side-front .image{
width: 100%;
height: 250px;
line-height: 250px;
overflow: hidden;
}
.photo .side-front .image img{
width: 100%;
}
.photo .side-front .caption{
text-align: center;
font-size: 16px;
line-height: 50px;
}
.photo .side-back{}
.photo .side-back .desc{
color: #666;
font-size: 14px;
line-height: 1.5em;
}
/*当前选中的海报样式*/
.photo_center{
left: 50%;
right: 50%;
margin: 160px 0 0 -130px;
z-index: 999;
}
/*负责翻转*/
.photo-wrap{
position: absolute;
width: 100%;
height: 100%;
-webkit-transform-style: preserve-3d;
-webkit-transition: all .6s;
}
.photo-wrap .side-front{
-webkit-transform: rotateY(0deg);
}
.photo-wrap .side-back{
-webkit-transform: rotateY(180deg);
}
.photo-wrap .side{
-webkit-backface-visibility: hidden;
}
.photo_front .photo-wrap{
-webkit-transform: rotateY(0deg);
}
.photo_back .photo-wrap{
-webkit-transform: rotateY(180deg);
}
/* 控制按钮的样式 */
.nav{
width: 80%;
height: 30px;
line-height: 30px;
position: absolute;
left: 10%;
bottom: 20px;
z-index: 999;
background-color: #fff;
text-align: center;
}
/*控制按钮的样式*/
@font-face{
font-family: 'icons';
src: url('turn-arrow.woff') format('woff');
font-weight: normal;
font-size: normal;
}
/*普通样式*/
.nav .i{
width: 30px;
height: 30px;
display: inline-block;
cursor: pointer;
background-color: #aaa;
text-align: center;
border-radius: 50%;
-webkit-transform: scale(.48);
-webkit-transition: all .5s;
}
.nav .i:after{
content: "\e600";
font-family: 'icons';
font-size: 80%;
display: inline-block;
line-height: 30px;
text-align: center;
color: #fff;
opacity: 0;
}
/*选中样式*/
.nav .i_current{
-webkit-transform: scale(1);
}
.nav .i_current:after{
opacity: 1;
}
/*背面样式*/
.nav .i_back{
-webkit-transform: rotateY(-180deg);
background-color: #555;
}
/* 优化样式 */
.photo{
left: 50%;
top: 50%;
margin: -160px 0 0 -130px;
}
.photo-wrap{
-webkit-transform-origin: 0% 50%;
}
.photo_front .photo-wrap{
-webkit-transform: translate(0px, 0px) rotateY(0deg);
}
.photo_back .photo-wrap{
-webkit-transform: translate(260px, 0px) rotateY(180deg);
}
</style>
</head>
<body onselectstart="return false;">
<div class="wrap">
<div class="photo-wrap">
<div class="photo photo_front">
<div class="side side-front">
<p class="image"><img src="img/2.jpg" /></p>
<p class="caption">2</p>
</div>
<div class="side side-back">
<p class="desc">描述的文字</p>
</div>
</div>
</div>
</div>
</body>
</html>
CSS3+JS 实现超炫的散列画廊特效
46091 学习 · 215 问题
相似问题