设为首页收藏本站
切换到窄版

爬行的蜗牛

 找回密码
 立即注册

QQ登录

只需一步，快速开始

搜索
热搜: golang Linux PHP
爬行的蜗牛»论坛 › 个人专用 › 其他相关知识 › HTML+CSS › HTML+CSS实现“纯 CSS 假日主题折叠卡”
返回列表 发新帖
查看: 95|回复: 0

HTML+CSS实现“纯 CSS 假日主题折叠卡”

[复制链接]
yycvip

134

主题

41

回帖

1031

积分

管理员

积分
1031
发表于 2024-11-23 19:11:51 | 显示全部楼层 |阅读模式
111.gif

这些小卡片更像按钮，但它们的悬停效果非常独特。每张卡片在悬停时会“展开”，显示出视频、文字和号召性用语。尽管卡片很小，但却能够容纳大量内容，同时界面响应速度也非常快。
HTML
  1. <body>
  2.     <main class="main">
  3.         
  4.         <section class="card-area">

  6.             <!-- Card: City -->
  7.             <section class="card-section">
  8.                 <div class="card">
  9.                     <div class="flip-card">
  10.                         <div class="flip-card__container">
  11.                             <div class="card-front">
  12.                                 <div class="card-front__tp card-front__tp--city">
  13.                                     <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  14.                                     viewBox="0 0 60 60" style="enable-background:new 0 0 60 60;" xml:space="preserve" class="card-front__icon">
  15.                                <g>
  16.                                    <path d="M49.7,22c-1.1,0-2,0.9-2,2v32.2c0,1.1,0.9,2,2,2s2-0.9,2-2V24C51.7,22.9,50.8,22,49.7,22z"/>
  17.                                    <path d="M13,29.5c1.1,0,2-0.9,2-2s-0.9-2-2-2H5.7v-3h20.8c1.1,0,2-0.9,2-2s-0.9-2-2-2H5.7v-3h20.8c1.1,0,2-0.9,2-2s-0.9-2-2-2H5.7
  18.                                        V7.1h24.8v15.3c0,1.1,0.9,2,2,2s2-0.9,2-2V5.1c0-1.1-0.9-2-2-2H3.7c-1.1,0-2,0.9-2,2v51c0,1.1,0.9,2,2,2s2-0.9,2-2V36.5H13
  19.                                        c1.1,0,2-0.9,2-2s-0.9-2-2-2H5.7v-3H13z"/>
  20.                                    <path d="M58,11.9c0-0.1,0-0.1,0-0.2c0-0.1,0-0.1-0.1-0.2c0-0.1,0-0.1-0.1-0.2c0-0.1-0.1-0.1-0.1-0.2c0,0,0-0.1-0.1-0.1c0,0,0,0,0,0
  21.                                        c0-0.1-0.1-0.1-0.1-0.2c0,0-0.1-0.1-0.1-0.1c0,0-0.1-0.1-0.1-0.1c-0.1,0-0.1-0.1-0.2-0.1c0,0-0.1-0.1-0.2-0.1
  22.                                        c-0.1,0-0.1-0.1-0.2-0.1c-0.1,0-0.1,0-0.2-0.1c-0.1,0-0.1,0-0.2-0.1c0,0-0.1,0-0.1,0c-0.1,0-0.2,0-0.2,0c0,0,0,0,0,0
  23.                                        c0,0-0.1,0-0.1,0c-0.1,0-0.2,0-0.2,0c-0.1,0-0.1,0-0.2,0c-0.1,0-0.1,0-0.2,0.1c-0.1,0-0.1,0.1-0.2,0.1c0,0-0.1,0-0.1,0.1l-12.6,7.8
  24.                                        c0,0,0,0,0,0c-0.1,0-0.1,0.1-0.2,0.1c0,0-0.1,0.1-0.1,0.1c0,0-0.1,0.1-0.1,0.1c0,0-0.1,0.1-0.1,0.2c0,0.1-0.1,0.1-0.1,0.2
  25.                                        c0,0.1-0.1,0.1-0.1,0.2c0,0.1,0,0.1-0.1,0.2c0,0.1,0,0.1-0.1,0.2c0,0.1,0,0.1,0,0.2c0,0.1,0,0.1,0,0.2c0,0,0,0,0,0v5.4H22.1
  26.                                        c-1.1,0-2,0.9-2,2v28.9c0,1.1,0.9,2,2,2s2-0.9,2-2V29.3h17.3v26.9c0,1.1,0.9,2,2,2s2-0.9,2-2V21l8.6-5.3v40.5c0,1.1,0.9,2,2,2
  27.                                        s2-0.9,2-2V12.1C58,12,58,12,58,11.9z"/>
  28.                                    <path d="M28,31L28,31c-1.1,0-2,0.9-2,2s0.9,2,2,2s2-0.9,2-2S29.1,31,28,31z"/>
  29.                                    <path d="M33.5,31L33.5,31c-1.1,0-2,0.9-2,2s0.9,2,2,2c1.1,0,2-0.9,2-2S34.6,31,33.5,31z"/>
  30.                                    <path d="M28,36L28,36c-1.1,0-2,0.9-2,2s0.9,2,2,2s2-0.9,2-2S29.1,36,28,36z"/>
  31.                                    <path d="M33.5,36L33.5,36c-1.1,0-2,0.9-2,2s0.9,2,2,2c1.1,0,2-0.9,2-2S34.6,36,33.5,36z"/>
  32.                                </g>
  33.                                </svg>

  35.                                <h2 class="card-front__heading">
  36.                                 City break
  37.                             </h2>
  38.                             <p class="card-front__text-price">
  39.                                 From £29
  40.                             </p>
  41.                                 </div>

  43.                                 <div class="card-front__bt">
  44.                                     <p class="card-front__text-view card-front__text-view--city">
  45.                                         View me
  46.                                     </p>
  47.                                 </div>
  48.                             </div>
  49.                             <div class="card-back">
  50.                                 <video class="video__container" autoplay muted loop>
  51.                                     <source class="video__media" src="https://player.vimeo.com/external/370331493.sd.mp4?s=e90dcaba73c19e0e36f03406b47bbd6992dd6c1c&profile_id=139&oauth2_token_id=57447761" type="video/mp4">
  52.                                 </video>
  53.                             </div>
  54.                         </div>
  55.                     </div>

  57.                     <div class="inside-page">
  58.                         <div class="inside-page__container">
  59.                             <h3 class="inside-page__heading inside-page__heading--city">
  60.                                 For urban lovers
  61.                             </h3>
  62.                             <p class="inside-page__text">
  63.                                As cities never sleep, there are always something going on, no matter what time!
  64.                             </p>
  65.                             <a href="#" class="inside-page__btn inside-page__btn--city">View deals</a>
  66.                         </div>
  67.                     </div>
  68.                 </div>
  69.             </section>

  71.             <!-- Card: Ski -->
  72.             <section class="card-section">
  73.                 <div class="card">
  74.                     <div class="flip-card">
  75.                         <div class="flip-card__container">
  76.                             <div class="card-front">
  77.                                 <div class="card-front__tp card-front__tp--ski">
  78.                                     <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  79.                                     viewBox="0 0 60 60" style="enable-background:new 0 0 60 60;" xml:space="preserve" class="card-front__icon">
  80.                                <g>
  81.                                    <path d="M58.8,54.5L38.5,19.3c-0.4-0.6-1-1-1.7-1s-1.4,0.4-1.7,1L14.8,54.5c-0.4,0.6-0.4,1.4,0,2c0.4,0.6,1,1,1.7,1h40.6
  82.                                        c0.7,0,1.4-0.4,1.7-1C59.2,55.9,59.2,55.1,58.8,54.5z M36.8,24.3l5.8,10c-0.5-0.2-1.1-0.3-1.7-0.3c-2.5,0-3.7,1.5-4.6,2.5
  83.                                        c-0.7,0.9-1,1.1-1.5,1.1s-0.8-0.2-1.5-1.1c-0.6-0.7-1.3-1.5-2.4-2.1L36.8,24.3z M20,53.5l8.9-15.4c0.5,0,0.7,0.3,1.4,1.1
  84.                                        c0.8,1,2.1,2.5,4.6,2.5s3.7-1.5,4.6-2.5c0.7-0.9,1-1.1,1.5-1.1c0.5,0,0.8,0.2,1.5,1.1c0.8,1,2.1,2.5,4.5,2.5l6.8,11.8H20z"/>
  85.                                    <path d="M14.7,51.5c1.1,0,2-0.9,2-2s-0.9-2-2-2H6.4l9.1-15.7c0.6,0.6,1.5,1.3,2.9,1.3c1.8,0,2.8-1.2,3.3-1.8
  86.                                        c0.1-0.1,0.2-0.2,0.3-0.3c0.1,0.1,0.2,0.2,0.3,0.3c0.5,0.6,1.5,1.8,3.3,1.8c1.1,0,2-0.9,2-2c0-1.1-0.9-2-1.9-2
  87.                                        c-0.1-0.1-0.2-0.2-0.3-0.4c-0.5-0.6-1.5-1.8-3.3-1.8c-1.8,0-2.8,1.2-3.3,1.8c-0.1,0.1-0.2,0.2-0.3,0.3c-0.1-0.1-0.2-0.2-0.3-0.3
  88.                                        c-0.1-0.2-0.3-0.4-0.5-0.6l5.7-9.9l3.8,6.6c0.6,1,1.8,1.3,2.7,0.7c1-0.6,1.3-1.8,0.7-2.7L25,13.2c-0.4-0.6-1-1-1.7-1
  89.                                        s-1.4,0.4-1.7,1l-8.4,14.5c-0.1,0.1-0.2,0.3-0.3,0.4L1.2,48.5c0,0,0,0.1,0,0.1c0,0.1-0.1,0.1-0.1,0.2c0,0.1,0,0.1-0.1,0.2
  90.                                        c0,0.1,0,0.1,0,0.2c0,0.1,0,0.1,0,0.2c0,0,0,0.1,0,0.1c0,0,0,0,0,0.1c0,0.1,0,0.1,0,0.2c0,0.1,0,0.1,0,0.2C1,50,1,50,1,50.1
  91.                                        c0,0.1,0,0.1,0.1,0.2c0,0.1,0.1,0.1,0.1,0.2c0,0.1,0.1,0.1,0.1,0.2c0,0.1,0.1,0.1,0.1,0.2c0,0,0.1,0.1,0.1,0.1c0,0,0.1,0.1,0.1,0.1
  92.                                        c0.1,0,0.1,0.1,0.2,0.1c0,0,0,0,0.1,0c0,0,0.1,0,0.1,0c0.1,0.1,0.2,0.1,0.3,0.1c0,0,0.1,0,0.1,0c0.1,0,0.3,0.1,0.5,0.1c0,0,0,0,0,0
  93.                                        c0,0,0,0,0,0c0,0,0,0,0,0H14.7z"/>
  94.                                    <path d="M40.7,12.3h3.1l-2.2,2.2c-0.6,0.6-0.6,1.5,0,2.1c0.3,0.3,0.7,0.4,1.1,0.4s0.8-0.1,1.1-0.4l2.2-2.2v3.1
  95.                                        c0,0.8,0.7,1.5,1.5,1.5s1.5-0.7,1.5-1.5v-3.1l2.2,2.2c0.3,0.3,0.7,0.4,1.1,0.4s0.8-0.1,1.1-0.4c0.6-0.6,0.6-1.5,0-2.1l-2.2-2.2h3.1
  96.                                        c0.8,0,1.5-0.7,1.5-1.5s-0.7-1.5-1.5-1.5h-3.1l2.2-2.2c0.6-0.6,0.6-1.5,0-2.1c-0.6-0.6-1.5-0.6-2.1,0L49,7.2V4
  97.                                        c0-0.8-0.7-1.5-1.5-1.5S46,3.2,46,4v3.1l-2.2-2.2c-0.6-0.6-1.5-0.6-2.1,0c-0.6,0.6-0.6,1.5,0,2.1l2.2,2.2h-3.1
  98.                                        c-0.8,0-1.5,0.7-1.5,1.5S39.9,12.3,40.7,12.3z"/>
  99.                                </g>
  100.                                </svg>
  101.                                                <h2 class="card-front__heading">
  102.                                                    Ski trip
  103.                                                </h2>
  104.                                                <p class="card-front__text-price">
  105.                                                    From £199
  106.                                                </p>
  107.                                 </div>

  109.                                 <div class="card-front__bt">
  110.                                     <p class="card-front__text-view card-front__text-view--ski">
  111.                                         View me
  112.                                     </p>
  113.                                 </div>
  114.                             </div>

  116.                             <div class="card-back">
  117.                                 <video class="video__container" autoplay muted loop>
  118.                                     <source class="video__media" src="https://player.vimeo.com/external/195913085.sd.mp4?s=7c12f7a83de62a8900fd2ae049297070b9bc8a54&profile_id=164&oauth2_token_id=574477611" type="video/mp4">
  119.                                 </video>
  120.                             </div>
  121.                         </div>
  122.                     </div>

  124.                     <div class="inside-page">
  125.                         <div class="inside-page__container">
  126.                             <h3 class="inside-page__heading inside-page__heading--ski">
  127.                                 For snow lovers
  128.                             </h3>
  129.                             <p class="inside-page__text">
  130.                                Love snow? Why not take up exciting ski-in sessions and hit the slope?
  131.                             </p>
  132.                             <a href="#" class="inside-page__btn inside-page__btn--ski">View deals</a>
  133.                         </div>
  134.                     </div>
  135.                 </div>
  136.             </section>

  138.             <!-- Card: Beach -->
  139.             <section class="card-section">
  140.                 <div class="card">
  141.                     <div class="flip-card">
  142.                         <div class="flip-card__container">
  143.                             <div class="card-front">
  144.                                 <div class="card-front__tp card-front__tp--beach">
  145.                                     <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  146.                                     viewBox="0 0 60 60" style="enable-background:new 0 0 60 60;" xml:space="preserve" class="card-front__icon">
  147.                                <path d="M57.2,28h-7.4c-0.4-4-2-7.7-4.4-10.6l3.2-3.2c0.8-0.8,0.8-2,0-2.8c-0.8-0.8-2-0.8-2.8,0l-3.2,3.2c-3-2.4-6.6-4-10.6-4.4V2.8
  148.                                    c0-1.1-0.9-2-2-2s-2,0.9-2,2v7.4c-4,0.4-7.7,2-10.6,4.4l-3.2-3.2c-0.8-0.8-2-0.8-2.8,0c-0.8,0.8-0.8,2,0,2.8l3.2,3.2
  149.                                    c-2.4,3-4,6.6-4.4,10.6H2.8c-1.1,0-2,0.9-2,2s0.9,2,2,2h7.4c0.4,4,2,7.7,4.4,10.6l-3.2,3.2c-0.8,0.8-0.8,2,0,2.8
  150.                                    c0.4,0.4,0.9,0.6,1.4,0.6s1-0.2,1.4-0.6l3.2-3.2c3,2.4,6.6,4,10.6,4.4v7.4c0,1.1,0.9,2,2,2s2-0.9,2-2v-7.4c4-0.4,7.7-2,10.6-4.4
  151.                                    l3.2,3.2c0.4,0.4,0.9,0.6,1.4,0.6s1-0.2,1.4-0.6c0.8-0.8,0.8-2,0-2.8l-3.2-3.2c2.4-3,4-6.6,4.4-10.6h7.4c1.1,0,2-0.9,2-2
  152.                                    S58.3,28,57.2,28z M30,45.9c-8.8,0-15.9-7.2-15.9-15.9c0-8.8,7.2-15.9,15.9-15.9c8.8,0,15.9,7.2,15.9,15.9
  153.                                    C45.9,38.8,38.8,45.9,30,45.9z"/>
  154.                                </svg>
  155.                               
  156.                                                <h2 class="card-front__heading">
  157.                                                    Beach time
  158.                                                </h2>
  159.                                                <p class="card-front__text-price">
  160.                                                    From £229
  161.                                                </p>
  162.                                 </div>

  164.                                 <div class="card-front__bt">
  165.                                     <p class="card-front__text-view card-front__text-view--beach">
  166.                                         View me
  167.                                     </p>
  168.                                 </div>
  169.                             </div>
  170.                             <div class="card-back">
  171.                                 <video class="video__container" autoplay muted loop>
  172.                                     <source class="video__media" src="https://player.vimeo.com/external/332588783.sd.mp4?s=cab1817146dd72daa6346a1583cc1ec4d9e677c7&profile_id=139&oauth2_token_id=57447761" type="video/mp4">
  173.                                 </video>
  174.                             </div>
  175.                         </div>
  176.                     </div>

  178.                     <div class="inside-page">
  179.                         <div class="inside-page__container">
  180.                             <h3 class="inside-page__heading inside-page__heading--beach">
  181.                                 For sun lovers
  182.                             </h3>
  183.                             <p class="inside-page__text">
  184.                                Relax and get sun-kissed tan in the sea or take up surfting for an adventure!
  185.                             </p>
  186.                             <a href="#" class="inside-page__btn inside-page__btn--beach">View deals</a>
  187.                         </div>
  188.                     </div>
  189.                 </div>
  190.             </section>

  192.             <!-- Card: Camping -->
  193.             <section class="card-section">
  194.                 <div class="card">
  195.                     <div class="flip-card">
  196.                         <div class="flip-card__container">
  197.                             <div class="card-front">
  198.                                 <div class="card-front__tp card-front__tp--camping">
  199.                                     <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  200.                                     viewBox="0 0 60 60" style="enable-background:new 0 0 60 60;" xml:space="preserve" class="card-front__icon">
  201.                                <path d="M57,52.1c0-0.4-0.1-0.7-0.3-1.1l-6.3-10.8L32.4,9l2.3-4c0.6-1,0.2-2.2-0.7-2.7c-1-0.6-2.2-0.2-2.7,0.7L30,5.2L28.7,3
  202.                                    c-0.6-1-1.8-1.3-2.7-0.7c-1,0.6-1.3,1.8-0.7,2.7l2.3,4l-18,31.1L3.3,51C3.1,51.3,3,51.7,3,52.1c0,0.4,0.1,0.7,0.3,1
  203.                                    c0.4,0.6,1,1,1.7,1h50c0.7,0,1.4-0.4,1.7-1C56.9,52.8,57,52.4,57,52.1z M34.7,49.8C34.2,50,32.1,50,30,50s-4.2,0-4.7-0.2
  204.                                    c-0.2-0.5-0.2-2.1-0.2-3.6l0-4.3c0-2.7,2.2-4.9,4.9-4.9s4.9,2.2,4.9,4.9l0,4.3C34.9,47.7,34.9,49.3,34.7,49.8z M13.1,42.1L28,16.5
  205.                                    v16.7c-3.9,0.9-6.9,4.4-6.9,8.6l0,4.3c0,1.7,0,2.9,0.2,4H8.5L13.1,42.1z M38.7,50.1c0.2-1,0.2-2.3,0.2-4l0-4.3
  206.                                    c0-4.2-2.9-7.7-6.9-8.6V16.5l15,25.7l4.6,7.9H38.7z"/>
  207.                                </svg>
  208.                                                <h2 class="card-front__heading">
  209.                                                    Camping trek
  210.                                                </h2>
  211.                                                <p class="card-front__text-price">
  212.                                                    From £129
  213.                                                </p>
  214.                                 </div>

  216.                                 <div class="card-front__bt">
  217.                                     <p class="card-front__text-view card-front__text-view--camping">
  218.                                         View me
  219.                                     </p>
  220.                                 </div>
  221.                             </div>
  222.                             <div class="card-back">
  223.                                 <video class="video__container" autoplay muted loop>
  224.                                     <source class="video__media" src="https://player.vimeo.com/external/180185916.sd.mp4?s=c893e4770f87b00e0d6b5a1de138b01b02aaa085&profile_id=164&oauth2_token_id=57447761" type="video/mp4">
  225.                                 </video>
  226.                             </div>
  227.                         </div>
  228.                     </div>

  230.                     <div class="inside-page">
  231.                         <div class="inside-page__container">
  232.                             <h3 class="inside-page__heading inside-page__heading--camping">
  233.                                 For nature lovers
  234.                             </h3>
  235.                             <p class="inside-page__text">
  236.                                Get your boots on for some hiking and explore all the beautiful scenery of nature!
  237.                             </p>
  238.                             <a href="#" class="inside-page__btn inside-page__btn--camping">View deals</a>
  239.                         </div>
  240.                     </div>
  241.                 </div>
  242.             </section>
  243.         </section>
  244.         <footer class="footer">
  245.             <p class="footer-text">&copy; 2021 Created by Maza designDev</p>
  246.           </footer>
  247.     </main>
  248. </body>
  249. </html>
复制代码
CSS
  1. /* CSS reset */
  2. *,
  3. *::after,
  4. *::before {
  5.   box-sizing: inherit;
  6.   margin: 0;
  7.   padding: 0;
  8. }

  10. html { font-size: 62.5%; }

  12. body {
  13.   box-sizing: border-box;
  14.   font-family: 'Open Sans', sans-serif;
  15.   position: relative;
  16. }

  18. /* Typography =======================*/

  20. /* Headings */

  22. /* Main heading for card's front cover */
  23. .card-front__heading {
  24.   font-size: 1.5rem;
  25.   margin-top: .25rem;
  26. }

  28. /* Main heading for inside page */
  29. .inside-page__heading {
  30.   padding-bottom: 1rem;
  31.   width: 100%;
  32. }

  34. /* Mixed */

  36. /* For both inside page's main heading and 'view me' text on card front cover */
  37. .inside-page__heading,
  38. .card-front__text-view {
  39.   font-size: 1.3rem;
  40.   font-weight: 800;
  41.   margin-top: .2rem;
  42. }

  44. .inside-page__heading--city,
  45. .card-front__text-view--city { color: #ff62b2; }

  47. .inside-page__heading--ski,
  48. .card-front__text-view--ski { color: #2aaac1; }

  50. .inside-page__heading--beach,
  51. .card-front__text-view--beach { color: #fa7f67; }

  53. .inside-page__heading--camping,
  54. .card-front__text-view--camping { color: #00b97c; }

  56. /* Front cover */

  58. .card-front__tp { color: #fafbfa; }

  60. /* For pricing text on card front cover */
  61. .card-front__text-price {
  62.   font-size: 1.2rem;
  63.   margin-top: -.2rem;
  64. }

  66. /* Back cover */

  68. /* For inside page's body text */
  69. .inside-page__text {
  70.   color: #333;
  71. }

  73. /* Icons ===========================================*/

  75. .card-front__icon {
  76.   fill: #fafbfa;
  77.   font-size: 3vw;
  78.   height: 3.25rem;
  79.   margin-top: -.5rem;
  80.   width: 3.25rem;
  81. }

  83. /* Buttons =================================================*/

  85. .inside-page__btn {
  86.   background-color: transparent;
  87.   border: 3px solid;
  88.   border-radius: .5rem;
  89.   font-size: 1.2rem;
  90.   font-weight: 600;
  91.   margin-top: 2rem;
  92.   overflow: hidden;
  93.   padding: .7rem .75rem;
  94.   position: relative;
  95.   text-decoration: none;
  96.   transition: all .3s ease;
  97.   width: 90%;
  98.   z-index: 10;
  99. }

  101. .inside-page__btn::before {
  102.   content: "";
  103.   height: 100%;
  104.   left: 0;
  105.   position: absolute;
  106.   top: 0;
  107.   transform: scaleY(0);
  108.   transition: all .3s ease;
  109.   width: 100%;
  110.   z-index: -1;
  111. }

  113. .inside-page__btn--city {
  114.   border-color: #ff40a1;
  115.   color: #ff40a1;
  116. }

  118. .inside-page__btn--city::before {
  119.   background-color: #ff40a1;
  120. }

  122. .inside-page__btn--ski {
  123.   border-color: #279eb2;
  124.   color: #279eb2;
  125. }

  127. .inside-page__btn--ski::before {
  128.   background-color: #279eb2;
  129. }

  131. .inside-page__btn--beach {
  132.   border-color: #fa7f67;
  133.   color: #fa7f67;
  134. }

  136. .inside-page__btn--beach::before {
  137.   background-color: #fa7f67;
  138. }

  140. .inside-page__btn--camping {
  141.   border-color: #00b97d;
  142.   color: #00b97d;
  143. }

  145. .inside-page__btn--camping::before {
  146.   background-color: #00b97d;
  147. }

  149. .inside-page__btn:hover {
  150.   color: #fafbfa;
  151. }

  153. .inside-page__btn:hover::before {
  154.   transform: scaleY(1);
  155. }

  157. /* Layout Structure=========================================*/

  159. .main {
  160.   background: linear-gradient(
  161.     to bottom right,
  162.     #eee8dd,
  163.     #e3d9c6
  164.   );
  165.   display: flex;
  166.   flex-direction: column;
  167.   justify-content: center;
  168.   height: 100vh;
  169.   width: 100%;
  170. }

  172. /* Container to hold all cards in one place */
  173. .card-area {
  174.   align-items: center;
  175.   display: flex;
  176.   flex-wrap: nowrap;
  177.   height: 100%;
  178.   justify-content: space-evenly;
  179.   padding: 1rem;
  180. }

  182. /* Card ============================================*/

  184. /* Area to hold an individual card */
  185. .card-section {
  186.   align-items: center;
  187.   display: flex;
  188.   height: 100%;
  189.   justify-content: center;
  190.   width: 100%;
  191. }

  193. /* A container to hold the flip card and the inside page */
  194. .card {
  195.   background-color: rgba(0,0,0, .05);
  196.   box-shadow: -.1rem 1.7rem 6.6rem -3.2rem rgba(0,0,0,0.5);
  197.   height: 15rem;
  198.   position: relative;
  199.   transition: all 1s ease;
  200.   width: 15rem;
  201. }

  203. /* Flip card - covering both the front and inside front page */

  205. /* An outer container to hold the flip card. This excludes the inside page */
  206. .flip-card {
  207.   height: 15rem;
  208.   perspective: 100rem;
  209.   position: absolute;
  210.   right: 0;
  211.   transition: all 1s ease;
  212.   visibility: hidden;
  213.   width: 15rem;
  214.   z-index: 100;
  215. }

  217. /* The outer container's visibility is set to hidden. This is to make everything within the container NOT set to hidden  */
  218. /* This is done so content in the inside page can be selected */
  219. .flip-card > * {
  220.   visibility: visible;
  221. }

  223. /* An inner container to hold the flip card. This excludes the inside page */
  224. .flip-card__container {
  225.   height: 100%;
  226.   position: absolute;
  227.   right: 0;
  228.   transform-origin: left;
  229.   transform-style: preserve-3d;
  230.   transition: all 1s ease;
  231.   width: 100%;
  232. }

  234. .card-front,
  235. .card-back {
  236.   backface-visibility: hidden;
  237.   height: 100%;
  238.   left: 0;
  239.   position: absolute;
  240.   top: 0;
  241.   width: 100%;
  242. }

  244. /* Styling for the front side of the flip card */

  246. /* container for the front side */
  247. .card-front {
  248.   background-color: #fafbfa;
  249.   height: 15rem;
  250.   width: 15rem;
  251. }

  253. /* Front side's top section */
  254. .card-front__tp {
  255.   align-items: center;
  256.   clip-path: polygon(0 0, 100% 0, 100% 90%, 57% 90%, 50% 100%, 43% 90%, 0 90%);
  257.   display: flex;
  258.   flex-direction: column;
  259.   height: 12rem;
  260.   justify-content: center;
  261.   padding: .75rem;
  262. }

  264. .card-front__tp--city {
  265.   background: linear-gradient(
  266.     to bottom,
  267.     #ff73b9,
  268.     #ff40a1
  269.   );
  270. }

  272. .card-front__tp--ski {
  273.   background: linear-gradient(
  274.     to bottom,
  275.     #47c2d7,
  276.     #279eb2
  277.   );
  278. }

  280. .card-front__tp--beach {
  281.   background: linear-gradient(
  282.     to bottom,
  283.     #fb9b88,
  284.     #f86647
  285.   );
  286. }

  288. .card-front__tp--camping {
  289.   background: linear-gradient(
  290.     to bottom,
  291.     #00db93,
  292.     #00b97d
  293.   );
  294. }

  296. /* Front card's bottom section */
  297. .card-front__bt {
  298.   align-items: center;
  299.   display: flex;
  300.   justify-content: center;
  301. }

  303. /* Styling for the back side of the flip card */

  305. .card-back {
  306.   background-color: #fafbfa;
  307.   transform: rotateY(180deg);
  308. }

  310. /* Specifically targeting the <video> element */
  311. .video__container {
  312.   clip-path: polygon(0% 0%, 100% 0%, 90% 50%, 100% 100%, 0% 100%);
  313.   height: auto;
  314.   min-height: 100%;
  315.   object-fit: cover;
  316.   width: 100%;
  317. }

  319. /* Inside page */

  321. .inside-page {
  322.   background-color: #fafbfa;
  323.   box-shadow: inset 20rem 0px 5rem -2.5rem rgba(0,0,0,0.25);
  324.   height: 100%;
  325.   padding: 1rem;
  326.   position: absolute;
  327.   right: 0;
  328.   transition: all 1s ease;
  329.   width: 15rem;
  330.   z-index: 1;
  331. }

  333. .inside-page__container {
  334.   align-items: center;
  335.   display: flex;
  336.   flex-direction: column;
  337.   height: 100%;
  338.   text-align: center;
  339.   width: 100%;
  340. }

  342. /* Functionality ====================================*/

  344. /* This is to keep the card centered (within its container) when opened */
  345. .card:hover {
  346.   box-shadow:
  347.   -.1rem 1.7rem 6.6rem -3.2rem rgba(0,0,0,0.75);
  348.   width: 30rem;
  349. }

  351. /* When the card is hovered, the flip card container will rotate */
  352. .card:hover .flip-card__container {
  353.   transform: rotateY(-180deg);
  354. }

  356. /* When the card is hovered, the shadow on the inside page will shrink to the left */
  357. .card:hover .inside-page {
  358.   box-shadow: inset 1rem 0px 5rem -2.5rem rgba(0,0,0,0.1);
  359. }

  361. /* Footer ====================================*/

  363. .footer {
  364.   background-color: #333;
  365.    margin-top: 3rem;
  366.   padding: 1rem 0;
  367.   width: 100%;
  368. }

  370. .footer-text {
  371.   color: #fff;
  372.   font-size: 1.2rem;
  373.   text-align: center;
  374. }
复制代码


回复

举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表