css实现一个表白求婚动画效果代码-html代码-BFW代码库

css实现一个表白求婚动画效果代码

代码语言：html

所属分类：表白

代码描述：css实现一个表白求婚动画效果代码

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

<html>

<head>
    <meta charset="utf-8">
    <style>
        /*top 烟花字体 */
    .w-t{
    	margin: 100px auto;
    	width: 500px;
    }
    .w-t img{
    	opacity: 0;
        animation: bloom 2s ease 1.2s infinite;
    }
    .w-t img.boom2{
    	float: right;
    	animation: bloom 2s ease 1.5s infinite;
    }
    .w-t img.boom3{
    	position: absolute;
    	margin-top: 40px;
    	animation: bloom 2s ease 1.4s infinite;
    }
    @keyframes bloom{
    	0% {
    	    transform: scale(0,0);
    	}
    	100% {
    		opacity: 1;
    	    transform: scale(1,1);
    	}
    }
    .w-t-m{
    	position: absolute;
    	left: 50%;
    	z-index: 10;
    	line-height: 80px;
    	color: #ff720a;
    	letter-spacing: 5px;
    	opacity: 0;
    	animation: titleBloom 1s linear 1s both;
    	font-size: 26px;
        margin-left: -125px;
    }
    @keyframes titleBloom{
    	0% {
    	    transform: translate(-50px);
    	}
    	100% {
    		opacity: 1;
    	    transform: translate(0);
    	}
    }
    /*人物类 */
    .w-p{
    	margin: -50px auto;
    	width: 1000px;
    	overflow: hidden;
    }
    .w-m{
    	float: left;
    	width: 50%;
    }
    .w-m img{
    	margin-right: 0;
    	float: right;
    	margin-top: 60px;
    	animation: toWoman 0.5s ease .5s both;
    }
    @keyframes toWoman{
    	0%{
    		opacity: 0;
    		transform: translate(-200px);
    	}
    	100%{
    		opacity: 1;
    		transform: translate(0);
    	}
    }
    .w-w{
    	float: right;
    	width: 50%;
    }
    .w-w img{
    	margin-left: 0;
    	float: left;
    	animation: showW 0.8s ease 0s both;
    }
    @keyframes showW{
    	0%{
    		opacity: 0;
    	}
    	100%{
    		opacity: 1;
    	}
    }
    .w-f{
        position: absolute;
        z-index: 20;
        left: 50%;
        margin-left: -30px;
        margin-top: 75px;
    }
    .w-f img{
    	width: 60px;
    	animation: show 0.4s ease 1s both;
    }
    
    @keyframes show{
    	0%{
    		opacity: 0;
    		transform: scale(0.1,0.1);
    	}
    	100%{
    		opacity: 1;
    		transform: scale(1,1);
    	}
    }
    .w-p:after{
    	clear:both;clear:both;content:'.';display:block;height:0;visibility:hidden;overflow:hidden;
    }
    /*flowers*/
    .w-fls{
    	width: 820px;
    	margin: 0 auto;
    }
    .w-fls img{
    	height: 120px;
    	z-index: 400;
    	animation: showFlows 0.4s ease 2.3s both;
    }
    @keyframes showFlows{
    	0%{
    		opacity: 0;
    		transform: translate(0,200px);
    	}
    	100%{
    		opacity: 1;
    		transform: translate(0);
    	}
    }
    .w-2{
.........完整代码请登录后点击上方下载按钮下载查看