宝丽图片廊仅适用于CSS

这里是一个JS-拨弄可用图像：http://jsfiddle.net/TBwWw/

我使用的教程，我发现here。

我有一个无序列表，只是将图像链接到一个较大的图像，并在页面上显示图像。

<ul class="polaroids"> 
    <li> 
     <a href="http://www.flickr.com/photos/zurbinc/3971679981/" title="Roeland!"> 
     <img src="example/cyan_hawk.jpg" alt="Roeland!"> 
     </a> 
    </li> 
</ul>

然后css应该是调整图像大小，增加了宝丽来效果和更多。

ul.polaroids a:after { 
content: attr(title); 
} 

/* By default, we tilt all our images -2 degrees */ 
ul.polaroids a { 
    -webkit-transform: rotate(-2deg); 
    -o-transform: rotate(-2deg); 
    -ms-transform: rotate(-2deg); 
    -moz-transform: rotate(-2deg); 
    transform: rotate(-2deg); 
} 

/* Rotate all even images 2 degrees */ 
ul.polaroids li:nth-child(even) a { 
    -webkit-transform: rotate(2deg); 
    -o-transform: rotate(2deg); 
    -ms-transform: rotate(2deg); 
    -moz-transform: rotate(2deg); 
    transform: rotate(2deg); 
} 
/* Don't rotate every third image, but offset its position */ 
ul.polaroids li:nth-child(3n) a { 
    -webkit-transform: none; 
    -o-transform: none; 
    -ms-transform: none; 
    -moz-transform: none; 
    transform: none; 
    position: relative; 
    top: -5px; 
} 

/* Rotate every fifth image by 5 degrees and offset it */ 
ul.polaroids li:nth-child(5n) a { 
    -webkit-transform: rotate(5deg); 
    -o-transform: rotate(5deg); 
    -ms-transform: rotate(5deg); 
    -moz-transform: rotate(5deg); 
    transform: rotate(5deg); 
    position: relative; 
    right: 5px; 
} 

/* Keep default rotate for every eighth, but offset it */ 
ul.polaroids li:nth-child(8n) a { 
    position: relative; 
    top: 8px; 
    right: 5px; 
} 

/* Keep default rotate for every eleventh, but offset it */ 
ul.polaroids li:nth-child(11n) a { 
    position: relative; 
    top: 3px; 
    left: -5px; 
} 

/* Scale the images on hover, add transitions for smoothing things out, and ensure the hover appears on top */ 
ul.polaroids a:hover { 
    -webkit-transform: scale(1.25); 
    -ms-transform: scale(1.25); 
    -o-transform: scale(1.25); 
    -moz-transform: scale(1.25); 
    transform: scale(1.25); 
    position: relative; 
    z-index: 5; 
} 

/* Add drop shadows and smooth out the transition (Safari only) */ 
ul.polaroids a { 
    -webkit-transition: 0 .15s linear; 
    -moz-transition: 0 .15s linear; 
    -o-transition: 0 .15s linear; 
    -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25); 
    -moz-box-shadow: 0 3px 6px rgba(0,0,0,.25); 
    box-shadow: 0 3px 6px rgba(0,0,0,.25); 
} 

/* On hover, darken the shadows a bit */ 
ul.polaroids a { 
    -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5); 
    -moz-box-shadow: 0 3px 6px rgba(0,0,0,.5); 
    box-shadow: 0 3px 6px rgba(0,0,0,.5); 
}

最终的结果应该是：

enter image description here

但他们只是刚刚无序列表文饰的出现和标题后的效果，像这样：

enter image description here

在本教程的评论中的其他人都表示它工作得很好。我不明白为什么它不适合我。我确实有一个外部样式表中的css链接并正确找到。最后，Google Chrome控制台不显示任何错误。我曾在Google Chrome和Internet Explorer中尝试过。

来源

2013-08-07 user2371301

jsfiddle拜托！ – user1477388

甚至没有我的想法做出一个。 Jsfiddle过来！ – user2371301

因为原始代码有本地路径，所以这里有不同的图像。同样的标记和CSS虽然... http://jsfiddle.net/DrydenLong/jC84f/ –

试试这个：

http://jsfiddle.net/jC84f/1/

ul.polaroids { width: 970px; margin: 0 0 18px -30px; } 
ul.polaroids li { display: inline; } 
ul.polaroids a { background: #fff; display: inline; float: left; margin: 0 0 27px 30px; width: auto; padding: 10px 10px 15px; text-align: center; font-family: "Marker Felt", sans-serif; text-decoration: none; color: #333; font-size: 18px; -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25); -moz-box-shadow: 0 3px 6px rgba(0,0,0,.25); -webkit-transform: rotate(-2deg); -webkit-transition: -webkit-transform .15s linear; -moz-transform: rotate(-2deg); } 
ul.polaroids img { display: block; width: 190px; margin-bottom: 12px; } 
ul.polaroids a:after { content: attr(title); } 

ul.polaroids li:nth-child(even) a { -webkit-transform: rotate(2deg); -moz-transform: rotate(2deg); } 
ul.polaroids li:nth-child(3n) a { -webkit-transform: none; position: relative; top: -5px; -moz-transform: none; } 
ul.polaroids li:nth-child(5n) a { -webkit-transform: rotate(5deg); position: relative; right: 5px; -moz-transform: rotate(5deg); } 
ul.polaroids li:nth-child(8n) a { position: relative; right: 5px; top: 8px; } 
ul.polaroids li:nth-child(11n) a { position: relative; left: -5px; top: 3px; } 

ul.polaroids li.messy a { margin-top: -375px; margin-left: 160px; -webkit-transform: rotate(-5deg); -moz-transform: rotate(-5deg); } 

ul.polaroids li a:hover { -webkit-transform: scale(1.25); -moz-transform: scale(1.25); -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5); -moz-box-shadow: 0 3px 6px rgba(0,0,0,.5); position: relative; z-index: 5; } 

code { background: rgba(0,0,0,.5); padding: 2px 3px; color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.75); -webkit-border-radius: 3px; -moz-border-radius: 3px; } 

ol.code { background: rgba(0,0,0,.75); margin-bottom: 18px; border: solid rgba(0,0,0,.75); border-width: 1px 1px 0; -webkit-border-radius: 3px; -moz-border-radius: 3px; -webkit-box-shadow: 0 1px 1px rgba(255,255,255,.5); } 
ol.code li, ol.code li code { font-size: 14px !important; } 
ol.code code { background: none; }

来源

2013-08-07 18:50:23 user1477388

从字面上看，我所做的只是使用Google的Inspect Element查看他们使用的代码。我不知道他们为什么没有在他们的文章中发布正确的代码，但这是在演示页面上的代码http://zurb.com/playground/css3-polaroids – user1477388

我试过使用：http： //www.dirtymarkup.com/发布之前，它让我添加了相当多的代码。（我发布的代码是在与他们更改后）但仍然没有改变，假设我应该使用Google的代替！不知道他们有一个。 – user2371301

@ user2371301在Chrome中，只需右键单击该元素（在本例中为'li'），它将拉起控制台中的元素选项卡。然后，你可以看到它使用的是什么风格。 – user1477388

首先，所有的图像都应该是单一ul，而不是单独的，你在你的提琴有。其次，您错过了列表样式，并且要使属性换行，请使用display/float属性。

我能得到你的例子中加入以下CSS来包装：

ul { list-style: none; } 
ul li { display: inline; } 
ul a { 
    display: inline; 
    float: left; 
} 
ul img { display: block; }

我认为这基本上是你错过了什么，所以你可能会想的东西调整到你怎么样（包括间距，班级等）。这里是我的小提琴：http://jsfiddle.net/jC84f/3/

来源

2013-08-07 19:03:20 SlightlyCuban

宝丽图片廊仅适用于CSS

回答

相关问题