jquery和css3卡片列表轮播布局
简要教程
这是一款jquery和css3卡片列表轮播布局。该布局使用owl-carousel进行布局,通过css制作卡片样式,组成炫酷的卡片轮播特效。 使用方法在页面中引入下面的文件。
<link rel="stylesheet"type="text/css"href="css/bootstrap.min.css"/> <link rel="stylesheet"href="http://jrain.oscitas.netdna-cdn.com/tutorial/css/fontawesome-all.min.css"> <link rel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css"> <script src="js/jquery.min.js"type="text/javascript"</script> <script type="text/javascript"src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"</script>
HTML结构
<divclass="demo"> <divclass="container"> <divclass="row"> <divclass="col-md-12"> <divid="news-slider"class="owl-carousel"> <divclass="post-slide"> <divclass="post-img"> <ahref="#"><imgsrc="images/img-1.jpg"></a> </div> <divclass="post-content"> <h3class="post-title"><ahref="#">Latest News Post</a></h3> <pclass="post-description"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec elementum mauris. Praesent vehicula gravida dolor, ac efficitur sem sagittis. </p> <ulclass="post-bar"> <li><iclass="fa fa-calendar"></i> June 5, 2016</li> <li> <iclass="fa fa-folder"></i> <ahref="#">Mockup</a> <ahref="#">Graphics</a> <ahref="#">Flayers</a> </li> </ul> <ahref="#"class="read-more">read more</a> </div> </div> <divclass="post-slide"> <divclass="post-img"> <ahref="#"><imgsrc="images/img-2.jpg"></a> </div> <divclass="post-content"> <h3class="post-title"><ahref="#">Latest News Post</a></h3> <pclass="post-description"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec elementum mauris. Praesent vehicula gravida dolor, ac efficitur sem sagittis. </p> <ulclass="post-bar"> <li><iclass="fa fa-calendar"></i> June 7, 2016</li> <li> <iclass="fa fa-folder"></i> <ahref="#">Mockup</a> <ahref="#">Graphics</a> <ahref="#">Flayers</a> </li> </ul> <ahref="#"class="read-more">read more</a> </div> </div> </div> </div> </div> </div> </div>
CSS样式.demo{ background: linear-gradient(toright,#ffcccc,#d3d3d3); } .post-slide{ margin:015px; } .post-slide .post-img{ overflow:hidden; } .post-slide .post-img img{ width:100%; height:auto; transform:scale(1); transition:all1s ease-in-out0s; } .post-slide:hover .post-img img{ transform:scale(1.08); } .post-slide .post-content{ background:#fff; padding:20px; } .post-slide .post-title{ font-size:17px; font-weight:600; margin-top:0; text-transform:capitalize; } .post-slide .post-title a{ display:inline-block; color:#808080; transition:all0.3s ease0s; } .post-slide .post-title a:hover{ color:#3d3030; text-decoration:none; } .post-slide .post-description{ font-size:15px; color:#676767; line-height:24px; margin-bottom:14px; } .post-slide .post-bar{ padding:0; margin-bottom:15px; list-style:none; } .post-slide .post-bar li{ color:#676767; padding:2px0; } .post-slide .post-bar li i{ margin-right:5px; } .post-slide .post-bar li a{ display:inline-block; font-size:12px; color:#808080; transition:all0.3s ease0s; } .post-slide .post-bar li a:after{ content:","; } .post-slide .post-bar li a:last-child:after{ content:""; } .post-slide .post-bar li a:hover{ color:#3d3030; text-decoration:none; } .post-slide .read-more{ display:inline-block; padding:10px15px; font-size:14px; font-weight:bold; color:#fff; background:#e7989a; border-bottom-right-radius:10px; text-transform:capitalize; transition:all0.30s linear; } .post-slide .read-more:hover{ background:#333; text-decoration:none; } 初始化插件$(document).ready(function() { $("#news-slider").owlCarousel({ items:3, itemsDesktop:[1199,2], itemsDesktopSmall:[980,2], itemsMobile:[600,1], pagination:false, navigationText:false, autoPlay:true }); });
|