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