recherche

Maison >interface Web >tutoriel CSS >Pure CSS3 crée un effet spécial animé où l'ombre de la bordure s'étend vers l'extérieur

Pure CSS3 crée un effet spécial animé où l'ombre de la bordure s'étend vers l'extérieur

青灯夜游
青灯夜游original
2021-08-25 17:53:056082parcourir

Dans l'article précédent "Vous apprendre étape par étape comment utiliser CSS3 pour implémenter des effets dynamiques de survol et de clignotement des boutons", nous avons présenté la méthode d'utilisation de CSS3 pour ajouter des effets dynamiques aux boutons et obtenir une animation d'ombre clignotante et de survol des boutons. effet. Intéressé Vous pouvez en apprendre davantage ~

Aujourd'hui, cet article partagera avec vous un effet d'animation de bordure. Voyons comment utiliser CSS3 pour obtenir l'effet d'animation de l'ombre de bordure s'étendant vers l'extérieur.

Jetons d'abord un coup d'œil aux rendus :

Pure CSS3 crée un effet spécial animé où lombre de la bordure sétend vers lextérieur

Étudions comment obtenir cet effet :

Créez d'abord la partie HTML et définissez un conteneur div pour contenir du texte Texte : div容器，包含文本文字：

<div id="box">
	编程是为那些有不同想法的人准备的。。。<br /> 
	对于那些想要创造伟大事物并愿意改变世界的人。
</div>

Pure CSS3 crée un effet spécial animé où lombre de la bordure sétend vers lextérieur

然后开始定义css样式来进行修饰：调整布局样式、背景颜色、div居中对齐、字体颜色

body {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
	background: #00ac69;
}
#box {
	font-family: Arial;
	font-size: 18px;
	line-height: 30px;
	font-weight: bold;
	color: white;
	border: 2px solid;
	padding: 15px;
}

Pure CSS3 crée un effet spécial animé où lombre de la bordure sétend vers lextérieur

直角不好看，我们可以使用border-radius来将边框的四个角设置为圆角

#box {
	border-radius: 10px;
}

Pure CSS3 crée un effet spécial animé où lombre de la bordure sétend vers lextérieur

下面就是最关键的，创建影向外扩散的动画特效：我们使用animation和@keyframes来实现

  • 首先把 animation 绑定到#box元素上，使用animation属性 为@keyframes动画规定名称、设置完成动画所花费的时间、动画的速度曲线。

#box {
	animation: animated-border 1.5s infinite;
}

  • 然后就是利用@keyframes来设置动画每一帧的动作了

    这里是设置动画刚开始（0%{}）时，边框阴影为box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);；然后当动画完成（100%{}）时，边框阴影为box-shadow: 0 0 0 20px rgba(255, 255, 255, 0);，阴影距离变大、颜色变为透明。

@keyframes animated-border {
	0% {
		box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
	}

	100% {
		box-shadow: 0 0 0 20px rgba(255, 255, 255, 0);
	}
}

Pure CSS3 crée un effet spécial animé où lombre de la bordure sétend vers lextérieur

OK，大功告成！下面附上完整代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style type="text/css">
			body {
				display: flex;
				align-items: center;
				justify-content: center;
				height: 100vh;
				background: #00ac69;
			}

			#box {
				font-family: Arial;
				font-size: 18px;
				line-height: 30px;
				font-weight: bold;
				color: white;
				border: 2px solid;
				padding: 15px;
				border-radius: 10px;
				animation: animated-border 1.5s infinite;
			}

			@keyframes animated-border {
				0% {
					box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
				}

				100% {
					box-shadow: 0 0 0 20px rgba(255, 255, 255, 0);
				}
			}
		</style>
	</head>
	<body>
		<div id="box">
			编程是为那些有不同想法的人准备的。。。<br />
			对于那些想要创造伟大事物并愿意改变世界的人。
		</div>
	</body>
</html>

最后给大家介绍一下关键属性animation和@keyframes：

  • animation 属性是一个简写属性，可以在一个声明中设置多个动画属性：

animation-name：指定要绑定到选择器的关键帧的名称
animation-duration：动画指定需要多少秒或毫秒完成
animation-timing-function：设置动画将如何完成一个周期
animation-delay：设置动画在启动前的延迟间隔。
animation-iteration-count：定义动画的播放次数。
animation-direction：指定是否应该轮流反向播放动画。
animation-fill-mode：规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
animation-play-state：指定动画是否正在运行或已暂停。

  • @keyframes

    /* 定义动画*/
@keyframes 动画名称{
    /* 样式规则*/
}
/* 将它应用于元素 */
.element {
    animation-name: 动画名称（在@keyframes中已经声明好的）;
    /* 或使用动画简写属性*/
    animation: 动画名称 1s ...
}

    Pure CSS3 crée un effet spécial animé où lombre de la bordure sétend vers lextérieur

Ensuite, commencez à définir les styles CSS à modifier

 : ajustez le style de mise en page, la couleur d'arrière-plan, l'alignement du centre div, la couleur de la police

@keyframes animated-border {
	0% {
		box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
	}

	100% {
		box-shadow: 0 0 0 20px rgba(255, 255, 255, 0);
	}
}

Pure CSS3 crée un effet spécial animé où lombre de la bordure sétend vers lextérieur

Les angles droits n'ont pas l'air bien, nous pouvons utiliser border-radius pour définir les quatre coins de la bordure sur des coins arrondisrrreee

Pure CSS3 crée un effet spécial animé où lombre de la bordure sétend vers lextérieur🎜🎜🎜Le Voici ce qui suit : La chose la plus importante est de créer l'effet d'animation de l'ombre qui s'étend vers l'extérieur : 🎜Nous utilisons l'animation et les @keyframes pour y parvenir🎜
  • 🎜Première liaison animation vers #box Sur l'élément, utilisez l'attribut animation pour spécifier un nom pour l'animation @keyframes, définir le temps nécessaire pour terminer l'animation et la courbe de vitesse de l'animation. 🎜🎜🎜rrreee
    • 🎜Ensuite utilisez @keyframes pour définir l'action de chaque image de l'animation🎜🎜Voici le début du paramétrage de l'animation (0% {} ), l'ombre de la bordure est box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);; puis lorsque l'animation est terminée (100%{}), la bordure l'ombre est box-shadow: 0 0 0 20px rgba(255, 255, 255, 0);, la distance de l'ombre devient plus grande et la couleur devient transparente.
      🎜🎜🎜rrreee🎜6. gif🎜🎜OK, c'est fini ! Le code complet est joint ci-dessous : 🎜rrreee🎜Enfin, je vais vous présenter les attributs clés animation et @keyframes : 🎜
      • L'attribut 🎜animation est un attribut raccourci qui peut définir plusieurs attributs d'animation dans une seule instruction : 🎜🎜🎜rrreee
        • 🎜@ La règle des images clés est utilisée pour définir le comportement d'une période d'animation CSS ; elle doit être utilisée avec l'attribut animation pour créer des effets d'animation simples. 🎜🎜🎜🎜 Une règle @keyframe est constituée du mot clé "@keyframe", suivi d'un identifiant donnant le nom de l'animation (qui sera référencée à l'aide de animation-name), suivi d'un ensemble de règles de style (délimitées par des accolades ). L'animation est ensuite appliquée à l'élément en utilisant l'identifiant comme valeur de l'attribut animation-name. Par exemple : 🎜rrreee🎜 Dans les accolades de la règle @keyframes, nous devons définir des images clés ou des waypoints qui spécifient la valeur de la propriété animée à un moment précis de l'animation. Cela nous permet de contrôler les étapes intermédiaires de la séquence d'animation. Par exemple, dans l'exemple ci-dessus : 🎜rrreee🎜La plate-forme de sites Web chinois PHP propose de nombreuses ressources pédagogiques vidéo. Tout le monde est invité à apprendre le "🎜Tutoriel vidéo CSS🎜" ! 🎜

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!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comment créer rapidement une animation de chargement en 3 points avec CSSArticle suivant：Comment créer rapidement une animation de chargement en 3 points avec CSS

Articles Liés

Voir plus