布局框架

CSS3名片式卡片设计特效

面包多

CSS3名片式卡片设计特效-创客云
这是一款 CSS3 名片式卡片设计特效。该卡片使用简单的 CSS3 代码,来构建带图片,图标和标题,描述信息的卡片布局。

HTML 结构

  1. <figure class="snip0056">
  2.   <figcaption>
  3.     <h2>Stuart <span>White</span></h2>
  4.     <p>I suppose if we couldn't laugh at things that don't make sense, we couldn't react to a lot of life.</p>
  5.     <div class="icons"><a href="#"><i class="ion-ios-home"></i></a><a href="#"><i class="ion-ios-email"></i></a><a href="#"><i class="ion-ios-telephone"></i></a></div>
  6.   </figcaption><img src="img/sq-sample8.jpg" alt="sample8" />
  7.   <div class="position">Web Designer</div>
  8. </figure>
也想出现在这里?联系我们
WordPress 主题

CSS 样式

  1. @import url(https://fonts.googleapis.com/css?family=Raleway:400,200,300,800);
  2. @import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);
  3. figure.snip0056 {
  4.   font-family: 'Raleway', Arial, sans-serif;
  5.   position: relative;
  6.   overflow: hidden;
  7.   margin: 10px auto;
  8.   min-width: 380px;
  9.   max-width: 480px;
  10.   width: 100%;
  11.   background: #ffffff;
  12.   color: #000000;
  13. }
  14. figure.snip0056 * {
  15.   -webkit-box-sizing: border-box;
  16.   box-sizing: border-box;
  17. }
  18. figure.snip0056 > img {
  19.   width: 50%;
  20.   border-radius: 50%;
  21.   border: 4px solid #ffffff;
  22.   -webkit-transition: all 0.35s ease-in-out;
  23.   transition: all 0.35s ease-in-out;
  24.   -webkit-transform: scale(1.6);
  25.   transform: scale(1.6);
  26.   position: relative;
  27.   float: right;
  28.   right: -15%;
  29.   z-index: 1;
  30. }
  31. figure.snip0056 figcaption {
  32.   padding: 20px 30px 20px 20px;
  33.   position: absolute;
  34.   left: 0;
  35.   width: 50%;
  36. }
  37. figure.snip0056 figcaption h2,
  38. figure.snip0056 figcaption p {
  39.   margin: 0;
  40.   text-align: left;
  41.   padding: 10px 0;
  42.   width: 100%;
  43. }
  44. figure.snip0056 figcaption h2 {
  45.   font-size: 1.3em;
  46.   font-weight: 300;
  47.   text-transform: uppercase;
  48.   border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  49. }
  50. figure.snip0056 figcaption h2 span {
  51.   font-weight: 800;
  52. }
  53. figure.snip0056 figcaption p {
  54.   font-size: 0.9em;
  55.   opacity: 0.8;
  56. }
  57. figure.snip0056 figcaption .icons {
  58.   width: 100%;
  59.   text-align: left;
  60. }
  61. figure.snip0056 figcaption .icons i {
  62.   font-size: 26px;
  63.   padding: 5px;
  64.   top: 50%;
  65.   color: #000000;
  66. }
  67. figure.snip0056 figcaption a {
  68.   opacity: 0.3;
  69.   -webkit-transition: opacity 0.35s;
  70.   transition: opacity 0.35s;
  71. }
  72. figure.snip0056 figcaption a:hover {
  73.   opacity: 0.8;
  74. }
  75. figure.snip0056 .position {
  76.   width: 100%;
  77.   text-align: left;
  78.   padding: 15px 30px;
  79.   font-size: 0.9em;
  80.   opacity: 1;
  81.   font-style: italic;
  82.   color: #ffffff;
  83.   background: #000000;
  84.   clear: both;
  85. }
  86. figure.snip0056.blue .position {
  87.   background: #20638f;
  88. }
  89. figure.snip0056.red .position {
  90.   background: #962d22;
  91. }
  92. figure.snip0056.yellow .position {
  93.   background: #bf6516;
  94. }
  95. figure.snip0056:hover > img,
  96. figure.snip0056.hover > img {
  97.   right: -12%;
  98. }

Codepen 网址:https://codepen.io/littlesnippets/pen/PPqNXY

(0)

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

阿里云

热评文章

发表评论

精彩推荐

Supro - 极简电商WordPress汉化主题

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

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

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