×

玩一个拆红包抽奖的案例

作者:andy0012018.12.26来源:Web前端之家浏览:2007评论:0
关键词:红包摇一摇

玩一个拆红包抽奖的案例,学一下咯。

<!DOCTYPE HTML>    
<html>    
<head>    
<meta charset="utf-8">    
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0">    
<title>玩一个拆红包抽奖的案例</title>    
<style type="text/css">    
*{    
	margin:0;    
	padding:0;    
	list-style: none;    
	border: 0;    
}    
@-webkit-keyframes shake {    
	0% {    
		-webkit-transform: rotate(2deg) translate3d(0,0,0)    
	}    
	50% {    
		-webkit-transform: rotate(-2deg) translate3d(0,0,0)    
	}    
	100% {    
		-webkit-transform: rotate(2deg) translate3d(0,0,0)    
	}    
}    
@-moz-keyframes shake {    
	0% {    
		transform: rotate(2deg) translate3d(0,0,0)    
	}    
	50% {    
		transform: rotate(-2deg) translate3d(0,0,0)    
	}    
	100% {    
		transform: rotate(2deg) translate3d(0,0,0)    
	}    
}    
@-ms-keyframes shake {    
	0% {    
		transform: rotate(2deg) translate3d(0,0,0)    
	}    
	50% {    
		transform: rotate(-2deg) translate3d(0,0,0)    
	}    
	100% {    
		transform: rotate(2deg) translate3d(0,0,0)    
	}    
}    
.red{    
	width: 300px;    
	height: 345px;    
	border-radius: 15px;    
	box-shadow: 1px 1px 20px #666;    
	position: fixed;    
	top:50%;    
	left: 50%;    
	overflow: hidden;    
	margin-left: -150px;    
	margin-top: -172px;    
	transform-origin: 50% 100%;    
	-webkit-transform-origin: 50% 100%;    
}    
.red img{    
	width:100%;    
	height: auto;    
}    
.red.shake{    
	animation:shake .2s infinite linear;    
	-webkit-animation:shake .2s infinite linear;    
}    
.windows{    
	width: 300px;    
	height: 200px;    
	position: absolute;    
	top: 50%;    
	margin-top: -100px;    
	left: 50%;    
	margin-left: -150px;    
	border-radius: 15px;    
	background: #c7c7c7;    
	display: none;    
	z-index: 11;    
}    
.text{    
	text-align: center;    
	font-size: 18px;    
	font-family: "微软雅黑";    
	vertical-align:middle;    
	padding-top:60px;    
}    
.close{    
	width: 30px;    
	height: 30px;    
	position: absolute;    
	right: -10px;    
	top: -10px;    
	background: #c7c7c7;    
	border-radius: 50%;    
	cursor: pointer;    
	text-align: center;    
	transition:all 0.5s linear;    
	-webkit-transition:all 0.5s linear;    
	-moz-transition:all 0.5s linear;    
	-ms-transition:all 0.5s linear;    
	-o-transition:all 0.5s linear;    
}    
.close:hover{    
	transform:rotate(180deg);    
	-webkit-transform:rotate(180deg);    
	-moz-transform:rotate(180deg);    
	-ms-transform:rotate(180deg);    
	-o-transform:rotate(180deg);    
}    
.close img{    
	padding-top: 5px;    
}    
.opacity{    
	position: absolute;    
	top: 0;    
	left: 0;    
	right: 0;    
	bottom:0;    
	background: #000;    
	opacity:0.5;    
	filter:alpha(opacity=50);    
	z-index: 10;    
	width: 100%;    
	height: 100%;    
	display: none;    
}    
</style>    

</head>    
<body>    
<div class="opacity"></div>    
<div class="red"><img src="/demo/redbag.png"></div>    
<div class="windows">    
	<div class="text">恭喜抽中棒棒糖一枚!</div>    
	<div class="close"><img src="/demo/close.png"/></div>    
</div>  
<script type="text/javascript" src="/demo/js/jq.js"></script>    
<script type="text/javascript">    
$(document).ready(function(){    
	$(".red").click(function(){    
		$(this).addClass("shake");    
		setTimeout(function(){    
			$(".red").removeClass("shake");    
			$(".windows").fadeIn();    
			$(".opacity").fadeIn();    
		},2000);    
	});    
	$(".close").click(function(){$(this).parent().fadeOut();$(".opacity").fadeOut()})    
});    
</script>        
</body>    
</html>

大家看下咯,或许能用上。

温馨提示:本文作者系 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/hongbao23402385409238.html

网友评论文明上网理性发言 已有0人参与

发表评论:

最新留言

  • 开创者素材

    网站资源下载站,交换个友链如何?www.kaicz.com...

  • CSS66

    关于CSS组合选择符总结得全面,学习了!...

  • 新闻头条

    文章不错支持一下吧...

  • 新闻头条

    文章不错非常喜欢...

  • js666

    promise很强大,可以干好多事情。。。...

  • 子午物联网

    这个博客,由衷的喜欢...

  • 访客

    文章不错,非常喜欢...

  • cnwebe

    新媒体运营交换友情链接https://www.cnwebe.com换吗...

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2019 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.5.2 Zero