為定價表制作角落色帶粘性-有解無憂

基本上，我有帶角絲帶的價格表。在價格表上，我在懸停時向上滑動過渡。當我將滑鼠懸停在價格表上時，角落色帶會移位。看看我的代碼。我想通過滑動過渡使角落色帶在懸停時變粘。

CSS

.zoom:hover {
  transition: transform .5s ease;
  -webkit-transition: 0.3s;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  transition: transform 300ms;
  transform: translate3d(0, -1%, 0);
}

/* RIBBON CSS */
.container__wrapper {
  left: 0px;
  position: absolute;
  top: 15px;
  height: 141px;
  width: 170px;
  overflow: hidden;
}

.container__ribbon {
  z-index: 100;
 left: -60px;
 position: absolute;
 top: 40px;
 height: 30px;
 width: 230px;
 transform: rotate(-45deg);
 background-color: #FF0000;
 display: flex;
 align-content: center;
 justify-content: center;
 box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
}

.container__ribbon h6 {
  font-size: 16px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: #fff;
  align-self: center !important;
  font-weight: 400;
  padding-top: 0.3em;
}

/*___________________________________________________________ */
/* css for package */

/* SCROLLBARR CSS */
.card {
  border: 0 !important;
}

.scrollbar-dusty-grass::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  background-color: #DAD8D9;
  border-radius: 10px;
}

.scrollbar-dusty-grass::-webkit-scrollbar {
  width: 12px;
  background-color: #F5F5F5;
}

.scrollbar-dusty-grass::-webkit-scrollbar-thumb {
  border-radius: 10px;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.0);
  background-image: -webkit-linear-gradient(330deg, #11A085 0%, #11A085 100%);
  background-image: linear-gradient(120deg, #11A085 0%, #11A085 100%);
}

.bordered-cyan::-webkit-scrollbar-thumb {
  box-shadow: none;
}

.square::-webkit-scrollbar-track {
  border-radius: 0 !important;
}

.square::-webkit-scrollbar-thumb {
  border-radius: 0 !important;
}

.thin::-webkit-scrollbar {
  width: 6px;
}

.example-1 {
  position: relative;
  overflow-y: scroll;
  height: 175px;
}

/* CAROUSEL */

.brderline {
  margin-top: 1rem;
  padding: .5rem;
  border: 1px solid #11A085;

}

/* PACKAGES TITLE */

.packagetitle h4 {
  color: #323232 !important;
  font-size: 15px;
  font-weight: 700;
}

.packagetitle h1 {
  color: #323232 !important;
  font-size: 35px;
  font-weight: 800;
}

.pkpara {
  font-family: 'Circular Std Book';
  font-size: 25px;
  color: #323232 !important;
  font-weight: 100;
  font-size: 20px;
}

/* PACKAGE BOX CSS */

/* .pk1 {
  border: 1px solid #11A085;
} */

.tagimg {
  position: absolute;
  top: 2%;
  left: 0;
  width: 120px !important;
  height: 120px;
}

.tagimg-r {
  position: absolute;
  top: 2%;
  right: 0;
  width: 120px !important;
  height: 120px;
}

.pkg1 h5 {
  font-size: 15px;
  color: #11A085;
}

.pkg1 h2 {
  font-size: 25px;
  color: #323232;
  font-weight: 700;
}

.pkg1 p {
  font-size: 16px;
  color: #8d8d8d;
  text-decoration: line-through;
}

.pkg1 h1 {
  color: #11A085;
  font-size: 45px;
  font-weight: 700;
  margin-bottom: 1rem;
}

ul.pkg-items>li {
  color: #323232;
  list-style: none;
  font-family: Circular Std Medium;
  font-style: normal;
}

ul.pkg-items li::before {
  content: "\2022";
  color: #8d8d8d;
  font-weight: bold;
  display: inline-block;
  width: 1.5rem;
}

.pkgbtn {
  text-align: center;
  margin: 2rem 0;
}

.innerpkgbtn {
  padding: 20px 60px !important;
}

.pkg1 h6 {
  font-size: 14px;
  color: #8d8d8d;
}

.viewmre h4 {
  padding: 1rem 0 !important;
  font-size: 14px;
  text-align: center;
}

.callnchat {
  font-size: 16px;
  text-align: center;
  margin-bottom: 2rem;
}

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">

  <!-- Owl Carousel -->

  <link rel="stylesheet" href="<?php echo BASE_URL; ?>/assets/css/owl.carousel.css">
  <link rel="stylesheet" href="<?php echo BASE_URL; ?>/assets/css/owl.theme.green.css">

  <script src="<?php echo BASE_URL; ?>/assets/js/jquery.min.js" type="text/javascript"></script>
  <script src="<?php echo BASE_URL; ?>/assets/js/owl.carousel.min.js" type="text/javascript"></script>
  
  
  
   <div class="item brderline zoom">
        <div class="pt-2 pb-2 pkg1">
          <div class="pk1">

            <div class="container__wrapper">
              <div class="container__ribbon">
                <h6>Free Delivery Rush</h6>
              </div>
            </div>

            <!-- <img src="assets/img/badgeleft.png" >s -->
            <h5 class="text-center">LOGO PACKAGE</h5>
            <h2 class="text-center">BASIC <br> LOGO PACKAGE</h2>
            <p class="text-center">$339</p>
            <h1 class="text-center">$45.00</h1>

            <div class="card example-1 square scrollbar-dusty-grass square thin">
              <ul class="pkg-items">
                <li>3 Custom Logo Design Concepts</li>
                <li>1 Dedicated Designer</li>
                <li>4 Revisions</li>
                <li>2 hours TAT</li>
                <li>Unique Design Guarantee</li>
                <li>100% Unique Design Guarantee</li>
                <li>100% Satisfaction Guarantee</li>
                <li>100% Money Back Guarantee *</li>
                <li>100% Ownership Rights</li>
              </ul>
            </div>

            <div class="pkgbtn"><button type="button" class="btn innerpkgbtn">ORDER NOW</button></div>
            <h6 class="text-center">$50 Additional For Expedited Services </h6>
            <div class="viewmre">
              <h4><a href="#" style="color: #323232; text-decoration: none;"> VIEW DETAILS</a></h4>
            </div>
            <div class="callnchat">
              <a href="tel:123456789" style="color: #11A085; text-decoration: none; font-family: Circular Std Medium;"><i class="fas fa-phone-square-alt"></i>1·866·268·1794</a>
              &nbsp; <a href="#" style="color: #11A085; text-decoration: none; font-family: Circular Std Medium;"><i class="fas fa-comment-dots"></i>LIVE CHAT</a>
            </div>

          </div>
        </div>
      </div>
  
  
  
  
  
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C OGpamoFVy38MVBnE IbbVYUew OrCXaRkfj" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU 6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-VHvPCCyXqtD5DqJeNxl2dtTyhF78xXNXdkwX1CZeRusQfRKp tA7hAShOK/B/fQ2" crossorigin="anonymous"></script>

<script src='https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js'></script>

uj5u.com熱心網友回復：

絕對

該元素會從正常的檔案流中移除，并且不會在頁面布局中為該元素創建空間。它相對于其最近的定位祖先（如果有）進行定位；否則，它相對于初始包含塊放置。-MDN

由于.container__wrapper是絕對定位的，因此使其相對于也定位并在懸停時移動的父級，例如.item類。請參閱下面的片段：

.zoom:hover {
  transition: transform .5s ease;
  -webkit-transition: 0.3s;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  transition: transform 300ms;
  transform: translate3d(0, -1%, 0);
}


/* RIBBON CSS */

.container__wrapper {
  left: 0px;
  position: absolute;
  top: 0px;
  height: 141px;
  width: 170px;
  overflow: hidden;
}

.item {
  position: relative;
}

.container__ribbon {
  z-index: 100;
  left: -60px;
  position: absolute;
  top: 40px;
  height: 30px;
  width: 230px;
  transform: rotate(-45deg);
  background-color: #FF0000;
  display: flex;
  align-content: center;
  justify-content: center;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
}

.container__ribbon h6 {
  font-size: 16px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: #fff;
  align-self: center !important;
  font-weight: 400;
  padding-top: 0.3em;
}


/*___________________________________________________________ */


/* css for package */


/* SCROLLBARR CSS */

.card {
  border: 0 !important;
}

.scrollbar-dusty-grass::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  background-color: #DAD8D9;
  border-radius: 10px;
}

.scrollbar-dusty-grass::-webkit-scrollbar {
  width: 12px;
  background-color: #F5F5F5;
}

.scrollbar-dusty-grass::-webkit-scrollbar-thumb {
  border-radius: 10px;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.0);
  background-image: -webkit-linear-gradient(330deg, #11A085 0%, #11A085 100%);
  background-image: linear-gradient(120deg, #11A085 0%, #11A085 100%);
}

.bordered-cyan::-webkit-scrollbar-thumb {
  box-shadow: none;
}

.square::-webkit-scrollbar-track {
  border-radius: 0 !important;
}

.square::-webkit-scrollbar-thumb {
  border-radius: 0 !important;
}

.thin::-webkit-scrollbar {
  width: 6px;
}

.example-1 {
  position: relative;
  overflow-y: scroll;
  height: 175px;
}


/* CAROUSEL */

.brderline {
  margin-top: 1rem;
  padding: .5rem;
  border: 1px solid #11A085;
}


/* PACKAGES TITLE */

.packagetitle h4 {
  color: #323232 !important;
  font-size: 15px;
  font-weight: 700;
}

.packagetitle h1 {
  color: #323232 !important;
  font-size: 35px;
  font-weight: 800;
}

.pkpara {
  font-family: 'Circular Std Book';
  font-size: 25px;
  color: #323232 !important;
  font-weight: 100;
  font-size: 20px;
}


/* PACKAGE BOX CSS */


/* .pk1 {
  border: 1px solid #11A085;
} */

.tagimg {
  position: absolute;
  top: 2%;
  left: 0;
  width: 120px !important;
  height: 120px;
}

.tagimg-r {
  position: absolute;
  top: 2%;
  right: 0;
  width: 120px !important;
  height: 120px;
}

.pkg1 h5 {
  font-size: 15px;
  color: #11A085;
}

.pkg1 h2 {
  font-size: 25px;
  color: #323232;
  font-weight: 700;
}

.pkg1 p {
  font-size: 16px;
  color: #8d8d8d;
  text-decoration: line-through;
}

.pkg1 h1 {
  color: #11A085;
  font-size: 45px;
  font-weight: 700;
  margin-bottom: 1rem;
}

ul.pkg-items>li {
  color: #323232;
  list-style: none;
  font-family: Circular Std Medium;
  font-style: normal;
}

ul.pkg-items li::before {
  content: "\2022";
  color: #8d8d8d;
  font-weight: bold;
  display: inline-block;
  width: 1.5rem;
}

.pkgbtn {
  text-align: center;
  margin: 2rem 0;
}

.innerpkgbtn {
  padding: 20px 60px !important;
}

.pkg1 h6 {
  font-size: 14px;
  color: #8d8d8d;
}

.viewmre h4 {
  padding: 1rem 0 !important;
  font-size: 14px;
  text-align: center;
}

.callnchat {
  font-size: 16px;
  text-align: center;
  margin-bottom: 2rem;
}

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">

<!-- Owl Carousel -->

<link rel="stylesheet" href="<?php echo BASE_URL; ?>/assets/css/owl.carousel.css">
<link rel="stylesheet" href="<?php echo BASE_URL; ?>/assets/css/owl.theme.green.css">

<script src="<?php echo BASE_URL; ?>/assets/js/jquery.min.js" type="text/javascript"></script>
<script src="<?php echo BASE_URL; ?>/assets/js/owl.carousel.min.js" type="text/javascript"></script>



<div class="item brderline zoom">

  <div class="pt-2 pb-2 pkg1">
    <div class="pk1">
      <div class="container__wrapper">
        <div class="container__ribbon">
          <h6>Free Delivery Rush</h6>
        </div>
      </div>


      <!-- <img src="assets/img/badgeleft.png" >s -->
      <h5 class="text-center">LOGO PACKAGE</h5>
      <h2 class="text-center">BASIC <br> LOGO PACKAGE</h2>
      <p class="text-center">$339</p>
      <h1 class="text-center">$45.00</h1>

      <div class="card example-1 square scrollbar-dusty-grass square thin">
        <ul class="pkg-items">
          <li>3 Custom Logo Design Concepts</li>
          <li>1 Dedicated Designer</li>
          <li>4 Revisions</li>
          <li>2 hours TAT</li>
          <li>Unique Design Guarantee</li>
          <li>100% Unique Design Guarantee</li>
          <li>100% Satisfaction Guarantee</li>
          <li>100% Money Back Guarantee *</li>
          <li>100% Ownership Rights</li>
        </ul>
      </div>

      <div class="pkgbtn"><button type="button" class="btn innerpkgbtn">ORDER NOW</button></div>
      <h6 class="text-center">$50 Additional For Expedited Services </h6>
      <div class="viewmre">
        <h4><a href="#" style="color: #323232; text-decoration: none;"> VIEW DETAILS</a></h4>
      </div>
      <div class="callnchat">
        <a href="tel:123456789" style="color: #11A085; text-decoration: none; font-family: Circular Std Medium;"><i class="fas fa-phone-square-alt"></i>1·866·268·1794</a> &nbsp;
        <a href="#" style="color: #11A085; text-decoration: none; font-family: Circular Std Medium;"><i class="fas fa-comment-dots"></i>LIVE CHAT</a>
      </div>

    </div>
  </div>
</div>





<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C OGpamoFVy38MVBnE IbbVYUew OrCXaRkfj" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU 6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-VHvPCCyXqtD5DqJeNxl2dtTyhF78xXNXdkwX1CZeRusQfRKp tA7hAShOK/B/fQ2" crossorigin="anonymous"></script>

<script src='https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js'></script>

更多資訊position在這里。

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/425204.html

標籤：html css 引导程序 4

上一篇：MASA Framework - DDD設計（1）

下一篇：為什么我的本地網頁在Github上傳后沒有顯示？