1. 需求背景

日常生活中，有一种错误的认知就是，网站是一个卖货的工具。从而忽视了很多小的细节，比如讲述品牌故事。讲好品牌故事其实是很有必要的。一个是可以提升顾客对网站的安全感认同感，另外一个就是无形之中形成品牌效应，让顾客认可。这样后期的引流费用会越来越少，品牌溢价也会给网站带来更大的收益。

讲述品牌故事里面常见的简单粗暴的手法，就是图文堆砌。 如果图片比较有创意还好，如果图文不搭，很容易就引起审美疲劳，反而带来不好的观感体验。

因此博主在这里希望在品牌故事的环节，大家可以采取动静结合的手法, 也就是提升交互性，增强顾客的参与感。顾客的参与感增强了，注意力也会相对集中，可能其中的几个产品或者理念亮点就能和顾客的内心达成一致，间接的拉近顾客和网站的关系。

基于以上原因，博主找到了一些交互性强的一些网站并准备这期视频。我们来看看成品效果吧。

因为博主观察点赞和关注量不太理想，意识到大家好像对展示效果以及思路的需求大于实现。所以后期将更多的讲为什么以及怎么做，起一个抛砖引玉的作用。

2. 代码实现

在Section目录添加代码并引用即可

  1. <div class="introduction-card-1">
  2.     <div class="section-title">
  3.         <h2 class="section-title--h">
  4.             {{ section.settings.title }}
  5.         </h2>
  6.         <h3 class="section-title--alt">
  7.             {{ section.settings.content }}
  8.         </h3>
  9.     </div>
  10.     <div class="introduce1-list">
  11.         {%- for block in section.blocks -%}
  12.         <div class="introduce1">
  13.             <div class="action-images-container">
  14.                 <div class="action-main-image-block">
  15.                     <div class="action-main-image-container">
  16.                         <div class="action-main-image-wrapper">
  17.                             <div class="action-image">
  18.                                 <img class="action-image--bg" width="700" height="450" src="{{ block.settings.image_main | img_url: 'master' }}">
  19.                             </div>
  20.                         </div>
  21.                     </div>
  22.                 </div>
  23.                 <div class="action-perspective-wrap">
  24.                     <img class="action-image-perspective" width="300" height="550" src="{{ block.settings.image_output | img_url: 'master' }}">
  25.                 </div>
  26.             </div>
  27.             <div class="introduce1-container">
  28.                 <div class="action-description">
  29.                     <div class="action-top">
  30.                         <p class="introduce1-title">
  31.                             {{ block.settings.title }}
  32.                         </p>
  33.                         <a href="{{ block.settings.link }}" target="_blank" rel="nofollow" class="action-link-sm">
  34.                             <span class="arrow-link ">
  35.                                 {{ block.settings.link_text }}
  36.                             </span>
  37.                         </a>
  38.                     </div>
  39.                     <div class="action-text">
  40.                         <p>
  41.                             {{ block.settings.content }}
  42.                         </p>
  43.                         <p>
  44.                             <a href="{{ block.settings.link }}" target="_blank" rel="nofollow" class="action-link">
  45.                                 <span class="arrow-link ">
  46.                                     {{ block.settings.link_text }}
  47.                                 </span>
  48.                             </a>
  49.                         </p>
  50.                     </div>
  51.                 </div>
  52.             </div>
  53.         </div>
  54.         {%- endfor -%}
  55.     </div>
  56. </div>
  58. <style>
  59. .section-title{text-align:center;}.introduce1-list{max-width:1400px;margin:0 auto;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;margin-bottom:40px;padding:0 15px}.introduce1-list .introduce1{-webkit-transition:z-index .5s;transition:z-index .5s;position:relative;color:#fff;min-height:300px;margin-bottom:20px;width:100%;z-index:4}.introduce1-list .introduce1:before{pointer-events:none;-webkit-transition:opacity .5s;transition:opacity .5s;opacity:0;content:'';position:absolute;top:0;left:0;right:0;bottom:0;z-index:3;background:rgba(0,0,0,.5)}.introduce1-list .introduce1 .action-images-container{height:300px;position:absolute;top:0;left:0;right:0;bottom:0;z-index:1}.introduce1-list .introduce1 .action-images-container .action-main-image-block{position:absolute;top:0;left:0;right:0;bottom:0;z-index:1;-webkit-transition:-webkit-transform .7s ease-in-out;transition:-webkit-transform .7s ease-in-out;transition:transform .7s ease-in-out;transition:transform .7s ease-in-out,-webkit-transform .7s ease-in-out;-webkit-transform:translateZ(-1000px);transform:translateZ(-1000px)}.introduce1-list .introduce1 .action-images-container .action-main-image-block .action-main-image-container{position:absolute;top:0;left:0;right:0;bottom:0;z-index:1;-webkit-transition:-webkit-transform .5s ease-in-out;transition:-webkit-transform .5s ease-in-out;transition:transform .5s ease-in-out;transition:transform .5s ease-in-out,-webkit-transform .5s ease-in-out;-webkit-transform-origin:0 50%;transform-origin:0 50%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch}.introduce1-list .introduce1 .action-images-container .action-main-image-block .action-main-image-container .action-main-perspective-image{position:relative;overflow:hidden;width:0;-webkit-transform-origin:100% 50%;transform-origin:100% 50%;background:-webkit-gradient(linear,left bottom,left top,color-stop(30%,#32373c),to(#636265));background:linear-gradient(0deg,#32373c 30%,#636265);-webkit-transition:all .5s ease-in-out;transition:all .5s ease-in-out}.introduce1-list .introduce1 .action-images-container .action-main-image-block .action-main-image-container .action-main-image-wrapper{position:relative;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;overflow:hidden}.introduce1-list .introduce1 .action-images-container .action-main-image-block .action-main-image-container .action-main-image-wrapper .action-image{pointer-events:none;position:absolute;top:0;right:0;bottom:0;background-size:cover;overflow:hidden;left:-10px;-webkit-transition:opacity .3s,-webkit-transform .3s linear;transition:opacity .3s,-webkit-transform .3s linear;transition:transform .3s linear,opacity .3s;transition:transform .3s linear,opacity .3s,-webkit-transform .3s linear}.introduce1-list .introduce1 .action-images-container .action-main-image-block .action-main-image-container .action-main-image-wrapper .action-image:before{-webkit-transition:-webkit-transform .4s ease-in-out;transition:-webkit-transform .4s ease-in-out;transition:transform .4s ease-in-out;transition:transform .4s ease-in-out,-webkit-transform .4s ease-in-out;-webkit-transform:scale(2);transform:scale(2);-webkit-transform-origin:100% 0;transform-origin:100% 0;content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(ellipse at center,rgba(0,0,0,.9) 0,rgba(0,0,0,0) 100%)}.introduce1-list .introduce1 .action-images-container .action-image-perspective{-webkit-transition:opacity .5s,-webkit-transform .6s ease-in-out;transition:opacity .5s,-webkit-transform .6s ease-in-out;transition:transform .6s ease-in-out,opacity .5s;transition:transform .6s ease-in-out,opacity .5s,-webkit-transform .6s ease-in-out;opacity:0;position:absolute;right:-10%;height:100%;width:auto;top:2%;z-index:2;-webkit-transform-origin:65% 50%;transform-origin:65% 50%;-webkit-transform:perspective(1000px) rotateY(-60deg);transform:perspective(1000px) rotateY(-60deg)}.introduce1-list .introduce1 .introduce1-container{position:relative;overflow:hidden;z-index:2;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end;-webkit-transition:-webkit-transform .4s ease-in-out;transition:-webkit-transform .4s ease-in-out;transition:transform .4s ease-in-out;transition:transform .4s ease-in-out,-webkit-transform .4s ease-in-out;-webkit-transform:none;transform:none;-webkit-transform-origin:0 50%;transform-origin:0 50%;height:300px;padding:0 8%;pointer-events:none}.introduce1-list .introduce1 .introduce1-container .action-description{position:relative;z-index:2;line-height:26px;font-size:16px;padding-bottom:7%;-webkit-transition:all .4s ease-in-out;transition:all .4s ease-in-out;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);-webkit-transform-origin:0 50%;transform-origin:0 50%}.introduce1-list .introduce1 .introduce1-container .action-description .action-top{-webkit-transition:-webkit-transform .4s ease-in-out;transition:-webkit-transform .4s ease-in-out;transition:transform .4s ease-in-out;transition:transform .4s ease-in-out,-webkit-transform .4s ease-in-out;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}.introduce1-list .introduce1 .introduce1-container .action-description .action-top .introduce1-title{font-weight:500;font-size:20px;line-height:28px;margin-bottom:30px;min-height:24px;-webkit-transition:all .4s ease-in-out;transition:all .4s ease-in-out}.introduce1-list .introduce1 .introduce1-container .action-description .action-top .action-link-sm{display:inline-block;pointer-events:all;margin-bottom:25px}.introduce1-list .introduce1 .introduce1-container .action-description .action-top .action-link-sm .arrow-link{padding:10px 20px 10px 0;color:#fff;-webkit-transition:color .4s .65s;transition:color .4s .65s}.introduce1-list .introduce1 .introduce1-container .action-description .action-top .action-link-sm:hover .arrow-link{color:#04d0f1}.introduce1-list .introduce1 .introduce1-container .action-description .action-top .action-link-sm:hover .arrow-link:after{background-color:#04d0f1}.introduce1-list .introduce1 .introduce1-container .action-description .action-text{-webkit-transition:opacity .7s .1s;transition:opacity .7s .1s;opacity:0;-webkit-transition:-webkit-transform .3s .2s ease-in-out;transition:-webkit-transform .3s .2s ease-in-out;transition:transform .3s .2s ease-in-out;transition:transform .3s .2s ease-in-out,-webkit-transform .3s .2s ease-in-out;max-width:70%}.introduce1-list .introduce1 .introduce1-container .action-description .action-text p{font-size:18px;font-weight:500;margin:0}.introduce1-list .introduce1 .introduce1-container .action-description .action-text p:not(:last-child){margin-bottom:25px}.introduce1-list .introduce1 .introduce1-container .action-description .action-text .action-link{-webkit-transition:all .6s;transition:all .6s;pointer-events:all;text-decoration:none;}.introduce1-list .introduce1 .introduce1-container .action-description .action-text .action-link .arrow-link{padding:10px 20px 10px 0;color:#fff;-webkit-transition:color .4s .65s;transition:color .4s .65s}.introduce1-list .introduce1 .introduce1-container .action-perspective-wrap{display:none;}.introduce1-list .introduce1 .introduce1-container .action-perspective-wrap img{display:none;}@media (min-width:768px){.introduce1-list .introduce1{width:49.4%;margin-bottom:1.1vw}}@media (max-width:991px){.introduce1-list .action-perspective-wrap{display:none}.introduce1-list .action-perspective-wrap picture{display:none}.introduce1-list .action-perspective-wrap picture img{display:none}}@media (min-width:1400px){.introduce1-list .introduce1{min-height:450px}.introduce1-list .introduce1 .action-images-container{min-height:450px}.introduce1-list .introduce1 .action-images-container .action-image-perspective{right:-17%;height:102%}.introduce1-list .introduce1 .introduce1-container{-webkit-transform:translate3d(0,-60px,0) !important;transform:translate3d(0,-60px,0) !important;min-height:450px;}.introduce1-list .introduce1 .introduce1-container .action-description .action-top .action-logo{font-size:24px;line-height:32px;margin-bottom:20px}.introduce1-list .introduce1 .introduce1-container .action-description .action-top .action-logo img{max-width:initial;height:initial}.introduce1-list .introduce1 .introduce1-container .action-description .action-top .introduce1-title{font-size:24px;line-height:32px;min-height:50px;}.introduce1-list .introduce1 .action-perspective-wrap{display:block}.introduce1-list .introduce1:hover{z-index:5}.introduce1-list .introduce1:hover .action-images-container .action-main-image-block{-webkit-transform:translate3d(0%,0,0) scale(1.02);transform:translate3d(0%,0,0) scale(1.02)}.introduce1-list .introduce1:hover .action-images-container .action-main-image-block .action-main-image-container{-webkit-transform:perspective(300px) rotateY(5deg);transform:perspective(300px) rotateY(5deg)}.introduce1-list .introduce1:hover .action-images-container .action-main-image-block .action-main-image-container .action-main-perspective-image{-webkit-transform:perspective(300px) rotateY(-40deg);transform:perspective(300px) rotateY(-40deg);width:12px}.introduce1-list .introduce1:hover .action-images-container .action-main-image-block .action-main-image-container .action-main-image-wrapper .action-image{-webkit-transition:opacity .5s,-webkit-transform 4s .4s linear;transition:opacity .5s,-webkit-transform 4s .4s linear;transition:transform 4s .4s linear,opacity .5s;transition:transform 4s .4s linear,opacity .5s,-webkit-transform 4s .4s linear;-webkit-transform:translate3d(-8%,0,0);transform:translate3d(-8%,0,0)}.introduce1-list .introduce1:hover .action-images-container .action-image-perspective{opacity:1;-webkit-transform:perspective(1000px) rotateY(0);transform:perspective(1000px) rotateY(0)}.introduce1-list .introduce1:hover .introduce1-container{-webkit-transform:translate3d(-2%,0,0) !important;transform:translate3d(-2%,0,0) !important}.introduce1-list .introduce1:hover .introduce1-container .action-description{-webkit-transform:perspective(300px) rotateY(3deg) translate3d(0,0,0) !important;transform:perspective(300px) rotateY(3deg) translate3d(0,0,0) !important}.introduce1-list .introduce1:hover .introduce1-container .action-description .action-top{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);max-width:74%}.introduce1-list .introduce1 .introduce1-container .action-description .action-top .action-link-sm{display:none}.introduce1-list .introduce1 .introduce1-container .action-description .action-text p{font-size:21px}.introduce1-list .introduce1:hover .introduce1-container .action-description .action-top .introduce1-title{min-height:50px}.introduce1-list .introduce1:hover .introduce1-container .action-description .action-text{opacity:1}.introduce1-list .introduce1:hover .introduce1-container .action-description .action-text p:not(:last-child){margin-bottom:25px}.introduce1-list .introduce1:hover .introduce1-container .action-description .action-text .arrow-link{color:#04d0f1}.introduce1-list .introduce1:hover .introduce1-container .action-description .action-text .arrow-link:after{background-color:#04d0f1}} 
  60. </style>
  62. {% schema %}
  63. {
  64.   "name": "介绍展示卡-类型1",
  65.   "settings": [
  66.     {
  67.        "type": "text",
  68.        "id": "title",
  69.        "label": "标题"
  70.     },
  71.     {
  72.         "type": "richtext",
  73.         "id": "content",
  74.         "label": "内容"
  75.      }
  76.   ],
  77.   "blocks": [
  78.     {
  79.         "name": "Introduce Box",
  80.         "type": "introduce1",
  81.         "settings": [
  82.             {
  83.                 "type": "image_picker",
  84.                 "id": "image_main",
  85.                 "label": "主图",
  86.                 "info": "图片大小: 700x450"
  87.             },
  88.             {
  89.                 "type": "image_picker",
  90.                 "id": "image_output",
  91.                 "label": "效果图",
  92.                 "info": "图片大小: 300x550"
  93.             },
  94.            {
  95.                "type": "text",
  96.                "id": "title",
  97.                "label": "标题"
  98.            },
  99.            {
  100.                 "type": "html",
  101.                 "id": "content",
  102.                 "label": "内容"
  103.             },
  104.             {
  105.                 "type": "url",
  106.                 "id": "link",
  107.                 "label": "跳转链接"
  108.             },
  109.             {
  110.                 "type": "text",
  111.                 "id": "link_text",
  112.                 "label": "跳转文案"
  113.             }
  114.         ]
  115.     }
  116.   ],
  117.   "presets": [
  118.     {
  119.       "name": "介绍展示卡-类型1"
  120.     }
  121.   ]
  122. }
  123. {% endschema %}
  1. <div class="digital-exp align-center pb-10">
  2.     <div class="container bg-dark">
  3.         <div data-aos="fade-down" data-aos-duration="800" class="aos-init aos-animate">
  4.             <div class="section-title">
  5.                 <h2 class="section-title--h">
  6.                     {{ section.settings.title }}
  7.                 </h2>
  8.                 <h3 class="section-title--alt">
  9.                     {{ section.settings.content }}
  10.                 </h3>
  11.             </div>
  12.         </div>
  13.     </div>
  14.     {%- for block in section.blocks -%}
  15.     <div class="exp">
  16.         <div class="exp-item bg-dark aos-init aos-animate" data-aos="exp-animation"
  17.         data-aos-duration="1000">
  18.             <a target="_blank" href="{{ block.settings.link }}" class="exp-full_link bg-ibm">
  19.                 <img class="lazy loaded" alt="" data-ll-status="loaded" src="{{ block.settings.image_main | img_url: 'master' }}">
  20.             </a>
  21.             <div class="exp-item--txt">
  22.                 <div>
  23.                     <div data-aos="fade-right" data-aos-duration="800" data-aos-delay="250"
  24.                     class="aos-init aos-animate">
  25.                         <div>
  26.                             {{ block.settings.title }}
  27.                         </div>
  28.                         <p>
  29.                             {{ block.settings.content }}
  30.                         </p>
  31.                         <span class="arrow-link js-showFullContent">
  32.                             {{ block.settings.link_text }}
  33.                         </span>
  34.                     </div>
  35.                 </div>
  36.             </div>
  37.             <div class="exp-item--img">
  38.                 <div>
  39.                     <img src="{{ block.settings.image_output | img_url: 'master' }}">
  40.                 </div>
  41.             </div>
  42.         </div>
  43.     </div>
  44.     {% endfor %}
  45. </div>
  47. <style>
  48. .section-title{text-align:center;}.exp-content .banner,.case-banner{position:relative;min-height:220px;display:-webkit-box;display:-ms-flexbox;display:flex;background-repeat:no-repeat;background-position:50% 50%;background-size:cover;overflow:hidden}@media(min-width:1200px){.exp-content .banner,.case-banner{min-height:440px}}.exp-content .banner--bg,.case-banner--bg{background-color:#3e495b;position:absolute;width:100%;height:100%;left:0;top:0;background-repeat:no-repeat;background-position:50% 50%;background-size:cover;z-index:1}.exp-content .banner--bg img,.case-banner--bg img{max-width:100%;height:100%;width:100%;-o-object-fit:cover;object-fit:cover}.exp-content .banner-inner-content,.case-banner-inner-content{position:relative;margin:auto;color:#fff;height:100%;font-family:open sans,sans-serif;padding:20px 0;text-align:center;z-index:2}.exp-content .banner--logo,.case-banner--logo{font-size:60px;font-weight:700;margin-bottom:40px}.exp-content .banner--sub,.case-banner--sub{font-size:36px;font-weight:700}.exp-content .banner--text,.case-banner--text{max-width:1100px;font-size:18px;font-family:open sans,sans-serif;margin:0 auto}@media(max-width:991px){.exp-content .banner--text,.case-banner--text{padding:0 30px}}@media(min-width:1200px){.exp-content .banner--text,.case-banner--text{font-size:24px}}.exp-content .banner--text.fieldedge,.case-banner--text.fieldedge{max-width:1280px}.exp-content .banner.mcds .case-banner--text,.case-banner.mcds .case-banner--text{font-size:23px}.exp-result{position:relative;z-index:2}.exp-result-bottom{padding-bottom:20px}.exp-result--title{color:#fff;font-size:26px;margin-bottom:15px;font-weight:700;font-family:open sans,sans-serif}@media(min-width:1200px){.exp-result--title{font-size:52px}}.exp-result--title:after{content:'';width:100%;max-width:500px;display:block;height:2px;background-color:#ffb420;margin:25px auto 40px}.exp-result--subtitle{font-size:21px;font-weight:700;font-family:open sans,sans-serif;margin-bottom:25px}.exp-result-list{margin-top:40px;padding-bottom:40px;padding-left:0;max-width:1000px;margin-left:auto;margin-right:auto}@media(min-width:768px){.exp-result-list{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}}@media(min-width:1200px){.exp-result-list{margin-top:70px}}.exp-result-list__item{margin-bottom:30px;padding:0 20px;position:relative}@media(min-width:768px){.exp-result-list__item{width:33%;max-width:370px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.-wide .exp-result-list__item{max-width:500px}}.exp-result .numbers-cnt--amount{font-size:65px;color:#ffb420;text-align:center;letter-spacing:-2px;font-weight:700;line-height:1;min-height:70px;text-transform:uppercase;font-family:open sans,sans-serif}.exp-result .numbers-cnt--amount.-alt{font-size:28px;line-height:1;letter-spacing:.5px}.exp-result .numbers-cnt--text{font-size:21px;line-height:1.4}.case-bg--dark{position:absolute;left:0;top:0;text-align:center;width:100%;overflow:hidden}.exp-subbottom{background:#0a1932;color:#fff;text-align:center;font-size:20px;line-height:1.4;padding:80px 0}.digital-exp{padding-bottom:0;background-repeat:no-repeat;background-position:50% 0;background-size:100% auto;}.digital-exp--top{padding:40px 0 0;position:relative}@media(min-width:1441px){.digital-exp--top{padding-top:65px}}.digital-exp--top .section-subtitle{margin-bottom:30px}@media(max-width:991px){.exp{padding:0 14px}}@media(min-width:992px){.exp{padding:0 25px}}.exp-full_link{z-index:10;overflow:hidden}.exp-full_link,.exp-full_link:before,.exp-full_link img{position:absolute;height:100%;width:100%;left:0;top:0}.exp-full_link img{-o-object-fit:cover;object-fit:cover;background-color:#484441;-webkit-transition:-webkit-transform .5s;transition:-webkit-transform .5s;transition:transform .5s;transition:transform .5s,-webkit-transform .5s}.exp-full_link:before{background-size:cover;background-repeat:no-repeat;background-position:50% 50%;background-color:#484441;-webkit-transition:-webkit-transform .5s;transition:-webkit-transform .5s;transition:transform .5s;transition:transform .5s,-webkit-transform .5s}.exp-item{min-height:400px;max-height:400px;margin:0 auto 35px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;position:relative;max-width:1455px;padding:0 20px}@media(max-width:767px){.exp-item{-webkit-box-orient:vertical;-webkit-box-direction:reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse;height:auto;min-height:450px}}.exp-item:before{content:'';height:305px;width:305px;max-height:305px;min-width:305px;position:absolute;pointer-events:none;border-style:solid;border-color:#ffb100;z-index:-1;-webkit-transition:-webkit-transform .5s;transition:-webkit-transform .5s;transition:transform .5s;transition:transform .5s,-webkit-transform .5s}@media(max-width:767px){.exp-item:before{z-index:1}}.exp-item:after{content:'';position:absolute;width:100%;height:100%;top:0;left:0;opacity:0;background-color:rgba(0,0,0,.2);pointer-events:none;-webkit-transition:opacity .3s;transition:opacity .3s}@media(min-width:992px){.exp-item:hover:after{opacity:1}.exp-item:hover:before{min-width:40%;max-height:30%!important}.exp-item:hover .exp-full_link:before{-webkit-transform:scale(1.1);transform:scale(1.1)}.exp-item:hover .exp-item--img{-webkit-transform:translate(10px,10px);transform:translate(10px,10px)}.exp-item:hover .exp-item--txt{-webkit-transform:scale(1.05);transform:scale(1.05);width:400px;height:400px;will-change:auto}.exp-item:hover .arrow-link,.exp-item:hover .-even .services-list--more,.-even .exp-item:hover .services-list--more{color:#ffb100;-webkit-transform:scale(1.2) translateX(10px);transform:scale(1.2) translateX(10px)}}.exp-item>div{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-line-pack:center;align-content:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;position:relative;z-index:11;pointer-events:none;color:#fff;}@media(max-width:767px){.exp-item{-webkit-box-orient:vertical;-webkit-box-direction:reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse;height:auto}}@media(min-width:1200px){.exp-item{height:400px;margin-bottom:65px}}@media(max-width:767px){.exp-item--logo{display:block;margin:0 auto}}.exp-item--img{width:50%;-webkit-transition:-webkit-transform .6s;transition:-webkit-transform .6s;transition:transform .6s;transition:transform .6s,-webkit-transform .6s;display:none}@media(min-width:768px){.exp-item--img{width:50%;display:block}}@media(min-width:992px){.exp-item--img{text-align:right}}@media screen and (max-width:1500px){.exp-item--img{width:60%}}@media(max-width:1199px){.exp-item--img{width:67%}}@media(max-width:991px){.exp-item--img{width:50%}}@media(max-width:767px){.exp-item--img{display:none!important;width:calc(100% + 90px);margin-left:-45px}}.exp-item--img>div{max-height:115%}.exp-item--img>div img,.exp-item--img>div .img{max-height:100%;width:auto}@media(max-width:1199px){.exp-item--img>div img,.exp-item--img>div .img{width:auto}}@media(max-width:991px){.exp-item--img>div img,.exp-item--img>div .img{width:auto}}@media(max-width:767px){.exp-item--img>div img,.exp-item--img>div .img{max-width:100%}}.exp-item--txt{max-width:400px;text-align:left;-webkit-transition:-webkit-transform .5s;transition:-webkit-transform .5s;transition:transform .5s;transition:transform .5s,-webkit-transform .5s}@media(max-width:767px){.exp-item--txt{max-width:100%;margin-bottom:15px}}@media(min-width:992px){.exp-item--txt{width:400px;height:400px}}.exp-item--txt p{font-size:24px;font-weight:700;font-family:open sans,sans-serif;line-height:1.2;margin:30px 0}@media(max-width:767px){.exp-item--txt p{font-size:18px;margin:15px 0}}.exp-item .arrow-link,.exp-item .-even .services-list--more,.-even .exp-item .services-list--more{-webkit-transition:all .4s;transition:all .4s}.exp-item .arrow-link:after,.exp-item .-even .services-list--more:after,.-even .exp-item .services-list--more:after{-webkit-transition:background .4s;transition:background .4s}.exp .exp-item:before{border-width:0 0 10px 10px;left:-10px;bottom:-10px}@media(max-width:767px){.exp .exp-item:before{border-width:0 0 6px 6px;left:-6px;bottom:-6px}}@media(min-width:768px){.exp .exp-item{padding-left:130px;padding-right:65px}}@media(max-width:1199px){.exp .exp-item{padding-left:65px}}@media(max-width:991px){.exp .exp-item{padding-left:30px;padding-right:30px}}@media(min-width:768px){.exp:nth-child(odd) .exp-item{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;padding-right:130px;padding-left:65px}}@media(min-width:768px) and (max-width:767px){.exp:nth-child(odd) .exp-item{-webkit-box-orient:vertical;-webkit-box-direction:reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse}}@media(min-width:768px) and (max-width:1199px){.exp:nth-child(odd) .exp-item{padding-right:65px}}@media(min-width:768px) and (max-width:991px){.exp:nth-child(odd) .exp-item{padding-left:30px;padding-right:30px}}@media(min-width:768px){.exp:nth-child(odd) .exp-item:before{border-width:0 10px 10px 0;left:auto;right:-10px;bottom:-10px}}@media(min-width:768px) and (min-width:992px){.exp:nth-child(odd) .exp-item .exp-item--img{text-align:left}}@media(min-width:768px){.exp:nth-child(odd) .exp-item .exp-item--txt{text-align:right}}@media(min-width:768px) and (max-width:767px){.exp:nth-child(odd) .exp-item .exp-item--txt{text-align:left}}@media(min-width:768px){.exp:nth-child(odd) .exp-item:hover .arrow-link,.exp:nth-child(odd) .exp-item:hover .-even .services-list--more,.-even .exp:nth-child(odd) .exp-item:hover .services-list--more{-webkit-transform:scale(1.2) translateX(-10px);transform:scale(1.2) translateX(-10px)}}.exp-content{margin-bottom:80px;border-top:11px solid #008bde;position:relative}.exp .exp-content{display:none;border-top-color:#ffb100}@media(min-width:1200px){.exp .exp-content{margin-top:-66px}}.case-small .exp-content{margin-bottom:0}@media(min-width:1200px){.case-small .exp-content{margin-top:-66px}}.mg-targets .exp-content{display:block}.exp-content--outer{max-width:1455px;margin:0 auto}.exp-content--close{height:60px;width:60px;position:absolute;right:0;top:0;background-color:rgba(255,6,6,.8);z-index:10;cursor:pointer;-webkit-transition:all .3s;transition:all .3s}.exp-content--close:hover{background-color:#1a4d82}.exp-content--close:before,.exp-content--close:after{content:"";width:36px;height:4px;background:#fff;position:absolute;top:50%;left:50%;border-radius:2px;-webkit-transform:translate(-50%,-50%) rotate(45deg);transform:translate(-50%,-50%) rotate(45deg);-webkit-transition:all .2s;transition:all .2s}.exp-content--close:after{-webkit-transform:translate(-50%,-50%) rotate(-45deg);transform:translate(-50%,-50%) rotate(-45deg)}.exp-content .general{background-image:-webkit-gradient(linear,left bottom,left top,color-stop(25%,#e4f0fa),to(#f7fcfe));background-image:linear-gradient(to top,#e4f0fa 25%,#f7fcfe 100%)}.exp-content .banner-small{min-height:260px;-webkit-box-shadow:0 -2px 10px #0d1d37;box-shadow:0 -2px 10px #0d1d37}.exp-content .banner-small .banner--sub{font-size:51px}.exp-content .banner+.text-img{margin-top:-40px}.exp-content--animations{-webkit-transition:all .6s;transition:all .6s;opacity:.1}.exp-content-active .exp-content--animations{opacity:1}.exp-container{max-width:1620px;margin:0 auto}@media (min-width:992px){.exp .aos-init[data-aos="exp-animation"]{-webkit-transition:opacity .5s,-webkit-transform .5s;transition:opacity .5s,-webkit-transform .5s;transition:opacity .5s,transform .5s;transition:opacity .5s,transform .5s,-webkit-transform .5s;opacity:0;-webkit-transform:translateY(50px);transform:translateY(50px)}.exp .aos-init[data-aos="exp-animation"]:before{height:100%;width:100%;max-height:100%;border-width:10px}.exp .aos-init[data-aos="exp-animation"].aos-animate{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}.exp .aos-init[data-aos="exp-animation"].aos-animate:before{height:305px;max-height:305px;width:305px;-webkit-transition:height 1.2s .5s,width 1.2s,min-width .5s,min-height .5s,max-height .5s;transition:height 1.2s .5s,width 1.2s,min-width .5s,min-height .5s,max-height .5s}}
  49. </style>
  51. {% schema %}
  52. {
  53.   "name": "介绍展示卡-类型2",
  54.   "settings": [
  55.     {
  56.        "type": "text",
  57.        "id": "title",
  58.        "label": "标题"
  59.     },
  60.     {
  61.         "type": "richtext",
  62.         "id": "content",
  63.         "label": "内容"
  64.      }
  65.   ],
  66.   "blocks": [
  67.     {
  68.         "name": "Introduce Box",
  69.         "type": "introduce2",
  70.         "settings": [
  71.             {
  72.                 "type": "image_picker",
  73.                 "id": "image_main",
  74.                 "label": "主图"
  75.             },
  76.             {
  77.                 "type": "image_picker",
  78.                 "id": "image_output",
  79.                 "label": "效果图"
  80.             },
  81.            {
  82.                "type": "text",
  83.                "id": "title",
  84.                "label": "标题"
  85.            },
  86.            {
  87.                 "type": "html",
  88.                 "id": "content",
  89.                 "label": "内容"
  90.             },
  91.             {
  92.                 "type": "url",
  93.                 "id": "link",
  94.                 "label": "跳转链接"
  95.             },
  96.             {
  97.                 "type": "text",
  98.                 "id": "link_text",
  99.                 "label": "跳转文案"
  100.             }
  101.         ]
  102.     }
  103.   ],
  104.   "presets": [
  105.     {
  106.       "name": "介绍展示卡-类型2"
  107.     }
  108.   ]
  109. }
  110. {% endschema %}

3. 展示效果

店铺地址： https://asen-practice.myshopify.com 密码：test

测试链接： https://asen-practice.myshopify.com/pages/3d-action
[

](https://player.bilibili.com/player.html?bvid=BV1xB4y127FK)
点击查看【bilibili】

Tips: 如有引用请标注源文章地址

关注我的【小红书】，第一时间掌握更新动态

你的鼓励就是我创作的动力！
zanshang.png