css3 réalise une animation de proposition

Cet article présente principalement l'implémentation d'une petite animation de demande en mariage en CSS3, qui a une certaine valeur de référence. Maintenant, je la partage avec tout le monde. Les amis dans le besoin peuvent s'y référer

Je l'ai lu. hier sur le compte public WeChat Après avoir lu cet article, j'ai tout de suite senti que CSS était trop puissant. Tant qu'on a envie de le faire, tout est possible !

Affichez d'abord les rendus

Puis analysez-le étape par étape :

Le premier est l'animation du marié qui vient d'apparaître

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

Points de connaissance qui y sont utilisés :

• animation : est un attribut abrégé permettant de définir six attributs d'animation

• animation-name spécifie le nom de l'image clé qui doit être lié au sélecteur

• animation-duration spécifie le temps nécessaire pour terminer l'animation, en secondes ou en millisecondes

• animation-timing-function spécifie la courbe de vitesse de l'animation

• animation- delay spécifie le délai d'animation avant le démarrage

• animation-iteration-count spécifie le nombre de fois que l'animation doit être jouée

• animation-direction précise si l'animation doit être jouée à l'envers à tour de rôle

• images clés : permet aux développeurs de spécifier des moments spécifiques dans l'animation. Cliquez sur le style d'image clé (ou point d'arrêt) qui doit être affiché pour contrôler la partie centrale de l'animation CSS. Cela permet aux développeurs de contrôler plus de détails dans l'animation plutôt que de laisser le navigateur gérer tout cela automatiquement

• transformer Appliquer la conversion 2D ou 3D. Cette propriété nous permet de faire pivoter, redimensionner, déplacer ou incliner l'élément

然后是那朵花的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实现动画自行车效果

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!