Question

如何创建卡片悬停样式以及可能的卡片加载样式，如google now（在桌面浏览器中打开）卡片。喜欢这个网址

http://www.google.com/landing/now/#howtogetit

Answer 1

您可以使用perspective这样做：

body {
  background: url(http://s25.postimg.org/b6q25p4p7/black_thread.png);
}
.container {
  position: relative;
  margin: 0 auto;
  top: 10px;
  width: 100%;
  height: 350px;
  -webkit-perspective: 600px;
  perspective: 600px;
  text-align: center;
}
.item {
  display: inline-block;
  position: relative;
  margin: 15px;
  width: 225px;
  height: 300px;
  line-height: 300px;
  background-color: #51634b;
  border-radius: 2px;
  -webkit-animation: animOpp 0.4s 1;
  animation: animOpp 0.4s 1;
  box-shadow: 1px 1px 5px #304129;
}
.item:hover {
  -webkit-animation: anim ease-out 0.5s 1;
  animation: anim 0.5s 1;
  transform: translateZ(30px);
  cursor: pointer;
}
.item:active {
  -webkit-transform: translateZ(26px);
  transform: translateZ(26px);
}
@-webkit-keyframes anim {
  0% {
    transform: rotateX(0deg) translateZ(0px);
  }
  25% {
    transform: rotateX(-4deg) translateZ(15px);
  }
  37% {
    transform: rotateX(-8deg) translateZ(30px);
    transform-origin: 50% 0%;
  }
  72% {
    transform-origin: 50% 0%;
    transform: rotateX(-4deg) translateZ(30px);
  }
  100% {
    transform-origin: 50% 0%;
    transform: rotateX(0deg) translateZ(30px);
  }
}
@keyframes anim {
  0% {
    transform: rotateX(0deg) translateZ(0px);
  }
  25% {
    transform: rotateX(-4deg) translateZ(15px);
  }
  37% {
    transform: rotateX(-8deg) translateZ(30px);
    transform-origin: 50% 0%;
  }
  72% {
    transform-origin: 50% 0%;
    transform: rotateX(-4deg) translateZ(30px);
  }
  100% {
    transform-origin: 50% 0%;
    transform: rotateX(0deg) translateZ(30px);
  }
}
@-webkit-keyframes animOpp {
  0% {
    transform: translateZ(30px);
  }
  35% {
    transform: translateZ(20px);
  }
  100% {
    transform: translateZ(0px);
  }
}
@keyframes animOpp {
  0% {
    transform: translateZ(30px);
  }
  35% {
    transform: translateZ(20px);
  }
  100% {
    transform: translateZ(0px);
  }
}

<body>
  <div class="container">
    <div class="item">Content Goes Here</div>
    <div class="item">Content Goes Here</div>
    <div class="item">Content Goes Here</div>
    <div class="item">Content Goes Here</div>
    <div class="item">Content Goes Here</div>
    <div class="item">Content Goes Here</div>
    <div class="item">Content Goes Here</div>
    <div class="item">Content Goes Here</div>
  </div>
</body>

Answer 2

试试这个

＆＃13;

.panel
{
    min-height:50px;
	border:1px solid;
	width:200px;
	display:inline-block;
	margin-left:10px;
	-webkit-transition: 1s ease-in-out;
	-moz-transition: 1s ease-in-out;
	-o-transition: 1s ease-in-out;
	transition: 1s ease-in-out;
}

.hover-effect:hover
{
    -webkit-transform: scale(1.3);
	-moz-transform: scale(1.3);
	-o-transform: scale(1.3);
	-ms-transform: scale(1.3);
	transform: scale(1.3);
    background-color:grey;
}
.col-xs-4{
	display:inline;
}

＆＃13;

<div class="row">
    <div class="col-xs-4">
        <div class="panel panel-default hover-effect">
        card 1
        </div>
    </div>
    
    <div class="col-xs-4">
        <div class="panel panel-default hover-effect">
        card 2
        </div>
    </div>
    
    <div class="col-xs-4">
        <div class="panel panel-default hover-effect">
        card 3
        </div>
    </div>
</div



</body>

＆＃13;

如何创建卡悬停样式效果像谷歌现在卡

2 个答案: