jQuery+css3拆红包抽奖

1、新建html文档。

2、书写hmtl代码。

<div class="opacity"></div>

<div class="red"><img src="images/asd23.png"></div>

<div class="windows">

 <div class="text">恭喜抽中棒棒糖一枚！</div>

 <div class="close"><img src="images/close.png"/></div>

</div>

3、书写css代码。

<style>

* { 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>

4、书写并添加js代码。

<script src="js/jquery-1.4.2.min.js"></script>

<script>

$(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>

5、代码整体结构。

6、查看效果。