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

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

代码语言：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_in.........完整代码请登录后点击上方下载按钮下载查看