css3 realizes proposal animation

This article mainly introduces the implementation of small animation of marriage proposal in CSS3, which has certain reference value. Now I share it with you. Friends in need can refer to it.

I read it yesterday on the WeChat public account After reading this article, I instantly felt that CSS is too powerful. As long as you want to do it, everything is possible!

First show the renderings

And then analyze it step by step:

The first is the animation of the groom who just appeared

.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);
	}
}

Knowledge points used in it:

• animation: is a shorthand attribute used to set six animation attributes

• ##animation -name specifies the keyframe name that needs to be bound to the selector

• animation-duration specifies the time it takes to complete the animation, in seconds or milliseconds

• animation-timing-function specifies the speed curve of the animation

• animation-delay specifies before the animation starts The delay

• animation-iteration-count specifies the number of times the animation should play

• animation -direction specifies whether the animation should be played in reverse in turn

• keyframes:Allows developers to specify specific time points in the animation that must Display keyframe styles (or stop points) to control the middle links of CSS animations. This allows developers to control more details in the animation rather than letting the browser handle it all automatically

• transform Apply 2D or 3D conversion. This property allows us to rotate, scale, move or tilt the element

然后是那朵花的css

.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);
	}
}

文字部分的css

.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-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-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;
}

    写到这里，觉得前端开发原来是这么有趣的一件事哈~

相关推荐：

CSS3实现扇形动画菜单流程详解

http://css3实现动画自行车效果

The above is the detailed content of css3 realizes proposal animation. For more information, please follow other related articles on the PHP Chinese website!