51rgb-css3动画23-卡片排版&经过动画特效

分享 :

网盘下载链接:

提取密码: u4qi
复制提取密码
51RGB在线教育,WEB前端开发直播体验课,游戏风格手风琴特效制作!源码下载
  • 详情
    文件来源

    官方发布

    更新日期

    2018-01-29

    适用平台

    All

    系统位数

    ALL

    文件格式

    zip

    文件语言

    中文

    文件授权

    免费

    下载次数

    154次

    源码,可以直接复制使用!

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>Cards hover effect</title>
    	<meta charset="utf-8" />
        <link rel="stylesheet" href="cards.scss"/>
        <style>
            body{
                width:100%;
                height:100%;
                font-family: "Open Sans", "open-sans", sans-serif;
                letter-spacing:0.03em;
                line-height:1.6;
                color:#000;
            }
            .container{
                width:1090px;
                min-width:600px;
                height:430px;
                position:absolute;
                top:50%;
                left:50%;
                -webkit-transform:translate(-50%,-50%);/*图层居中,移动translate*/
                transform:translate(-50%,-50%);
            }
            .container .card{
                width:330px;
                height:430px;
                float:left;
                border-radius:8px;
                box-shadow:0 2px 2px rgba(0,0,0,.2);
                position:relative;
                overflow:hidden;
                top:0;
                text-align:center;
                -webkit-transition:all 0.25s;
                transition:all 0.25s;
            }
             .container .card:hover{
                 top:-10px;
                 box-shadow:0 12px 16px rgba(0,0,0,.2);
             }
             .container .card:nth-child(2){
                 margin:0 50px;
             }
             .container .card h4{
                 font-weight:600;
             }
             .container .card p{
                 padding:0 1rem;
                 font-size:16px;
                 font-weight:300;
             }
             .container .card a{
                 font-weight:500;
                 text-decoration:none;
                 color: #3498db;
             }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="card">
                <img src="https://source.unsplash.com/category/nature/330x200">
                <h4>Nature</h4>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos molestias facere.</p>
                <a href="#">Learn more</a>
            </div>
            <div class="card">
                <img src="https://source.unsplash.com/category/food/330x200">
                <h4>Food</h4>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos molestias facere.</p>
                <a href="#">Learn more</a>
            </div>
            <div class="card">
                <img src="https://source.unsplash.com/category/buildings/330x200">
                <h4>Buildings</h4>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos molestias facere.</p>
                <a href="#">Learn more</a>
            </div>
        </div>
    </body>
    </html>
    
    
    
  • 使用说明

    本节课视频资源:

    课程在线回放地址:http://www.51rgb.cn/video/page-29/305.html

    关注微信公众号:网页设计自学平台 回复:【css3动画】关键字即可获取全套css3动画教程及源码

  • 相关下载