明天就是一年一度的5月20号了,下面的一个项目很适合表白的小伙伴哟!
因为里边有图片,也不能带入文件夹,我只能把代码先考下来,想要源码的同学可以在评论区或者私信我都行!
效果静态图
下边是代码:
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="wedding.css">
<title>模仿CSS动画的求婚小动画</title>
</head>
<body>
<div class="w-t">
<div class="w-t-m">亲爱的,嫁给我好吗?</div>
<img src="png/boom.png" alt="" class="boom1">
<img src="png/boom.png" alt="" class="boom2">
<img src="png/boom.png" alt="" class="boom3">
</div>
<div class="w-p">
<div class="w-m">
<img src="png/man.png" alt="">
</div>
<div class="w-w">
<img src="png/woman.png" alt="">
</div>
<div class="w-f">
<img src="png/flower.png" alt="">
</div>
</div>
<div class="w-fls">
<img src="png/flowers1.png" alt="">
<img src="png/flowers2.png" alt="">
<img src="png/flowers1.png" alt="">
<img src="png/flowers2.png" alt="">
<img src="png/flowers1.png" alt="">
<img src="png/flowers2.png" alt="">
</div>
<div class="w-fls w-2">
<img src="png/flowers1.png" alt="">
<img src="png/flowers2.png" alt="">
<img src="png/flowers1.png" alt="">
<img src="png/flowers2.png" alt="">
<img src="png/flowers1.png" alt="">
<img src="png/flowers2.png" alt="">
</div>
</body>
</html>
/*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{
margin-top: -130px;
padding-left: 100px;
}
.w-2 img{
animation: showFlows 0.4s ease 2.7s both;
}