9种纯CSS3人物信息卡片动态展示效果

通常在一些网站的网页上需要展示人物的个人信息，人物信息卡片是其中的一种展示方式，所以这一次给大家带来《9种纯CSS3人物信息卡片动态展示效果》。先上页面截图：
源代码下载: 9种纯CSS3人物信息卡片UI设计效果

9种纯CSS3人物信息卡片动态展示效果

第一张图片的动画效果完成前后的对比：

动态效果完成之前

动态效果完成之后

由于篇幅原因其余的八张图片的动态效果完成前后的样子就不再展示了，有兴趣的童鞋可以点击：9种纯CSS3人物信息卡片UI设计效果源代码下载，获取本案例所有的源代码文件。

部分代码文件：
index.html

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>.</title>
    <link rel="stylesheet" type="text/css" href="css/normalize.css">
    <link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css">
    <link href='https://fonts.googleapis.com/css?family=Lato:400,300,700,900' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <!--[if IE]>
        <script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
    <![endif]-->
</head>
<body>
    <div class="htmleaf-container">
        <header class="htmleaf-header">
            <h1>9种纯CSS3人物信息卡片动态展示效果<span></span></h1>
        </header>
        <div class="full-length">
            <div class="container">
                <div class="team-members row">
                    <div class="single-member effect-1">
                        <div class="member-image">
                            <img src="images/member_140x145.jpg" alt="Member">
                        </div>
                        <div class="member-info">
                            <h3>Sophia</h3>
                            <h5>ShowGilr</h5>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                            <div class="social-touch">
                                <a class="fb-touch" href="#"></a>
                                <a class="tweet-touch" href="#"></a>
                                <a class="linkedin-touch" href="#"></a>
                            </div>
                        </div>
                    </div>

                    

                    <div class="single-member effect-2">
                        <div class="member-image">
                            <img src="images/member_270x210.jpg" alt="Member">
                        </div>
                        <div class="member-info">
                            <h3>Sophia</h3>
                            <h5>ShowGilr</h5>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                            <div class="social-touch">
                                <a class="fb-touch" href="#"></a>
                                <a class="tweet-touch" href="#"></a>
                                <a class="linkedin-touch" href="#"></a>
                            </div>
                        </div>
                    </div>

                    

                    <div class="single-member effect-3">
                        <div class="member-image">
                            <img src="images/member_270x210.jpg" alt="Member">
                        </div>
                        <div class="member-info">
                            <h3>Sophia</h3>
                            <h5>ShowGilr</h5>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                            <div class="social-touch">
                                <a class="fb-touch" href="#"></a>
                                <a class="tweet-touch" href="#"></a>
                                <a class="linkedin-touch" href="#"></a>
                            </div>
                        </div>
                    </div>

                    

                    <div class="single-member effect-4">
                        <div class="member-info">
                            <h3>Sophia</h3>
                            <h5>ShowGilr</h5>
                        </div>
                        <div class="member-image">
                            <img src="images/member_270x210.jpg" alt="Member">
                        </div>
                        <div class="more-info">
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor incididunt.</p>
                            <div class="social-touch icon-colored">
                                <a class="fb-touch" href="#"></a>
                                <a class="tweet-touch" href="#"></a>
                                <a class="linkedin-touch" href="#"></a>
                            </div>
                        </div>
                    </div>

                    

                    <div class="single-member effect-5">
                        <div class="member-image">
                            <img src="images/member_270x210.jpg" alt="Member">
                        </div>
                        <div class="member-info">
                            <h3>Sophia</h3>
                            <h5>ShowGilr</h5>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                            <div class="social-touch icon-colored">
                                <a class="fb-touch" href="#"></a>
                                <a class="tweet-touch" href="#"></a>
                                <a class="linkedin-touch" href="#"></a>
                            </div>
                        </div>
                    </div>

                    

                    <div class="single-member effect-6">
                        <div class="member-image">
                            <img src="images/member_270x210.jpg" alt="Member">
                        </div>
                        <div class="member-info">
                            <h3>Sophia</h3>
                            <h5>ShowGilr</h5>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                            <div class="social-touch icon-colored">
                                <a class="fb-touch" href="#"></a>
                                <a class="tweet-touch" href="#"></a>
                                <a class="linkedin-touch" href="#"></a>
                            </div>
                        </div>
                        <div class="border-green"></div>
                    </div>

                    

                    <div class="single-member effect-7">
                        <div class="member-info">
                            <h3>Sophia</h3>
                            <h5>ShowGilr</h5>
                        </div>
                        <div class="member-image">
                            <img src="images/member_270x210.jpg" alt="Member">
                        </div>
                        <div class="more-info">
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor incididunt.</p>
                            <div class="social-touch icon-colored">
                                <a class="fb-touch" href="#"></a>
                                <a class="tweet-touch" href="#"></a>
                                <a class="linkedin-touch" href="#"></a>
                            </div>
                        </div>
                    </div>

                    

                    <div class="single-member effect-8">
                        <div class="member-info">
                            <h3>Sophia</h3>
                            <h5>ShowGilr</h5>
                        </div>
                        <div class="member-image">
                            <img src="images/member_270x210.jpg" alt="Member">
                        </div>
                        <div class="more-info">
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, Lorem ipsum dolor sit amet.</p>
                            <div class="social-touch icon-colored">
                                <a class="fb-touch" href="#"></a>
                                <a class="tweet-touch" href="#"></a>
                                <a class="linkedin-touch" href="#"></a>
                            </div>
                        </div>
                    </div>

                    

                    <div class="single-member effect-9">
                        <div class="member-info">
                            <h3>Sophia</h3>
                            <h5>ShowGilr</h5>
                        </div>
                        <div class="member-image">
                            <img src="images/member_270x210.jpg" alt="Member">
                        </div>
                        <div class="more-info">
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor incididunt.</p>
                            <div class="social-touch icon-colored">
                                <a class="fb-touch" href="#"></a>
                                <a class="tweet-touch" href="#"></a>
                                <a class="linkedin-touch" href="#"></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
</body>
</html>

CSS样式文件代码：
style.css

body{font-family:Lato,'Open Sans', sans-sarif; font-size:16px; }
*{margin: 0; padding: 0; box-sizing: border-box;}
.container{margin: 0 auto; max-width: 1000px;}
.row{width: 103%; float: left; margin: 110px -1.5%;}

/*= common css to all effects =*/
.single-member{width: 280px; float: left; margin: 30px 2.5%; background-color: #fff; text-align: center; position: relative;}
.member-image img{max-width: 100%; vertical-align: middle;}
h3 {font-size: 24px; font-weight: normal; margin: 10px 0 0; text-transform: uppercase;}
h5 {font-size: 16px; font-weight: 300; margin: 0 0 15px; line-height: 22px;}
p {font-size: 14px; font-weight: 300; line-height: 22px; padding: 0 30px; margin-bottom: 10px;}
.social-touch a{display: inline-block; width: 27px; height: 26px; vertical-align: middle; margin: 0 2px; background-image: url(../images/social-icons.png); background-repeat: no-repeat; opacity: 0.7; transition: 0.3s;}
.social-touch a:hover{opacity: 1; transition: 0.3s;}
.fb-touch{background-position: 0 0;}
.tweet-touch{background-position: -35px 0;}
.linkedin-touch{background-position: -71px 0;}
.icon-colored .fb-touch{background-position: 0 -27px;}
.icon-colored .tweet-touch{background-position: -35px -27px;}
.icon-colored .linkedin-touch{background-position: -71px -27px;}
/*= common css to all effects end =*/

/*= effect-1 css =*/
.effect-1{border-radius: 5px 5px 0 0; padding-bottom: 40px;}
.effect-1 .member-image {border: 2px solid #fff; border-radius: 60px 0; display: inline-block; margin-top: -72px; overflow: hidden; transition: 0.3s;}
.effect-1 .social-touch{background-color: #e13157; position: absolute; left: 0; bottom: 0; height: 5px; overflow: hidden; padding: 5px 0 0; width: 100%; transition: 0.3s;}
.effect-1 .member-image img{transition: 0.3s; border-radius: 60px 0;}
.effect-1:hover .member-image{border-color: #e13157; transition: 0.3s; border-radius: 50%;}
.effect-1:hover .social-touch{padding: 6px 0; height: 38px; transition: 0.3s;}
/*= effect-1 css end =*/

/*= effect-2 css =*/
.effect-2{max-height: 302px; min-height: 302px; overflow: hidden;}
.effect-2 h3{padding-top: 7px; line-height: 33px;}
.effect-2 .member-image{border-bottom: 5px solid #1fb554; height: 212px; overflow: hidden; width: 100%; transition: 0.4s; display: inline-block; float: none; vertical-align: middle;}
.effect-2 .member-info{transition: 0.4s;}
.effect-2 .member-image img{width: 100%; vertical-align: bottom;}
.effect-2 .social-touch{background-color: #1fb554; float: left; left: 0; bottom: 0; overflow: hidden; padding: 5px 0; width: 100%; transition: 0.4s;}
.effect-2:hover .member-image{height: 81px; transition: 0.4s;}
/*= effect-2 css end =*/

/*= effect-3 css =*/
.effect-3{max-height: 302px; min-height: 302px; overflow: hidden;}
.effect-3 h3{padding-top: 7px; line-height: 33px;}
.effect-3 .member-image{border-bottom: 5px solid #e5642b; transition: 0.4s; height: 212px; width: 100%; display: inline-block; float: none; vertical-align: middle;}
.effect-3 .member-info{transition: 0.4s;}
.effect-3 .member-image img{width: 100%; vertical-align: bottom;}
.effect-3 .social-touch{background-color: #e5642b; float: left; left: 0; bottom: 0; overflow: hidden; padding: 5px 0; width: 100%; transition: 0.4s;}
.effect-3:hover .member-image{border-bottom: 0; border-radius: 0 0 50px 50px; height: 81px; display: inline-block; overflow: hidden; width: 109px; transition: 0.4s;}
/*= effect-3 css end =*/

/*= effect-4 css =*/
.effect-4{max-height: 289px; min-height: 289px; overflow: hidden;}
.effect-4 h3{line-height: 35px;}
.effect-4 .member-image{position: absolute; width: 100%; transition: 0.4s;}
.effect-4 .member-image img{width: 100%;}
.effect-4 .more-info{height: 0; transition: 0.4s; overflow: hidden; z-index: 9; position: relative; background-color: #fff;} 
.effect-4:hover .more-info{height: 208px; transition: 0.4s;}
/*= effect-4 css end =*/

/*= effect-5 css =*/
.effect-5{max-height: 289px; min-height: 289px; overflow: hidden;}
.effect-5 .member-info {background-color: #fff; position: absolute; width: 100%; top: 0; left: 0; height: 82px; transition: 0.3s; z-index: 2;}
.effect-5 .member-image{margin-top: 82px; float: left; width: 100%; position: relative; transition: 0.3s; z-index: 4;}
.effect-5 .member-image img{width: 100%;}
.effect-5 .member-info:before{border-left: 140px solid transparent; border-right: 140px solid transparent; border-top: 15px solid #fff; bottom: -15px; content: ""; left: 0; position: absolute; z-index: 9;}
.effect-5:hover .member-info{height: 215px; transition: 0.3s; z-index: 6;}
.effect-5:hover .member-image{margin-top: 200px; transition: 0.3s;}
/*= effect-5 css end =*/

/*= effect-6 css =*/
.effect-6{max-height: 289px; min-height: 289px; overflow: hidden;}
.effect-6 .member-info {background-color: #fff; position: absolute; width: 100%; top: 0; left: 0; height: 82px; transition: 0.3s; z-index: 2;}
.effect-6 .member-image{margin-top: 82px; float: left; width: 100%; position: relative; transition: 0.3s; z-index: 4; overflow: hidden;}
.effect-6 .member-image img{width: 100%;}
.effect-6:hover .member-info{height: 215px; transition: 0.3s; z-index: 6; border-radius: 0 0 50% 50%; overflow: hidden;}
.effect-6:hover .member-image{margin-top: 100px; transition: 0.3s; border-radius: 0;}
/*= effect-6 css end =*/

/*= effect-7 css =*/
.effect-7{max-height: 289px; min-height: 289px; overflow: hidden;}
.effect-7 h3{line-height: 35px;}
.effect-7 .member-image{position: absolute; bottom: 0; width: 100%; transition: 0.4s; z-index: 1;}
.effect-7 .member-image img{width: 100%; transition: 0.4s; opacity: 1; height: 100%;}
.effect-7 .more-info{height: 208px; transition: 0.4s; overflow: hidden; position: relative; background-color: #fff;}
.effect-7:hover .member-image{bottom: 40%;}
.effect-7:hover .member-image img{width: 0; height: 0; transition: 0.4s; opacity: 0;}
/*= effect-7 css end =*/

/*= effect-8 css =*/
.effect-8{max-height: 289px; min-height: 289px; overflow: hidden;  perspective: 800px;}
.effect-8 h3{line-height: 35px;}
.effect-8 .member-image{position: absolute; bottom: 0; width: 100%; transition: 0.4s; z-index: 1;}
.effect-8 .member-image img{width: 100%; transition: 0.4s; height: 100%;}
.effect-8 .more-info{height: 208px; transition: 0.4s; overflow: hidden; position: relative; background-color: #fff;}
.effect-8:hover .member-image{transform: rotateX(82deg); transform-origin: center bottom 0; transition: 0.4s;}
/*= effect-8 css end =*/

/*= effect-9 css =*/
.effect-9{max-height: 289px; min-height: 289px; overflow: hidden;  perspective: 800px;}
.effect-9 h3{line-height: 35px;}
.effect-9 .member-image{position: absolute; bottom: 0; width: 100%; transition: 0.4s; z-index: 1;}
.effect-9 .member-image img{width: 100%; transition: 0.4s; height: 100%;}
.effect-9 .more-info{height: 208px; transition: 0.4s; overflow: hidden; position: relative; background-color: #fff;}
.effect-9:hover .member-image{transform: translateY(100%); transition: 0.4s;}
/*= effect-9 css end =*/

/*= Media Query 
=============== */
@media only screen and (max-width: 980px){
    .row{width: 100%; margin: 110px 0;}
    .team-members{text-align: center;}
    .single-member{float: none; display: inline-block; vertical-align: bottom;}
}
/*= Media Query End
=================== */

代码下载：9种纯CSS3人物信息卡片UI设计效果源代码下载
如果你喜欢我的分享，就关注我吧。你的关注和点赞是我前进的最大动力！

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android - 收藏集
    Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 175,807评论 25赞 709
  • 优秀第三方
    发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 14,270评论 4赞 61
  • 年华
    又一季，春暖花开 流年里，那些花儿 开不败 历史的尘埃 烟雨里，小楼台 一座孤城戏梧桐 白发千丈 终，不过唯梦一场
    啊十阅读 1,904评论 0赞 0
  • 大雨后的夜晚
    和女朋友腻歪了一晚上，回宿舍做了一百个蹲起，大汗淋漓，努力，加油！！
    老胖小子阅读 1,196评论 1赞 0
  • 《创业史》的词，句，感。
    作者：柳青 1、好词 如胶似漆 谦逊 咄咄逼人 羞惭 冰天雪地 愤懑 舍近求远 2、好句 ...
    杰瑞和汤姆阅读 14,067评论 0赞 0