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設計效果原始碼下載
如果你喜歡我的分享，就關注我吧。你的關注和點贊是我前進的最大動力！
相關文章
- 純CSS3實現人物跑步動畫CSSS3動畫
- 純CSS3實現滑動開關效果CSSS3
- 純CSS3實現圖片展示特效CSSS3特效
- 非常震撼的純CSS3人物行走動畫CSSS3動畫
- css3氣泡動態上升效果CSSS3
- CSS3動態月食效果詳解CSSS3
- CSS3動態大白效果程式碼CSSS3
- CSS3動態餅狀圖效果CSSS3
- CSS3邊框動態環繞效果CSSS3
- CSS3環繞動態邊框效果CSSS3
- css3動態圓形鐘錶效果CSSS3
- CSS3文字動態填充背景效果CSSS3
- PS製作抽象人物線條GIF動態圖片效果抽象
- CSS神奇的卡片懸停互動效果CSS
- CSS3撥打電話動態圖示效果CSSS3
- css3實現線條環形動態運動效果CSSS3
- 純CSS3屬性animation實現的打字效果CSSS3
- CSS3 文字字型顏色動態漸變效果CSSS3
- jquery和css3實現的動態時鐘效果jQueryCSSS3
- 微信小程式實現卡片左右滑動效果微信小程式
- ios 卡片切換效果iOS
- 純CSS3畫出小黃人並實現動畫效果CSSS3動畫
- css3實現邊框具有動態環形遮罩效果CSSS3遮罩
- css3實現的動態大白效果程式碼例項CSSS3
- CSS3實現多種背景效果CSSS3
- CSS3發光字型幾種效果CSSS3
- CSS3小球靜態環繞效果CSSS3
- SSM動態展示分頁SSM
- CSS3 - vue中純css實現柱狀圖表效果CSSS3Vue
- 利用 Django 動態展示 Pyecharts 圖表資料的幾種方法DjangoEcharts
- CSS3 div水平運動效果CSSS3
- CSS3矩形左右擺動效果CSSS3
- 純CSS實現四種方式文字反差色效果CSS
- css3實現動態摺疊生成立方體旋轉效果CSSS3
- css3實現的滑鼠懸浮立體動態按鈕效果CSSS3
- css3實現的水平立體動態導航選單效果CSSS3
- 模擬展示動態按鈕
- 純前端 Canvas 實現 HTML 轉圖片，自動生成微信閱讀卡片前端CanvasHTML