夜雨聆风
效果展示
完整源码
<!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;}