Jquery 方框阴影效果不适用于幻灯片放映
我有一个非常简单的滑块,我正在尝试为幻灯片中的所有图像在这个链接上实现#5。我运气不太好!我根本找不到任何东西出现。提前谢谢你的帮助 幻灯片css:Jquery 方框阴影效果不适用于幻灯片放映,jquery,css,html,slider,slideshow,Jquery,Css,Html,Slider,Slideshow,我有一个非常简单的滑块,我正在尝试为幻灯片中的所有图像在这个链接上实现#5。我运气不太好!我根本找不到任何东西出现。提前谢谢你的帮助 幻灯片css: .blueberry { margin: 0 auto; padding-bottom:25px; width:auto;} .blueberry .slides { display: block; position: relative; overflow: hidden; } .blueberry .slides li
.blueberry { margin: 0 auto; padding-bottom:25px; width:auto;}
.blueberry .slides {
display: block;
position: relative;
overflow: hidden;
}
.blueberry .slides li {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
}
.blueberry .slides li img {
display: block;
width: 100%;
max-width: none;
}
.blueberry .slides li.active { display: block; position: relative; }
.blueberry .crop li img { width: auto; }
.blueberry .pager {
height: 40px;
text-align: center;
}
.blueberry .pager li { display: inline-block; }
.blueberry .pager li a,
.blueberry .pager li a span {
display: block;
height: 4px;
width: 4px;
}
.blueberry .pager li a {
padding: 18px 8px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
-o-border-radius: 6px;
-ms-border-radius: 6px;
-khtml-border-radius: 6px;
border-radius: 6px;
}
.blueberry .pager li a span {
overflow: hidden;
background: #c0c0c0;
text-indent: -9999px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-o-border-radius: 2px;
-ms-border-radius: 2px;
-khtml-border-radius: 2px;
border-radius: 2px;
}
.blueberry .pager li.active a span {
background: #404040;
}
.shadow:before, .shadow:after
{
z-index: -1;
position: absolute;
content: "";
bottom: 25px;
left: -25px;
width: 50%;
top: 80%;
max-width:400px;
background: #777;
-webkit-box-shadow: 0 35px 20px #777;
-moz-box-shadow: 0 35px 20px #777;
box-shadow: 0 35px 20px #777;
-webkit-transform: rotate(-8deg);
-moz-transform: rotate(-8deg);
-o-transform: rotate(-8deg);
-ms-transform: rotate(-8deg);
transform: rotate(-8deg);
}
.shadow:after {
-webkit-transform: rotate(8deg);
-moz-transform: rotate(8deg);
-o-transform: rotate(8deg);
-ms-transform: rotate(8deg);
transform: rotate(8deg);
right: 10px;
left: auto;
}
HTML:
您需要将类“active”应用于某个li以查看任何内容。然后返回该站点,查看阴影效果的before/after代码。它现在不在CSS中的任何地方
好的,酷。看看Wolf的JSFIDLE,注意阴影应用于h3,而不是图像或li本身。如果你真的把它应用到李身上,你会得到一些非常古怪的东西。试试这个
在这里,我修改了类框的CSS
.box {
width:70%;
height:200px;
background:#FFF;
margin:40px auto;
background-image:url('http://unleashthefanboy.s3.amazonaws.com/wp-content/uploads/2012/05/MARK2.jpg');
background-color:#cccccc;
background-size:100%;
}
我将阴影直接应用于蓝莓类,效果很好。谢谢我试着把它应用到li和img上。我没有足够的声望去投票给你,否则我会的。
.box {
width:70%;
height:200px;
background:#FFF;
margin:40px auto;
background-image:url('http://unleashthefanboy.s3.amazonaws.com/wp-content/uploads/2012/05/MARK2.jpg');
background-color:#cccccc;
background-size:100%;
}