欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

CSS動(dòng)畫在一張卡上可以完美運(yùn)行，但在另一張卡上就不行了？

CSS

我有三張卡，你可以選擇你喜歡的訂閱計(jì)劃，這是一個(gè)frontend mentor . io(https://www . frontend mentor . io/challenges/pricing-component-with-toggle-8 vpwrmic)挑戰(zhàn)，我想在上面添加一些額外的動(dòng)畫。

我想要完成的是:當(dāng)我懸停在左邊(第一張)卡片上時(shí)，我希望它稍微向左瞥一眼，并顯示更多它自己。我這樣做是通過在那張卡上將右邊的填充加倍到70。但是這會(huì)把另外兩張卡推到右邊，我通過增加一個(gè)右邊距來抵消它:35px右邊(第三張)牌。然后用正確的牌反過來。

我的問題是，當(dāng)我懸停在右(第三)張卡片上時(shí)，無論我給左(第一)張卡片增加多少邊距，它都會(huì)移動(dòng)其他兩張卡片。懷疑這可能與父div或其他東西有關(guān)。任何幫助都超級(jí)感謝！

這是家長。包裝紙:

.card-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3px;
}


/* Here's the .card class: */

.card {
  padding: 35px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  border-radius: 10px;
  background-color: #BDD2B6;
  transition: 0.3s ease-in-out;
}


/* Here's the animations:*/

.card:nth-child(1):hover {
  padding-right: 70px;
}

.card:nth-child(1):hover~.card:nth-child(3) {
  margin-right: 35px;
}

.card:nth-child(3):hover {
  padding-left: 70px;
}

.card:nth-child(3):hover~.card:nth-child(1) {
  margin-left: 35px;
}

<div class="wrapper">
  <div class="card" id="card-basic">
    <h2>Basic</h2>
    <p class="price" id="title-basic">$19.99</p>
    <hr>
    <p>500 GB Storage</p>
    <hr>
    <p>2 Users Allowed</p>
    <hr>
    <p>Send up to 3 GB</p>
    <hr>
    <button class="btn1">LEARN MORE</button>
  </div>
  <div class="card" id="card-professional">
    <h2>Professional</h2>
    <p class="price" id="title-professional">$24.99</p>
    <hr>
    <p>1 TB Storage</p>
    <hr>
    <p>5 Users Allowed</p>
    <hr>
    <p>Send up to 10 GB</p>
    <hr>
    <button class="btn2">LEARN MORE</button>
  </div>
  <div class="card" id="card-master">
    <h2>Master</h2>
    <p class="price" id="title-master">$39.99</p>
    <hr>
    <p>2 TB Storage</p>
    <hr>
    <p>10 Users Allowed</p>
    <hr>
    <p>Send up to 20 GB</p>
    <hr>
    <button class="btn3">LEARN MORE</button>
  </div>
</div>

# # #不知道你說的& quot展現(xiàn)更多的自我& quot因?yàn)樗呀?jīng)顯示了，但是為了不影響其他的卡片，你可以使用一個(gè)有百分比寬度的網(wǎng)格來顯示列，動(dòng)畫將只影響懸停的卡片。

我添加了一些樣式，所以& lthr & gt是可見的，而不僅僅是在那里。

body {
  margin: 0;
  padding: 0;
  font-size: 16px;
  box-sizing: border-box;
}

.card-wrapper {
  display: grid;
  grid-template-columns: repeat(3, 33%);
  gap: 3px;
  background-color: #BDD2B622;
}

.card {
  /* Here's the .card class: */
  padding: 2em;
  display: flex;
  justify-content: top;
  align-items: center;
  flex-direction: column;
  border-radius: 0.625em;
  background-color: #BDD2B688;
  transition: 0.3s ease-in-out;
}

.card hr {
  display: block;
  height: 0.125em;
  background-color: #BDD2B6FF;
  border-color: #BDD2B6FF;
  width: 100%;
}


/* Here's the animations:*/

.card:nth-child(1):hover {
  padding-right: 4.375em;
}

.card:nth-child(1):hover~.card:nth-child(3) {
  margin-right: 2em;
}

.card:nth-child(3):hover {
  padding-left: 4.375em;
}

.card:nth-child(3):hover~.card:nth-child(1) {
  margin-left: 2em;
}

<div class='card-wrapper'>
  <div class="card" id="card-basic">
    <h2>Basic</h2>
    <p class="price" id="title-basic">$19.99</p>
    <hr>
    <p>500 GB Storage</p>
    <hr>
    <p>2 Users Allowed</p>
    <hr>
    <p>Send up to 3 GB</p>
    <hr>
    <button class="btn1" type="button">LEARN MORE</button>
  </div>
  <div class="card" id="card-professional">
    <h2>Professional</h2>
    <p class="price" id="title-professional">$24.99</p>
    <hr>
    <p>1 TB Storage</p>
    <hr>
    <p>5 Users Allowed</p>
    <hr>
    <p>Send up to 10 GB</p>
    <hr>
    <button class="btn2" type="button">LEARN MORE</button>
  </div>
  <div class="card" id="card-master">
    <h2>Master</h2>
    <p class="price" id="title-master">$39.99</p>
    <hr>
    <p>2 TB Storage</p>
    <hr>
    <p>10 Users Allowed</p>
    <hr>
    <p>Send up to 20 GB</p>
    <hr>
    <button class="btn3" type="button">LEARN MORE</button>
  </div>
</div>