标签：js的用法
<html>
<?php require("config01.php");?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>微信红包，恭喜发财</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {background-color: #000;
}
html{
color: #fff;
font-size: 26px;
}
.container{
text-align: center;
width: 100%;
max-width: 100%;
margin: 0 auto;
padding: 15px 5px;
background-color: rgba(0,0,0,0.3);
height: 100%;
position: absolute;
}
.hongbao{
height:70%;
background: #d84e43;
position:absolute;
width: 83%;
left: 90px;
top: 10%;
border-radius: 10px;
margin: 0 auto;
}
.topcontent{
height: 800px;
border: 1px solid #e1544a;
background-color: #e1544a;
border-radius: 20px 20px 50% 50% / 20px 20px 15% 15%;
box-shadow: 0px 10px 0px -1px rgba(0,0,0,0.2);
}
.avatar{
position: relative;
}
.avatar span{
position: absolute;
top: 10px;
left: 15px;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
font-size: 2em;
font-weight: bolder;
}
#close{
color: #000;
}
.avatar img{
border: 1px solid #BD503A;
border-radius: 50%;
overflow: hidden;
margin-top: 15%;
}
.topcontent h2{
color: #f0e9b3;
margin: 40px 0;
font-size: 36px;
}
.text{
color: #f0e9b3;
font-size: 36px;
}
.description{
color: #f0e9b3;
margin: 60px 0;
font-size: 64px;
font-weight: 600;
}
#chai{
width: 250px;
height: 250px;
border: 15px solid #dcbc83;
background-color: #dcbc83;
border-radius: 50%;
color: #000;
font-size:100px;
font-weight:bold;
display: inline-block;
margin-top: -100px;
box-shadow: 0px 10px 0px 0px rgba(0, 0, 0, 0.2);
}
#chai span{
margin-top: 40px;
display: inline-block;
}
.rotate{
-webkit-animation: anim .6s infinite alternate;
-ms-animation: anim .6s infinite alternate;
animation: anim .6s infinite alternate;
}
@-webkit-keyframes anim {
from { -webkit-transform: rotateY(180deg); }
to { -webkit-transform: rotateY(360deg); }
}
@-ms-keyframes anim {
from { -ms-transform: rotateY(180deg); }
to { -ms-transform: rotateY(360deg); }
}
@keyframes anim {
from { transform: rotateY(180deg); }
to { transform: rotateY(360deg); }
}
</style>
</head>
<body>
<div class="container" id="container">
<div class="hongbao">
<div class="topcontent">
<div class="avatar">
<img src="http://wx2015.oss-cn-shanghai.aliyuncs.com/caishen_bg.png" width="150px" height="150px">
<span style="color: #4e4b47">+</span>
</div>
<h2>财神丨微信</h2>
<span class="text">给你发了一个红包</span>
<div class="description">恭喜发财 大吉大利!</div>
</div>
<div class="chai" id="chai">
<span>開</span>
</div>
</div>
</div>
<script>
var oChai = document.getElementById("chai");
var oClose = document.getElementById("close");
var oContainer = document.getElementById("container");
oChai.onclick = function (){
oChai.setAttribute("class", "rotate");
setTimeout(function(){
location.href="zhu.php";
},1500)
}
oClose.onclick = function (){
oContainer.style.display = "none";
}
</script>
</body>
</html>标签：js的用法
原文地址：http://11789214.blog.51cto.com/11779214/1793385
