布局框架

CSS3卡片列表轮播布局jQuery特效

创客主机

CSS3卡片列表轮播布局jQuery特效-创客云
这是一款 jquery 和 css3 卡片列表轮播布局,该布局使用 owl-carousel 进行布局,通过 css 制作卡片样式,组成炫酷的卡片轮播特效。

使用方法

在页面中引入下面的文件。

也想出现在这里?联系我们
WordPress 主题
  1. <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /<
  2. <link rel="stylesheet" href="http://jrain.oscitas.netdna-cdn.com/tutorial/css/fontawesome-all.min.css"<
  3. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css"<
  4. <script src="js/jquery.min.js" type="text/javascript"<</script<
  5. <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>

HTML 结构

  1. <div class="demo">
  2.     <div class="container">
  3.         <div class="row">
  4.             <div class="col-md-12">
  5.                 <div id="news-slider" class="owl-carousel">
  6.                     <div class="post-slide">
  7.                         <div class="post-img">
  8.                             <a href="#"><img src="images/img-1.jpg" alt=""></a>
  9.                         </div>
  10.                         <div class="post-content">
  11.                             <h3 class="post-title"><a href="#">Latest News Post</a></h3>
  12.                             <p class="post-description">
  13.                                 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec elementum mauris. Praesent vehicula gravida dolor, ac efficitur sem sagittis.
  14.                             </p>
  15.                             <ul class="post-bar">
  16.                                 <li><i class="fa fa-calendar"></i> June 5, 2016</li>
  17.                                 <li>
  18.                                     <i class="fa fa-folder"></i>
  19.                                     <a href="#">Mockup</a>
  20.                                     <a href="#">Graphics</a>
  21.                                     <a href="#">Flayers</a>
  22.                                 </li>
  23.                             </ul>
  24.                             <a href="#" class="read-more">read more</a>
  25.                         </div>
  26.                     </div>
  27.  
  28.                     <div class="post-slide">
  29.                         <div class="post-img">
  30.                             <a href="#"><img src="images/img-2.jpg" alt=""></a>
  31.                         </div>
  32.                         <div class="post-content">
  33.                             <h3 class="post-title"><a href="#">Latest News Post</a></h3>
  34.                             <p class="post-description">
  35.                                 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec elementum mauris. Praesent vehicula gravida dolor, ac efficitur sem sagittis.
  36.                             </p>
  37.                             <ul class="post-bar">
  38.                                 <li><i class="fa fa-calendar"></i> June 7, 2016</li>
  39.                                 <li>
  40.                                     <i class="fa fa-folder"></i>
  41.                                     <a href="#">Mockup</a>
  42.                                     <a href="#">Graphics</a>
  43.                                     <a href="#">Flayers</a>
  44.                                 </li>
  45.                             </ul>
  46.                             <a href="#" class="read-more">read more</a>
  47.                         </div>
  48.                     </div>
  49.                 </div>
  50.             </div>
  51.         </div>
  52.     </div>
  53. </div>

CSS 样式

  1. .demo{
  2.     background: linear-gradient(to right,#ffcccc,#d3d3d3);
  3. }
  4. .post-slide{
  5.     margin: 0 15px;
  6. }
  7. .post-slide .post-img{
  8.     overflow: hidden;
  9. }
  10. .post-slide .post-img img{
  11.     width: 100%;
  12.     height: auto;
  13.     transform: scale(1);
  14.     transition: all 1s ease-in-out 0s;
  15. }
  16. .post-slide:hover .post-img img{
  17.     transform: scale(1.08);
  18. }
  19. .post-slide .post-content{
  20.     background: #fff;
  21.     padding: 20px;
  22. }
  23. .post-slide .post-title{
  24.     font-size: 17px;
  25.     font-weight: 600;
  26.     margin-top: 0;
  27.     text-transform: capitalize;
  28. }
  29. .post-slide .post-title a{
  30.     display: inline-block;
  31.     color: #808080;
  32.     transition: all 0.3s ease 0s;
  33. }
  34. .post-slide .post-title a:hover{
  35.     color: #3d3030;
  36.     text-decoration: none;
  37. }
  38. .post-slide .post-description{
  39.     font-size: 15px;
  40.     color: #676767;
  41.     line-height: 24px;
  42.     margin-bottom: 14px;
  43. }
  44. .post-slide .post-bar{
  45.     padding: 0;
  46.     margin-bottom: 15px;
  47.     list-style: none;
  48. }
  49. .post-slide .post-bar li{
  50.     color: #676767;
  51.     padding: 2px 0;
  52. }
  53. .post-slide .post-bar li i{
  54.     margin-right: 5px;
  55. }
  56. .post-slide .post-bar li a{
  57.     display: inline-block;
  58.     font-size: 12px;
  59.     color: #808080;
  60.     transition: all 0.3s ease 0s;
  61. }
  62. .post-slide .post-bar li a:after{
  63.     content: ",";
  64. }
  65. .post-slide .post-bar li a:last-child:after{
  66.     content: "";
  67. }
  68. .post-slide .post-bar li a:hover{
  69.     color: #3d3030;
  70.     text-decoration: none;
  71. }
  72. .post-slide .read-more{
  73.     display: inline-block;
  74.     padding: 10px 15px;
  75.     font-size: 14px;
  76.     font-weight: bold;
  77.     color: #fff;
  78.     background: #e7989a;
  79.     border-bottom-right-radius: 10px;
  80.     text-transform: capitalize;
  81.     transition: all 0.30s linear;
  82. }
  83. .post-slide .read-more:hover{
  84.     background: #333;
  85.     text-decoration: none;
  86. }

初始化插件

  1. $(document).ready(function() {
  2.     $("#news-slider").owlCarousel({
  3.         items:3,
  4.         itemsDesktop:[1199,2],
  5.         itemsDesktopSmall:[980,2],
  6.         itemsMobile:[600,1],
  7.         pagination:false,
  8.         navigationText:false,
  9.         autoPlay:true
  10.     });
  11. });
(0)

本文由 创客云 作者:PetitQ 发表,转载请注明来源!

阿里云

热评文章

发表评论

精彩推荐

Supro - 极简电商WordPress汉化主题

钻石珠宝奢侈品DedeCMS织梦模板

本站承接 WordPress / DedeCMS / ThinkPHP 等
系统建站、仿站、开发、定制等业务!

Hi, 如果您有主题插件代购(30-600元)汉化等建站相关业务,可以 跟我联系 哦!
欢迎投稿
嘿,欢迎咨询!