商品服务业自适应悬浮立体翻转效果
代码语言:html
所属分类:悬停
代码描述:商品服务业自适应悬浮立体翻转效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/bootstrap.4.3.1.min.css"> <style> body { background-color:#f9f9ff; } .bg-header { background-color: white; padding: 12px 20px; box-shadow:0 1px 15px rgba(0, 0, 0, 0.04), 0 1px 6px rgba(0, 0, 0, 0.04); } .content-inner { width: 100%; color: #fff; position: relative; transform-style: preserve-3d; perspective: 1000px; backface-visibility: hidden; transition: 0.9s cubic-bezier(0.68, -0.55, 0.265, 1.55); } .fl-wrap { float: left; width: 100%; position: relative; } .content-inner .content-front, .content-inner .content-back { position: relative; transform-style: preserve-3d; perspective: 1000px; backface-visibility: hidden; height: 100%; display: flex; justify-content: center; align-items: center; } .content-front { background: #292929; position: relative; } .content-inner > * { backface-visibility: hidden; transition: 0.9s cubic-bezier(0.68, -0.55, 0.265, 1.55); } .cf-inner:before, .cf-inner:after { content: ""; position: absolute; width: 50px; height: 50px; border-color: rgba(255, 255, 255, 0.4); z-index: 10; } .cf-inner:before { top: 20px; left: 20px; border-left: 1px solid; border-top: 1px solid; } .bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background-size: cover; background-attachment: scroll; background-position: center; background-repeat: repeat; background-origin: content-box; } .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: 0.4; z-index: 3; } .content-inner .cf-inner .inner { align-items: stretch; transform-style: preserve-3d; perspective: 1000px; backface-visibility: hidden; transform: translateZ(95px) scale(0.81); text-align: center; position: relative; z-index: 2; } .cf-inner:after { bottom: 20px; right: 20px; border-right: 1px solid; border-bottom: 1px solid; } .content-inner .cf-inner .inner h2 { position: relative; font-size: 22px; font-weight: 800; padding-bottom: 20px; } .content-inner .cf-inner .inner h2:before { content: ""; position: absolute; left: 50%; bottom: 10px; width: 20px; height: 2px; margin-left: -10px; } .content-inner .content-front li { display: inline-block; color: #fff; text-transform: uppercase; font-size: 10px; letter-spacing: 2px; margin: 0 4px; } .cf-inner:after { bottom: 20px; right: 20px; border-right: 1px solid; border-bottom: 1px solid; } .content-inner .content-front, .content-inner .content-back { position: relative; transform-style: preserve-3d; perspective: 1000px; backface-visibility: hidden; height: 100%; display: flex; justify-content: center; align-items: center; } .content-inner .cf-inner .inner { align-items: stretch; transform-style: preserve-3d; perspective: 1000px; backface-visibility: hidden; transform: translateZ(95px) scale(0.81); text-align: center; position: relative; z-index: 2; } .content-inner:hover .content-front { transform: rotateY(-180deg); } .content-inner:hover .content-back { transform: rotateY(0deg); } .content-inner .content-back { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 0; transform: rotateY(180deg); background: #292929; background-image:url("http://repo.bfw.wiki/bfwrepo/image/5ec5c2bc20cdd.png"); } .content-inner .cf-inner { transform-style: preserve-3d; backface-visibility: hidden; width: 100%; padding: 150px 20px; } .serv-price-wrap { background: rgba(255,255,255,0.05); padding: 15px 30px; margin-top: 14px; font-size: 11px; text-transform: uppercase; letter-spacing: 2px; } .content-inner .cf-inner .inner h2:before { background: #00BCD4; } inner:before, .cf-inner:after { content: ''; position: absolute; width: 50px; height: 50px; border-color: rgba(255,255,255, 0.4); z-index: 10; } .cf-inner:before, .cf-inner:after { content: ''; position: absolute; width: 50px; height: 250px; border-color: rgba(0, 188, 212, 0.33); z-index: 10; } .dec-icon { padding-bottom: 40px; } .content-back .cf-inner:before { top: 125px; } .content-back .cf-inner:after { bottom: 125px; } </style> </head> <body translate="no"> <div> <nav class="navbar navbar-light bg-header text-center"> <a class="navbar-brand" href="#">Welcome User </a> </nav> </div> <div class="container mt-5"> <div class="row"> <div class="col-md-4 mt-1"> <div class="content-inner fl-wrap"> <div class="content-front"> <div class="cf-inner"> <div class="bg" style="background-image: url(http://repo.bfw.wiki/bfwrepo/image/5ec5c2ef47810.png);"></div> <div class="overlay"></div> <div class="inner"> <h2>Web Design</h2> <ul> <li>Concept</li> <li>Design</li> <li>3D Modeling</li> </ul> </div> </div> </div> <div class="content-back"> <div class="cf-inner"> <div class="inner"> <div class="dec-icon"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 487.16 487.16" style="enable-background:new 0 0 487.16 487.16;" xml:space="preserve" width="50%" height="100%" class=""> <g> <g> <path d="M243.578,291.482c-13.117,0-23.788,10.67-23.788,23.786c0,13.117,10.671,23.788,23.788,23.788 c13.116,0,23.787-10.671,23.787-23.788C267.365,302.152,256.694,291.482,243.578,291.482z M243.578,330.556 c-8.43,0-15.288-6.858-15.288-15.288c0-8.429,6.858-15.286,15.288-15.286c8.43,0,15.287,6.857,15.287,15.286 C258.865,323.697,252.008,330.556,243.578,330.556z" data-original="#000000" class="active-path" style="fill:#04BBD6" data-old_color="#000000"></path> <path d="M453.606,5.261H33.555C15.053,5.261,0,20.315,0,38.817v301.728c0,18.502,15.053,33.556,33.555,33.556h147.497 l-17.482,58.059h-1.958c-14.255,0-25.852,11.599-25.852,25.855v19.635c0,2.347,1.903,4.25,4.25,4.25h207.144 c2.348,0,4.25-1.903,4.25-4.25v-19.635c0-14.257-11.6-25.855-25.856-25.855h-1.957l-17.482-58.059h147.499 c18.502,0,33.555-15.053,33.555-33.556V38.817C487.16,20.315,472.107,5.261,453.606,5.261z M33.555,13.761h420.051 c13.815,0,25.055,11.24,25.055,25.057v1.169h-88.353c-2.348,0-4.25,1.903-4.25,4.25c0,2.347,1.902,4.25,4.25,4.25h88.353v222.043 H8.5v-27.803h170.318c2.347,0,4.25-1.903,4.25-4.25s-1.903-4.25-4.25-4.25H8.5V38.817C8.5,25.001,19.74,13.761,33.555,13.761z M342.902,458.015v15.385H144.258v-15.385c0-9.57,7.784-17.355,17.352-17.355h163.936 C335.116,440.659,342.902,448.445,342.902,458.015z M314.712,432.159H172.446l17.482-58.059H297.23L314.712,432.159z M453.606,365.601H33.555c-13.815,0-25.055-11.24-25.055-25.056v-30.429h75.037c2.347,0,4.25-1.903,4.25-4.25 c0-2.347-1.903-4.25-4.25-4.25H8.5v-22.587h470.16v61.516C478.66,354.361,467.421,365.601,453.606,365.601z" data-original="#000000" class="active-path" style="fill:#04BBD6" data-old_color="#000000"></path> <path d="M351.617,154.194l-47.873,35.994c-5.254,3.95-6.315,11.438-2.365,16.691l5.866,7.803c2.236,2.973,5.804,4.749,9.544,4.749 c2.602,0,5.074-0.824,7.148-2.384l74.561-56.06c2.685-2.019,4.224-4.938,4.224-8.007c0-3.069-1.54-5.987-4.225-8.005l-74.56-56.059 c-2.074-1.56-4.547-2.384-7.148-2.384c-3.739,0-7.307,1.775-9.542,4.748l-5.868,7.803c-3.949,5.253-2.889,12.741,2.365,16.692 l47.873,35.994c0.529,0.398,0.833,0.84,0.833,1.212C352.45,153.354,352.147,153.796,351.617,154.194z M356.725,144.974 l-47.872-35.994c-1.508-1.134-1.813-3.283-0.68-4.79l5.868-7.804c0.647-0.862,1.65-1.356,2.748-1.356 c0.52,0,1.295,0.118,2.041,0.678l74.559,56.059c0.529,0.398,0.833,0.84,0.833,1.213c0,0.373-0.304,0.815-0.832,1.213l-74.56,56.059 c-0.746,0.561-1.521,0.678-2.041,0.678c-1.1,0-2.102-0.495-2.749-1.357l-5.866-7.803c-1.134-1.508-0.829-3.656,0.678-4.789 l47.874-35.995c2.685-2.02,4.225-4.938,4.225-8.008C360.949,149.911,359.409,146.993,356.725,144.974z" data-original="#000000" class="active-path" style="fill:#04BBD6" data-old_color="#000000"></path> <path d="M88.664,160.988l74.559,56.059c2.075,1.56,4.546,2.384,7.148,2.384c3.74,0,7.307-1.775,9.542-4.749l5.867-7.803 c3.95-5.253,2.889-12.741-2.364-16.691l-47.872-35.994c-0.53-0.398-0.833-0.841-0.833-1.214c0-0.373,0.304-0.814,0.833-1.212 l47.873-35.995c5.253-3.951,6.313-11.438,2.363-16.691l-5.867-7.803c-2.236-2.974-5.803-4.748-9.543-4.748 c-2.602,0-5.074,0.824-7.149,2.384l-74.558,56.059c-2.685,2.019-4.225,4.937-4.225,8.005 C84.438,156.049,85.978,158.968,88.664,160.988z M93.772,151.768l74.558-56.06c0.746-0.561,1.521-0.678,2.04-0.678 c1.099,0,2.101,0.495,2.749,1.357l5.867,7.802c1.133,1.508,0.829,3.657-0.678,4.791l-47.873,35.994 c-2.685,2.019-4.224,4.937-4.225,8.005c0,3.07,1.54,5.988,4.225,8.008l47.873,35.995c1.507,1.133,1.812,3.281,0.678,4.789 l-5.867,7.803c-0.648,0.862-1.65,1.357-2.749,1.357c-0.52,0-1.295-0.118-2.041-0.678l-74.558-56.058 c-0.53-0.398-0.834-0.841-0.834-1.214C92.939,152.608,93.242,152.166,93.772,151.768z" data-original="#000000" class="active-path" style="fill:#04BBD6" data-old_color="#000000"></path> <path d="M210.549,213.968l8.89,4.033c1.552,0.705,3.202,1.062,4.903,1.062c4.681,0,8.951-2.744,10.877-6.991l47.322-104.297 c2.716-5.985,0.056-13.064-5.93-15.78l-8.891-4.034c-1.552-0.705-3.201-1.062-4.902-1.062c-4.681,0-8.951,2.745-10.878,6.992 l-47.321,104.296c-1.312,2.892-1.417,6.129-0.295,9.115C205.446,210.288,207.657,212.656,210.549,213.968z M212.359,201.698 l47.321-104.296c0.553-1.217,1.784-2.004,3.138-2.004c0.481,0,0.949,0.102,1.391,0.302l8.891,4.034 c0.824,0.374,1.456,1.054,1.779,1.915c0.323,0.861,0.296,1.789-0.078,2.613L227.479,208.56c-0.552,1.217-1.783,2.003-3.136,2.003 c-0.481,0-0.95-0.102-1.392-0.302l-8.89-4.033c-0.824-0.374-1.456-1.054-1.779-1.915 C211.957,203.451,211.985,202.523,212.359,201.698z" data-original="#000000" class="active-path" style="fill:#04BBD6" data-old_color="#000000"></path> <path d="M306.313,48.486h61.496c2.348,0,4.25-1.903,4.25-4.25c0-2.347-1.902-4.25-4.25-4.25h-61.496c-2.348,0-4.25,1.903-4.25,4.25 C302.063,46.584,303.965,48.486,306.313,48.486z" data-original="#000000" class="active-path" style="fill:#04BBD6" data-old_color="#000000"></path> </g> </g> </svg> </div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas in pulvinar neque. Nulla finibus lobortis pulvinar.</p> <div class="serv-price-wrap"><span>Price</span>$125-$335</div> </div> </div> </div> </div> </div> <div class="col-md-4 mt-1"> <div class="content-inner fl-wrap"> <div class="content-front"> <div class="cf-inner"> <div class="bg " style="background-image: url(http://repo.bfw.wiki/bfwrepo/image/5ec5c304e0b4c.png);"></div> <div class="overlay"></div> <div class="inner"> <h2>Branding</h2> <ul> <li>Concept</li> <li>Design</li> <li>3D Modeling</li> </ul> </div> </div> </div> <div class="content-back"> <div class="cf-inner"> <div class="inner"> <div class="dec-icon"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 488.477 488.477" style="enable-background:new 0 0 488.477 488.477;" xml:space="preserve" width="50%" height="100%" class=""> <g> <g> <path d="M472.227,17.875H16.25C7.29,17.875,0,25.166,0,34.125v383.982c0,8.96,7.29,16.25,16.25,16.25h177.048v28.725 c0,5.155,2.583,6.761,4.124,7.259c1.541,0.497,4.575,0.709,7.594-3.473l38.649-53.547c0.29-0.402,0.526-0.524,0.563-0.536 c0.059,0.012,0.295,0.134,0.585,0.536l38.65,53.548c2.158,2.987,4.323,3.732,5.945,3.732c0.647,0,1.208-0.119,1.648-0.261 c1.54-0.498,4.123-2.103,4.123-7.259v-28.725h177.048c8.96,0,16.25-7.29,16.25-16.25V34.125 C488.477,25.166,481.187,17.875,472.227,17.875z M207.78,354.371c-1.082,0-2.05-0.144-2.959-0.438 c-5.369-1.744-9.069-8.495-12.987-15.644c-3.437-6.271-6.991-12.755-12.289-16.61c-5.372-3.909-12.697-5.311-19.781-6.667 c-7..........完整代码请登录后点击上方下载按钮下载查看
网友评论0