css实现微信红包打开拆开动画效果代码-html代码-BFW代码库

css实现微信红包打开拆开动画效果代码

代码语言：html

所属分类：红包

代码描述：css实现微信红包打开拆开动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
   <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/animate.3.5.1.css">
 <style>

.open-envelopes{
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 88;
	top: 0;
	left: 0;
	background-color: rgba(0,0,0,0.4);
}
.envelopes-container{
	position: absolute;
	width: 5.2rem;
	height: 6.5rem;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
	-moz-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	background-image: url(//repo.bfw.wiki/bfwrepo/icon/5de0a5e2a0a06.png);
	background-size: 100% auto;
	background-repeat: no-repeat;
}
.opened{
	overflow: hidden;
}
.opened >h5{
	display: block;
	color: #FFE300;
	font-size: 0.7rem;
	text-align: center;
	margin-top: 0.75rem;
	font-weight: 400;
}
.opened >h5 small{
	font-size: 0.3rem;
	padding-left: 0.05rem;
}
.open-time{
	position: absolute;
    bottom: 0.7rem;
    width: 100%;
    text-align: center;
    font-size: 0.24rem;
    color: #FF868A;
}
.open-close{
	position: absolute;
	width: 0.31rem;
	height: 0.31rem;
	overflow: hidden;
	right: 0.35rem;
	top: 0.35rem;
}
.open-close img{
	width: 100%;
}
.no-open{
	position: absolute;
    width: 1.74rem;
    height: 1.75rem;
    z-index: 88;
    overflow: hidden;
    border-radius: 50%;
    left: 1.7rem;
    top: 1.75rem;
}
.no-open img{
	width: 100%;
}

.head-image{
	width: 100%;
	text-align: center;
}
.head-image span{
	display: inline-block;
	width: 1.2rem;
	height: 1.2rem;
	overflow: hidden;
	border-radius: 50%;
	margin-top: 0.5rem;
}
.head-image span img{
	width: 100%;
}
.head-image >small{
	display: block;
	width: 100%;
	font-size: 0.26rem;
	padding: 0.2rem 0;
	color: #FFDDDF;
}

body,h5{
	margin:0;
	padding:0;
	list-style:none;
	font-family: "微软雅黑";
	-webkit-appearance: none;
}
html{
	max-width: 750px;
    margin: 0 auto;
}
body{
	font-size: 0.24rem;
	background-color: #ffffff;
	overflow-x: hidden;
}
img {
	border:0px;
}

/**begining**/
.whol.........完整代码请登录后点击上方下载按钮下载查看