为了账号安全，请及时绑定邮箱和手机立即绑定

课程

/前端开发

/HTML/CSS

/CSS3+JS 实现超炫的散列画廊特效

请教一下各位大神老师，照着写的代码，但是显示的和视频里面的不一样啊

<!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>58ce3c420001c5a410400780.jpg

cutecat1234567890_

2017-03-19

源自：CSS3+JS 实现超炫的散列画廊特效  2-3

关注问题 我要回答
1234
操作
收起

正在回答

3 回答

cutecat1234567890_ 提问者
2017-03-30


58dd0b6e0001883210400780.jpg最后图片还是没出来，请问这要怎么解决呢

0 回复 有任何疑惑可以回复我~
收起回答
慕粉1248579142
2017-03-28

这问题我也遇到了估计，和浏览器有关

0 回复 有任何疑惑可以回复我~
收起回答
caicai31
2017-03-25

<!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>


0 回复 有任何疑惑可以回复我~
收起回答
#1

cutecat1234567890_ 提问者

那个请问最后我这图片没出来要怎么解决呢
2017-03-30 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
CSS3+JS 实现超炫的散列画廊特效
  • 参与学习       46091    人
  • 解答问题       215    个

实现更自由的切换照片的画廊效果，打造超酷的切换动画

进入课程

本课相似问答

2 回答哪位大神来回答一下问题啊

3 回答为什么出不来 随机的效果啊，代码和老师的一样呢，，，，，

2 回答为什么我背面side-back的大小和side-front大小不一样啊？

3 回答审查元素时，和设定的大小不一样啊（老师的就一样）为什么呀

1 回答明明照着写的，但写出来的效果不知道啥东西，好晕呐
搜索更多本课相关问答

请教一下各位大神老师，照着写的代码，但是显示的和视频里面的不一样啊

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信