jquery卡片点击打开弹出动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：弹出层
代码描述：jquery卡片点击打开弹出动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/reset.min.css">

<style>
    @import url(//fonts.useso.com/css?family=Raleway:200,500,700,800);
@font-face {
	font-family: 'icomoon';
	src:url('../fonts/icomoon.eot?rretjt');
	src:url('../fonts/icomoon.eot?#iefixrretjt') format('embedded-opentype'),
		url('../fonts/icomoon.woff?rretjt') format('woff'),
		url('../fonts/icomoon.ttf?rretjt') format('truetype'),
		url('../fonts/icomoon.svg?rretjt#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
	font-family: 'icomoon';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body, html { padding: 0; margin: 0;}

/* Reset */
*,
*:after,
*:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,
.clearfix:after {
	content: " ";
	display: table;
}

.clearfix:after {
	clear: both;
}

body{
	background: #494A5F;
	color: #D5D6E2;
	font-weight: 500;
	font-size: 1.05em;
	font-family: "Microsoft YaHei","宋体","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif, FreeSans, Arimo;
}
a{color: #2fa0ec;text-decoration: none;outline: none;}
a:hover,a:focus{color:#74777b;}
* {
  box-sizing: border-box;
}

ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

body {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 100vh;
  line-height: 1.5;
  font-family: 'Roboto';
  /*background: #f2f2f2;
  color: #404040;*/
  overflow: hidden;
}

.view {
  position: relative;
  height: 640px;
  width: 384px;
  background: #fcfcfc;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  overflow-y: scroll;
}

.card__list {
  padding: 0.75rem;
}
.card__item {
  margin: 0 0 0.75rem;
  padding: 2.25rem 1.5rem;
  border-top: 4px solid #404040;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  background: white;
  cursor: pointer;
  -webkit-transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
.card__item--blue {
  border-top-color: #5171C3;
}
.card__item--blue p.info-player__num {
  background: #5171C3;
  text-shadow:  1px 1px rgba(51, 78, 148, 0.7) , 2px 2px rgba(54, 81, 152, 0.715) , 3px 3px rgba(56, 84, 156, 0.73) , 4px 4px rgba(58, 87, 160, 0.745) , 5px 5px rgba(61, 89, 163, 0.76) , 6px 6px rgba(62, 91, 166, 0.775) , 7px 7px rgba(64, 94, 169, 0.79) , 8px 8px rgba(66, 96, 172, 0.805) , 9px 9px rgba(68, 97, 174, 0.82) , 10px 10px rgba(69, 99, 176, 0.835) , 11px 11px rgba(71, 101, 179, 0.85) , 12px 12px rgba(72, 102, 181, 0.865) , 13px 13px rgba(73, 104, 183, 0.88) , 14px 14px rgba(74, 105, 184, 0.895) , 15px 15px rgba(75, 106, 186, 0.91) , 16px 16px rgba(76, 108, 188, 0.925) , 17px 17px rgba(77, 109, 189, 0.94) , 18px 18px rgba(78, 110, 191, 0.955) , 19px 19px rgba(79, 111, 192, 0.97) , 20px 20px rgba(80, 112, 194, 0.985);
}
.card__item--blue:hover .info-player__name,
.card__item--blue:hover .info-place {
  color: #5171C3;
}
.card__item--orange {
  border-top-color: #DE660F;
}
.card__item--orange p.info-player__num {
  background: #DE660F;
  text-shadow:  1px 1px rgba(150, 69, 10, 0.7) , 2px 2px rgba(156, 72, 10, 0.715) , 3px 3px rgba(162, 75, 11, 0.73) , 4px 4px rgba(168, 77, 11, 0.745) , 5px 5px rgba(173, 79, 12, 0.76) , 6px 6px rgba(178, 82, 12, 0.775) , 7px 7px rgba(182, 84, 12, 0.79) , 8px 8px rgba(186, 86, 13, 0.805) , 9px 9px rgba(190, 87, 13, 0.82) , 10px 10px rgba(193, 89, 13, 0.835) , 11px 11px rgba(197, 90, 13, 0.85) , 12px 12px rgba(200, 92, 13, 0.865) , 13px 13px rgba(203, 93, 14, 0.88) , 14px 14px rgba(206, 95, 14, 0.895) , 15px 15px rgba(209, 96, 14, 0.91) , 16px 16px rgba(211, 97, 14, 0.925) , 17px 17px rgba(213, 98, 14, 0.94) , 18px 18px rgba(216, 99, 15, 0.955) , 19px 19px rgba(218, 100, 15, 0.97) , 20px 20px rgba(220, 101, 15, 0.985);
}
.card__item--orange:hover .info-player__name,
.card__item--orange:hover .info-place {
  color: #DE660F;
}
.card__item--green {
  border-top-color: #2EA83B;
}
.card__item--green p.info-player__num {
  background: #2EA83B;
  text-shadow:  1px 1px rgba(30, 108, 38, 0.7) , 2px 2px rgba(31, 113, 40, 0.715) , 3px 3px rgba(33, 118, 42, 0.73) , 4px 4px rgba(34, 123, 43, 0.745) , 5px 5px rgba(35, 127, 45, 0.76) , 6px 6px rgba(36, 131, 46, 0.775) , 7px 7px rgba(37, 135, 47, 0.79) , 8px 8px rgba(38, 138, 49, 0.805) , 9px 9px rgba(39, 141, 50, 0.82) , 10px 10px rgba(40, 144, 51, 0.835) , 11px 11px rgba(40, 147, 52, 0.85) , 12px 12px rgba(41, 150, 53, 0.865) , 13px 13px rgba(42, 152, 53, 0.88) , 14px 14px rgba(42, 155, 54, 0.895) , 15px 15px rgba(43, 157, 55, 0.91) , 16px 16px rgba(44, 159, 56, 0.925) , 17px 17px rgba(44, 161, 57, 0.94) , 18px 18px rgba(45, 163, 57, 0.955) , 19px 19px rgba(45, 165, 58, 0.97) , 20px 20px rgba(46, 166, 58, 0.985);
}
.card__item--green:hover .info-player__name,
.card__item--green:hover .info-place {
  color: #2EA83B;
}
.card__item--yellow {
  border-top-color: #BDB235;
}
.card__item--yellow p.info-player__num {
  background: #BDB235;
  text-shadow:  1px 1px rgba(129, 122, 36, 0.7) , 2px 2px rgba(134, 127, 38, 0.715) , 3px 3px rgba(139, 132, 39, 0.73) , 4px 4px rgba(144, 136, 40, 0.745) , 5px 5px rgba(148, 140, 41, 0.76) , 6px 6px rgba(152, 143, 43, 0.775) , 7px 7px rgba(156, 147, 44, 0.79) , 8px 8px rgba(159, 150, 45, 0.805) , 9px 9px rgba(162, 153, 45, 0.82) , 10px 10px rgba(165, 156, 46, 0.835) , 11px 11px rgba(168, 158, 47, 0.85) , 12px 12px rgba(171, 161, 48, 0.865) , 13px 13px rgba(173, 163, 49, 0.88) , 14px 14px rgba(176, 165, 49, 0.895) , 15px 15px rgba(178, 168, 50, 0.91) , 16px 16px rgba(180, 169, 50, 0.925) , 17px 17px rgba(182, 171, 51, 0.94) , 18px 18px rgba(184, 173, 52, 0.955) , 19px 19px rgba(186, 175, 52, 0.97) , 20px 20px rgba(187, 176, 53, 0.985);
}
.card__item--yellow:hover .info-player__name,
.card__item--yellow:hover .info-place {
  color: #BDB235;
}
.card__item--tan {
  border-top-color: #AA9E5C;
}
.card__item--tan p.info-player__num {
  background: #AA9E5C;
  text-shadow:  1px 1px rgba(122, 113, 64, 0.7) , 2px 2px rgba(126, 117, 66, 0.715) , 3px 3px rgba(130, 121, 69, 0.73) , 4px 4px rgba(134, 124, 71, 0.745) , 5px 5px rgba(137, 127, 73, 0.76) , 6px 6px rgba(140, 130, 75, 0.775) , 7px 7px rgba(143, 133, 76, 0.79) , 8px 8px rgba(146, 136, 78, 0.805) , 9px 9px rgba(149, 138, 79, 0.82) , 10px 10px rgba(151, 140, 81, 0.835) , 11px 11px rgba(153, 142, 82, 0.85) , 12px 12px rgba(155, 144, 83, 0.865) , 13px 13px rgba(157, 146, 85, 0.88) , 14px 14px rgba(159, 148, 86, 0.895) , 15px 15px rgba(161, 150, 87, 0.91) , 16px 16px rgba(163, 151, 88, 0.925) , 17px 17px rgba(164, 153, 89, 0.94) , 18px 18px rgba(166, 154, 90, 0.955) , 19px 19px rgba(167, 155, 90, 0.97) , 20px 20px rgba(169, 157, 91, 0.985);
}
.card__item--tan:hover .info-player__name,
.card__item--tan:hover .info-place {
  color: #AA9E5C;
}
.card__item--purple {
  border-top-color: #3E5EB3;
}
.card__item--purple p.info-player__num {
  background: #3E5EB3;
  text-shadow:  1px 1px rgba(42, 64, 122, 0.7) , 2px 2px rgba(44, 67, 127, 0.715) , 3px 3px rgba(45, 69, 132, 0.73) , 4px 4px rgba(47, 71, 136, 0.745) , 5px 5px rgba(48, 74, 140, 0.76) , 6px 6px rgba(50, 75, 144, 0.775) , 7px 7px rgba(51, 77, 147, 0.79) , 8px 8px rgba(52, 79, 151, 0.805) , 9px 9px rgba(53, 81, 154, 0.82) , 10px 10px rgba(54, 82, 156, 0.835) , 11px 11px rgba(55, 84, 159, 0.85) , 12px 12px rgba(56, 85, 162, 0.865) , 13px 13px rgba(57, 86, 164, 0.88) , 14px 14px rgba(58, 87, 166, 0.895) , 15px 15px rgba(58, 88, 168, 0.91) , 16px 16px rgba(59, 89, 170, 0.925) , 17px 17px rgba(60, 90, 172, 0.94) , 18px 18px rgba(60, 91, 174, 0.955) , 19px 19px rgba(61, 92, 176, 0.97) , 20px 20px rgba(61, 93, 177, 0.985);
}
.card__item--purple:hover .info-player__name,
.card__item--purple:hover .info-place {
  color: #3E5EB3;
}
.card__item:hover {
  background: #444;
}
.card__item:hover .info-player__num {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}
.card__info {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.card__info .info-player {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
.card__info .info-player__num .........完整代码请登录后点击上方下载按钮下载查看