css旅游订票卡片样式布局!!附源码!!

<!DOCTYPE html><htmllang="en" ><head>  <metacharset="UTF-8">  <title>css旅游订票卡片样式布局</title>  <linkrel='stylesheet'href='https://fonts.googleapis.com/css?family=Playfair+Display:700|Raleway:500.700'><linkrel='stylesheet'href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css'>    <linkrel="stylesheet"href="./style.css"></head><body><!-- partial:index.partial.html --><divclass="container">  <divclass="panel">    <divclass="ring">      <divclass="card card1"></div>      <divclass="border">        <pclass="title">Brazil</p>        <divclass="slide">          <h6class="para">Latest Deals from Heathrow</h6>          <divclass="line">            <h6class="para">OUT</h6> <iclass="fa fa-plane"aria-hidden="true"></i>            <h6class="para">£849</h6>          </div>          <divclass="line">            <h6class="para">RTN</h6> <iclass="fa fa-plane"aria-hidden="true"></i>            <h6class="para">£659</h6>          </div>        </div>      </div>    </div>  </div>  <divclass="panel">    <divclass="ring">      <divclass="card card2"></div>      <divclass="border">        <pclass="title">Belize</p>        <divclass="slide">          <h6class="para">Latest Deals from Heathrow</h6>          <divclass="line">            <h6class="para">OUT</h6> <iclass="fa fa-plane"aria-hidden="true"></i>            <h6class="para">£999</h6>          </div>          <divclass="line">            <h6class="para">RTN</h6> <iclass="fa fa-plane"aria-hidden="true"></i>            <h6class="para">£745</h6>          </div>        </div>      </div>    </div>  </div>  <divclass="panel">    <divclass="ring">      <divclass="card card3"></div>      <divclass="border">        <pclass="title">Egypt</p>        <divclass="slide">          <h6class="para">Latest Deals from Heathrow</h6>          <divclass="line">            <h6class="para">OUT</h6> <iclass="fa fa-plane"aria-hidden="true"></i>            <h6class="para">£399</h6>          </div>          <divclass="line">            <h6class="para">RTN</h6> <iclass="fa fa-plane"aria-hidden="true"></i>            <h6class="para">£257</h6>          </div>        </div>      </div>    </div>  </div></div><!-- partial --></body></html>

body {  margin: 0;  background-color: #2e2e31;  display: flex;  align-items: center;  height: 100vh;  width: 100vw;}.container {  height: 100vh;  width: 100vw;  max-height: 600px;  max-width: 1200px;  min-height: 600px;  min-width: 1100px;  display: flex;  justify-content: space-around;  align-items: center;  margin: 0 auto;}.panel {  height: 270px;  width: 190px;  position: relative;}.panel:hover .card {  filter: blur(1.5px);}.panel:hover .card1 {  background-size: 215% 135%;}.panel:hover .card2 {  background-size: 115% 115%;}.panel:hover .card3 {  background-size: 155% 115%;}.panel:hover .title {  color: rgba(255, 255, 255, 0.2);}.panel:hover .border {  border: 1px solid white;}.panel:hover .slide {  bottom: 0px;}.panel:hover .ring:before,.panel:hover .ring:after {  transform: translateX(-50%) translateY(-50%) rotate(310deg);}.ring,.card,.border,.slide,.line {  display: flex;  justify-content: center;  align-items: center;}.ring {  color: #fffbf1;  position: absolute;  top: 50%;  left: 50%;  transform: translateX(-50%) translateY(-50%);  font-size: 170px;}.card {  background: #f0ead6;  position: relative;  transition: all 1s;  height: 270px;  width: 190px;  border: 1px solid white;}.card1 {  background-image: url("https://assets.codepen.io/489403/brazil.jpg");  background-repeat: no-repeat;  background-size: 200% 120%;}.card2 {  background-image: url("https://assets.codepen.io/489403/belize.jpg");  background-repeat: no-repeat;  background-size: 100% 100%;}.card3 {  background-image: url("https://assets.codepen.io/489403/egypt.jpg");  background-repeat: no-repeat;  background-size: 140% 100%;}.ring:before,.ring:after {  content: "";  padding: 0.7em 0.4em;  position: absolute;  left: 50%;  width: 115%;  top: 50%;  display: block;  border: 5px solid #50c9c3;  border-radius: 50%;  transition: transform 1s;  transform: translateX(-50%) translateY(-50%) rotate(50deg);}.ring:before {  border-color: #ebebeb #ebebeb rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);  z-index: -1;}.ring:after {  border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #ebebeb #ebebeb;}p {  text-align: center;  position: absolute;  font-family: "Playfair Display";}.title {  font-size: 36px;  font-weight: 700;  transition: all 1s;  top: 0;}.para {  bottom: 0;  font-size: 16px;  font-family: "Raleway";  padding: 20px;  margin: 0;  text-align: center;}.border {  position: absolute;  border: 1px solid rgba(255, 255, 255, 0.5);  height: 260px;  width: 180px;  transition: border 1s;  overflow: hidden;}.slide {  height: 260px;  width: 180px;  position: absolute;  border: 1px solid black;  bottom: -270px;  background: rgba(0, 0, 0, 0.5);  transition: bottom 1s;  flex-direction: column;}.fa-plane {  font-size: 16px;}