bootstrap自适应电影票据UI交互效果代码-html代码-BFW代码库

bootstrap自适应电影票据UI交互效果代码

代码语言：html

代码描述：bootstrap自适应电影票据UI交互效果代码，票据可展开后进行购买。

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
    <meta name="viewport" content="width=device-width" />
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.3.3.4.css">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
    <style>
        .page-title {
          text-align: center;
          color: #FFFFFF;
          font-weight: 100;
          font-size: 40px;
          margin-top: 60px;
          margin-bottom: 40px;
        }
        
        .wrapper {
          width: 100%;
          min-height: 930px;
          display: block;
          position: relative;
          background: #333333;
          background-image: url("//repo.bfw.wiki/bfwrepo/icon/6056bf753c238.jpg");
          background-size: cover;
          background-position: center center;
          position: relative;
          padding-bottom: 50px;
        }
        .wrapper:after {
          position: absolute;
          width: 100%;
          height: 100%;
          background: #111111;
          display: block;
          content: "";
          top: 0;
          left: 0;
          z-index: 1;
          opacity: 0.6;
        }
        .wrapper .container {
          z-index: 2;
          position: relative;
        }
        .wrapper footer {
          position: absolute;
          z-index: 3;
          bottom: 20px;
          width: 100%;
          text-align: center;
        }
        .wrapper footer h3 {
          color: #FFFFFF;
          font-weight: 200;
        }
        .wrapper footer .social-icon {
          color: #FFFFFF;
          opacity: 0.8;
          font-size: 34px;
          margin: 20px;
        }
        .wrapper footer .social-icon:hover {
          opacity: 1;
        }
        
        .ticket-card {
          margin-top: 15vh;
          margin-bottom: 15vh;
          background: #FFFFFF;
          border-radius: 4px;
        }
        .ticket-card:hover .cover img, .ticket-card.active .cover img {
          -moz-transform: translate(0, -50px);
          -o-transform: translate(0, -50px);
          -ms-transform: translate(0, -50px);
          -webkit-transform: translate(0, -50px);
          transform: translate(0, -50px);
          box-shadow: 0 10px 20px -4px rgba(22, 22, 22, 0.5);
        }
        .ticket-card .cover {
          border-radius: 4px 4px 0 0;
          position: relative;
          margin: 15px;
        }
        .ticket-card .cover img {
          width: 100%;
          position: relative;
          z-index: 2;
          margin-top: -30px;
          box-shadow: 0 10px 16px -6px rgba(22, 22, 22, 0.5);
          border-radius: 4px;
          -moz-transform: translate(0, 0);
          -o-transform: translate(0, 0);
          -ms-transform: translate(0, 0);
          -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
          -webkit-transition: transform 300ms cubic-bezier(0.34, 2, 0.6, 1), box-shadow 300ms ease, opacity 300ms ease;
          -moz-transition: transform 300ms cubic-bezier(0.34, 2, 0.6, 1), box-shadow 300ms ease, opacity 300ms ease;
          -o-transition: transform 300ms cubic-bezier(0.34, 2, 0.6, 1), box-shadow 300ms ease, opacity 300ms ease;
          -ms-transition: transform 300ms cubic-bezier(0.34, 2, 0.6, 1), box-shadow 300ms ease, opacity 300ms ease;
          transition: transform 300ms cubic-bezier(0.34, 2, 0.6, 1), box-shadow 300ms ease, opacity 300ms ease;
        }
        .ticket-card .cover .info {
          position: absolute;
          width: 100%;
          bottom: 0px;
          padding: 0 15px;
          color: #777777;
        }
        .ticket-card .cover .info .going,
        .ticket-card .cover .info .tickets-left {
          padding-bottom: 10px;
          border-bottom: 1px solid #f3f3f3;
          width: 50%;
        }
        .ticket-card .cover .info .going {
          float: left;
        }
        .ticket-card .cover .info .tickets-left {
          float: right;
          text-align: right;
        }
        .ticket-card .cover .info .fa {
          color: #CCCCCC;
          margin-right: 5px;
        }
        .ticket-card .a.........完整代码请登录后点击上方下载按钮下载查看