扑克牌效果

HTML部分内部
<div id="projects">
			<!--grid网格-->
			<div class="grid">
				<!--project项目-->
				<div class="projects">
					<!--1-->
					<div class="project">
						<div class="mask">
							<div class="back"></div>
							<div class="front"></div>
						</div>
					</div>	

					<!--2-->
					<div class="project">
						<div class="mask">
							<div class="back"></div>
							<div class="front"></div>
						</div>
					</div>

					<!--3-->
					<div class="project">
						<div class="mask">
							<div class="back"></div>
							<div class="front"></div>
						</div>
					</div>

					<!--4-->
					<div class="project">
						<div class="mask">
							<div class="back"></div>
							<div class="front"></div>
						</div>
					</div>

					<!--5-->
					<div class="project">
						<div class="mask">
							<div class="back"></div>
							<div class="front"></div>
						</div>
					</div>

					<!--6-->
					<div class="project">
						<div class="mask">
							<div class="back"></div>
							<div class="front"></div>
						</div>
					</div>

					<!--7-->
					<div class="project">
						<div class="mask">
							<div class="back"></div>
							<div class="front"></div>
						</div>
					</div>

					<!--8-->
					<div class="project">
						<div class="mask">
							<div class="back"></div>
							<div class="front"></div>
						</div>
					</div>

					<!--9-->
					<div class="project">
						<div class="mask">
							<div class="back"></div>
							<div class="front"></div>
						</div>
					</div>

					<!--10-->
					<div class="controls">
						<span class="bottom"></span>
						<span class="bottom"></span>
						<span class="bottom"></span>
						<div class="mask"></div>
					</div>

				</div>
			</div>
		</div>

　　

CSS部分：
CSS部分：
/*
* @Author: Administrator
* @Date:   2017-01-11 15:33:23
* @Last Modified by:   Administrator
* @Last Modified time: 2017-01-11 16:32:03
*/
body{background-color: #ef4036;}

#projects, #projects .grid {
    height: 1100px;
}
#projects {
    background-color: #ef4036;
    overflow: hidden;
}

.project {
    position: absolute;
    right: 0;
    bottom: 0;
    margin: 0 0 15px 15px;
}
.project {
    float: left;
    width: 222px;
    height: 311px;
}
.grid {
    width: 1170px;
    margin: 0 auto;
    position: relative;
}
div.projects {
    height: 652px;
}
div.projects {
    float: left;
    width: 100%;
    position: relative;
    left: 0;
    top: 0;
}
div.projects .controls {
    position: absolute;
    right: 0;
    bottom: 15px;
}
div.projects .controls {
    float: left;
    width: 222px;
    height: 311px;
}
.controls .mask {
    float: left;
    position: relative;
    background: url(../img/project_card_bg.png) no-repeat;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
div.projects .controls .bottom{
      -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    -ms-transition: all .3s ease;
    transition: all .3s ease;
}
div.projects .controls .bottom {
    background: url(../img/project_card_bot_bg.png) no-repeat;
    position: absolute;
    bottom: -9px;
    right: 0;
    width: 222px;
    height: 66px;
}

div.projects .controls .bottom+.bottom+.bottom {
    bottom: -3px;
}
div.projects .controls .bottom+.bottom {
    bottom: -6px;
}

div.projects .controls:hover .bottom+.bottom+.bottom {
    bottom: -8px;
}
div.projects .controls:hover .bottom+.bottom {
    bottom: -14px;
}
div.projects .controls:hover .bottom {
    bottom: -20px;
}

.project.ani0 {
    right: 948px;
    bottom: 326px;
}
.project.ani1 {
    right: 711px;
    bottom: 326px;
}
.project.ani2 {
    right: 474px;
    bottom: 326px;
}
.project.ani3 {
    right: 237px;
    bottom: 326px;
}

.project.ani4 {
    right: 0;
    bottom: 326px;
}

.project.ani5 {
    right: 948px;
    bottom: 0;
}
.project.ani6 {
    right: 711px;
    bottom: 0;
}
.project.ani7 {
    right: 474px;
    bottom: 0;
}
.project.ani8 {
    right: 237px;
    bottom: 0;
}

.project .front {
    background: url(../img/project_front_bg.png) no-repeat;
    display: table;
}
.project .back, .project .front {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.project .back {
    background: url(../img/project_back_bg.png) no-repeat;
}
.project .back, .project .front {
    position: absolute;
    left: 0;
    top: 0;
    width: 222px;
    height: 311px;
    padding: 0 16px;
    text-align: center;
}

.project, .project .back, .project .front, .socials a, .transform_holder .back, .transform_holder .front, .transform_holder .transform {
    -webkit-transition: all 1s cubic-bezier(0.68,-.55,.265,1.55);
    -moz-transition: all 1s cubic-bezier(0.68,-.55,.265,1.55);
    -o-transition: all 1s cubic-bezier(0.68,-.55,.265,1.55);
    -ms-transition: all 1s cubic-bezier(0.68,-.55,.265,1.55);
    transition: all 1s cubic-bezier(0.68,-.55,.265,1.55);
}
.project {
    -webkit-perspective: 1000;
    -moz-perspective: 1000;
    -o-perspective: 1000;
    perspective: 1000;
    -ms-transform: perspective(1000px);
    -moz-transform: perspective(1000px);
    -ms-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
}
.project .back, .project .front {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.project .front {
    -webkit-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
}
 .project .back {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    transform: rotateY(180deg);
}
 .project.hover .front, .project:hover .front {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

 .project.hover .back, .project:hover .back {
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    transform: rotateY(0deg);
}

　　

JS部分

JS部分
	<script type="text/javascript" src="js/jquery.js" ></script>
		<script>
		  $(function(){
		    $(‘.controls‘).click(function(){
		      if($(this).hasClass(‘show‘)){
		        $(this).removeClass(‘show‘);
		        subMove();
		      }else{
		        $(this).addClass(‘show‘);
		        addMove();
		      }
		    })
		  })

		  function addMove(){
		    $(‘.project‘).each(function(index,item){
		      setTimeout(function(){
		       $(item).addClass(‘ani‘+ index);
		     },index*300);
		    })
		  }

		  function subMove(){
		    $(‘.project‘).each(function(index,item){
		       $(item).removeClass(‘ani‘+ index);
		    })
		  }
		</script>

　　

时间： 2024-10-13 22:12:21

扑克牌效果的相关文章

纯CSS实现扑克牌效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en"><head><meta http-equiv="con

纯CSS实现扑克牌效果，太牛了吧

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <meta http-equiv="

css3 transition effect(其它效果)

http://blog.csdn.net/jerryvon/article/details/8755548 整理了一些其它动画,用的模板为flip模板,只不过CSS3不同 [css] view plaincopyprint? /***************** 淡入淡出 ********************/ .effect5 .back { -webkit-transform: rotate3d(1,0,0,0); } .effect5.show .front{ -webkit-anim

定义自己的ViewGroup

尊重原创:http://blog.csdn.net/yuanzeyao/article/details/40264433 好久都没有写文章了,现在利用周末的时间对一些知识进行总结,便于加深理解,今天我就来学习一下如何实现自定义ViewGroup 在Android中比较常用的布局LinearLayout,FrameLayout,RelativeLayout...这些布局都是继承自ViewGroup,通过这些布局,我们几乎可以实现Android中所有的界面开发,但是对于一些比较常见并且比较复杂的布局

js运动框架之掉落的扑克牌（重心、弹起效果）

玩过电脑自带纸牌游戏的同志们应该都知道,游戏过关后扑克牌会依次从上空掉落,落下后又弹起,直至"滚出"屏幕. 效果如图:    这个案例的具体效果就是:点击开始运动,纸牌会从右上角掉落下来,之后弹起,运动的速度会逐渐减慢,直到越出屏幕后,全部纸牌消失,在右上角会重新出现一张纸牌,继续动作,一再往复. 具体代码如下: 1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta ch

cocos2dx之实现扑克牌翻转效果的三种方法

*************************************************************************************** 时间:2015-04-10 作者:Sharing_Li 转载注明出处:http://blog.csdn.net/sharing_li/article/details/44980493 **********************************************************************

html+css+js(+JQuery)制作扑克牌图片切换效果

要实现的效果图: 先把静态页面写出来: index.html <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>jquery制作扑克牌图片切换效果<

[Shader]扑克牌搓牌效果

<1>效果图(很简单的版本) <2> Shader "Custom/mymat" { Properties { _Color ("Color", Color) = (1,1,1,1) _MainTex ("Albedo (RGB)", 2D) = "white" {} _Glossiness ("Smoothness", Range(0,1)) = 0.5 _Metallic (&q

【Cocos2d-x】实现翻牌效果

翻牌效果可以使用CCOrbitCamera实现,这是一个CCAction,使精灵视角按照球面坐标轨迹 围绕屏幕中心进行旋转.[关于CCOrbitCamera] 翻牌需要两个精灵,一个表示牌的正面,一个表示牌的背面.当执行翻牌动作的时候:初始化正面的角度为向左90度.背面为0度--背面向右旋转90度--正面向右旋转90度,这就实现了一个翻牌的效果. api说明: t:动作时长 radius:球的半径 deltaRadius:球半径偏移量 angleZ:开始时z轴角度 deltaAngleZ:z轴角