css实现价格套餐悬浮效果代码-html代码-BFW代码库

代码语言：html

代码描述：css实现价格套餐悬浮效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        @import url(https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,700,300);body{font-family:"Yanone Kaffeesatz",sans-serif}body a{text-decoration:none;color:white}body .container{width:938px;position:absolute;top:50%;left:30px;right:0;transform:translateY(-50%);margin:auto}body .container .card{margin:0 auto;display:inline-block;margin-right:30px;transform:scale(0);width:280px;text-align:center;position:relative;transition:all .2s;cursor:pointer;opacity:.5;box-shadow:0 17px 46px -10px #777;height:470px;border-radius:14px}body .container .card:nth-of-type(1){-webkit-animation:intro 1s .1s forwards;animation:intro 1s .1s forwards}body .container .card:nth-of-type(2){-webkit-animation:intro 1s .2s forwards;animation:intro 1s .2s forwards}body .container .card:nth-of-type(3){-webkit-animation:intro 1s .3s forwards;animation:intro 1s .3s forwards}body .container .card:nth-of-type(1){background:-webkit-linear-gradient(45deg,#c96881 0,#f7b695 100%)}body .container .card:nth-of-type(2){background:-webkit-linear-gradient(45deg,#6B6ECC 0,#89BFDF 100%)}body .container .card:nth-of-type(3){background:-webkit-linear-gradient(45deg,#81B77B 0,#A3E3C3 100%)}body .container .card:hover .card_inner__header img{left:-50px;transition:all 3.4s linear}body .container .card:hover .card_inner__cta button{transform:scale(1)}body .container .card:nth-of-type(1):hover .card_inner__circle img{-webkit-animation:launch 1s forwards;animation:launch 1s forwards}body .container .card:nth-of-type(1) .card_inner__circle img{top:22px;left:1px}body .container .card:nth-of-type(2):hover .card_inner__circle img{-webkit-animation:spin 1s forwards;animation:spin 1s forwards}body .container .card:nth-of-type(2) .card_inner__circle img{top:22px}body .container .card:nth-of-type(3):hover .card_inner__circle img{-webkit-animation:fly 1s forwards;animation:fly 1s forwards}body .container .card:nth-of-type(3) .card_inner__circle img{top:22px;left:1px}body .container .card:hover{opacity:1}body .container .card_inner__circle{overflow:hidden;width:70px;position:absolute;background:#F1F0ED;z-index:10;height:70px;border-radius:100px;left:0;box-shadow:0 7px 20px rgba(0,0,0,0.28);right:0;margin:auto;border:4px solid white;top:82px}body .container .card_inner__circle img{height:26px;position:relative;top:17px;transition:all .2s}body .container .card_inner__header{height:120px;border-top-left-radius:14px;border-top-right-radius:14px;overflow:hidden}body .container .card_inner__header img{width:120%;position:relative;top:-30px;left:0;transition:all .1s linear}body .container .card_inner__content{padding:20px}body .container .card_inner__content .price{color:white;font-weight:800;font-size:70px;text-shadow:0 0 10px rgba(0,0,0,0.42)}body .container .card_inner__content .text{color:rgba(255,255,255,0.6);font-weight:100;margin-top:20px;font-size:13px;line-height:16px}body .container .card_inner__content .title{font-weight:800;text-transform:uppercase;color:rgba(255,255,255,0.64);margin-top:40px;font-size:25px;letter-spacing:1px}body .container .card_inner__cta{position:absolute;bottom:-24px;left:0;right:0;margin:auto;width:200px}body .container .card_inner__cta button{padding:16px;box-shadow:0 0 40px 4px #F76583,0px 0 0 2px rgba(255,255,255,0.19) inset;width:100%;background:-webkit-linear-gradient(-90deg,#fe5e7d 0,#e5375b 100%);border:0;font-family:"Yanone Kaffeesatz",sans-serif;color:white;outline:0;font-size:20px;border-radius:6px;transform:scale(0.94);cursor:pointer;transition:box-shadow .3s,transform .3s .1s}body .container .card_inner__cta button span{text-shadow:0 4px 18px #BA3F57}body .container .card_inner__cta button:hover{box-shadow:0 0 60px 8px #F76583,0px 0 0 2px rgba(255,255,255,0.19) inset}@-webkit-keyframes launch{0%{left:1px}25%{top:-50px;left:1px}50%{left:-100px}75%{top:100px;transform:rotate(40deg)}100%{left:1px}}@keyframes launch{0%{left:1px}25%{top:-50px;left:1px}50%{left:-100px}75%{top:100px;transform:rotate(40deg)}100%{left:1px}}@-webkit-keyframes fly{0%{left:0}25%{top:-50px;left:50px}50%{left:-130px}75%{top:60px}100%{left:0}}@keyframes fly{0%{left:0}25%{top:-50px;left:50px}50%{left:-130px}75%{top:60px}100%{left:0}}@-webkit-keyframes spin{0%{transform.........完整代码请登录后点击上方下载按钮下载查看