当前位置:主页 > 网页特效 > 焦点图 >

jquery和css3卡片列表轮播布局

发布时间:2019/06/30?来源:互联网?浏览:?关键词:jquery?CSS3?轮播图?
jquery和css3卡片列表轮播布局 jquery和css3卡片列表轮播布局
阿里云
简要教程

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

?使用方法

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





?HTML结构


    
        
            
                
                    
                        
                            
                        
Latest News Post Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec elementum mauris. Praesent vehicula gravida dolor, ac efficitur sem sagittis.
  • June 5, 2016
  • Mockup Graphics Flayers
  • read more
    Latest News Post Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec elementum mauris. Praesent vehicula gravida dolor, ac efficitur sem sagittis.
  • June 7, 2016
  • Mockup Graphics Flayers
  • read more

    ?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
        });
    });   

    效果预览下载链接

    共有人阅读,期待你的评论!评论
    说点什么吧
    • 全部评论(0
      还没有评论,快来抢沙发吧!
    Top