卡片悬停特效

下载代码

html

css

分享到微信朋友圈

html

<section class="section-boxs">
  <div class="card starter">
    <div class="head">
	    Starter
    </div>
    <div class="ticket">$5.90</div>
    <div class="body">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
        magna
        aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat.
      </p>
      <button class="btn">Order Now</button>
    </div>
  </div>
  <div class="card standard">
    <div class="head">
      Standard
    </div>
    <div class="ticket">$10.50</div>
    <div class="body">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
        magna
        aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat.
      </p>
      <button class="btn">Order Now</button>
    </div>
  </div>
  <div class="card premium">
    <div class="head">
      Premium
    </div>
    <div class="ticket">$15.90</div>
    <div class="body">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
        magna
        aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat.
      </p>
      <button class="btn">Order Now</button>
    </div>
  </div>
</section>

css

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap');

:root {
  --ticket-height: 60px;
  --color-blue: lightblue;
  --color-orange: salmon;
  --color-green: greenyellow;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #F1F1F1;
  font-family: 'Open Sans', sans-serif;
  background-image: linear-gradient(-225deg, #2CD8D5 0%, #C5C1FF 56%, #FFBAC3 100%);
}

.section-boxs {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 2rem 1.5rem;
}

.section-boxs .card {
  width: 32%;
  text-align: center;
  position: relative;
  max-width: 300px;
}

.section-boxs .card .head,
.section-boxs .card .body {
  background-color: #FFF;
  padding: 1.5rem 1rem;
}

.section-boxs .card .head {
  font-weight: bold;
  font-size: 1.2rem;
  text-transform: uppercase;
  transform: translateY(30px);
  transition: transform .3s linear;
  border-bottom: 1px solid #F2F2F2;
}
.section-boxs .card:hover .head {
  transform: translateY(0);
  box-shadow: 0 -5px 10px rgba(0, 0, 0, .1);
}

.section-boxs .card .ticket {
  color: #FFF;
  width: 80%;
  margin: 0 auto;
  padding: 1rem;
  font-size: 1.4rem;
  font-weight: bold;
  height: var(--ticket-height);
  box-shadow: inset 0px 6px 6px -5px rgba(0, 0, 0, .25),
              inset 0px -6px 6px -5px rgba(0, 0, 0, .25);
}
.section-boxs .starter .ticket {
  background-color: var(--color-green);
}
.section-boxs .standard .ticket {
  background-color: var(--color-blue);
}
.section-boxs .premium .ticket {
  background-color: var(--color-orange);
}

.section-boxs .card .body {
  transform: translateY(-30px);
  transition: transform .3s linear;
}
.section-boxs .card:hover .body {
  transform: translateY(0);
  box-shadow: 0 5px 10px rgba(0, 0, 0, .1);
}

.section-boxs .card p {
  font-size: .95rem;
  color: #333;
}
.section-boxs .card .btn {
  margin-top: 1.5rem;
  padding: .6rem 1rem;
  outline: none;
  font-size: .8rem;
  font-family: 'Open Sans', sans-serif;
  font-weight: bold;
  min-width: 150px;
  border: 1px solid #555;
  background-color: #555;
  color: #EEE;
  cursor: pointer;
  transition: all .2s linear;
}
.section-boxs .card .btn:hover {
  background-color: transparent;
  color: #555;
}

@media screen and (max-width: 750px) {
  .section-boxs {
    justify-content: space-around;
  }
  .section-boxs .card {
    width: 45%;
  }
}

@media screen and (max-width: 550px) {
  .section-boxs .card {
    width: 95%;
  }
}

JavaScript

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg