Apprenez étape par étape à utiliser CSS pour créer un simple effet de battement de cœur (explication détaillée du code)

Dans l'article précédent "Vous apprendre étape par étape comment utiliser CSS3 pour ajouter des effets d'animation au texte (avec code) ", j'ai présenté comment utiliser CSS3 pour ajouter des effets d'animation au texte. Cet article vous présentera comment utiliser CSS pour créer un simple effet de battement de cœur. Voyons comment le faire ensemble.

Comment créer un effet de battement de coeur simple avec ccs, ajoutez simplement une boîte et utilisez pleinement ccs pour l'afficher.

1. Tout d'abord, nous ajoutons une boîte visuelle à la page, créons un nouveau document et écrivons d'abord le code en utilisant <div class="heart"></div> Cette chaîne. du code est dans la balise frame

. <div class="heart"></div>这串代码在框架<div>标签。<p>代码示例</p><pre class="brush:php;toolbar:false"> &lt;body&gt; &lt;div class=&quot;heart&quot;&gt;&lt;/div&gt; &lt;/body&gt;</pre><p> Html代码完成。</p> <p>2、将它先变成一颗心，使用<code>css设置动画及字体样式，heart属性使用将动画与div元素绑定，下面给大家怎么写代码，使用head标签之间加入<style type></style>这串代码然后在style标签中输入*、li、a文本的边框外部和元素距离为0、默认值、掉删下划线，代码示例。

*{margin:0; padding:0;}
li{list-style:none;}
a{text-decoration:none;}

3、接着，使用head标签之间加入heart这串代码然后在style标签中输入文本的相对定位、宽度、高度、外边距属性可以有1到4个值、过渡动画，代码示例

*{margin:0; padding:0;}
li{list-style:none;}
a{text-decoration:none;}
 
.heart{
position:relative;
width:100px; 
height:100px;
margin:100px;
animation:scale 1s linear infinite;  
/*名称 1s 匀速 无限循环*/

4、最后设置一下动画animation，这里要说一下animation必须和@keyframes一起用，继续用head标签之间在style标签中输入绝对定位、宽度、高度、颜色、content

Exemple de code

.heart:after,
.heart:before{
position:absolute;
width:70px;
height:100%;
background-color:red;
content:"";
border-radius:50% 50% 0 0;
}
.heart:before{
left:0;
transform:rotate(-52deg);
}
.heart:after{
right:0;
transform:rotate(49deg);

Achèvement du code HTML.

2. Transformez-le d'abord en cœur, utilisez css pour définir l'animation et le style de police, et utilisez l'attribut heart pour lier l'animation à l'élément div. Voici comment écrire le code, utilisez Ajoutez <code><style tapez></style> entre les balises head puis entrez * dans le style tag. La distance entre la bordure extérieure du texte li et a et l'élément est 0, valeur par défaut, le soulignement est supprimé, exemple de code.

@keyframes scale{ /*动画帧*/ 50%{transform:scale(2)} }

3. Ensuite, utilisez la balise head pour ajouter le code heart et entrez le positionnement relatif et la largeur du texte dans le style. Les attributs tag. , height et margin peuvent avoir des valeurs 1 à 4, animation de transition, exemple de code

rrreee

4 Enfin, définissez l'animation animation , ici je veux dire que <code>animation doit être utilisé avec @keyframes, continuez à utiliser les balises head entre style code> balises Entrez le positionnement absolu, la largeur, la hauteur, la couleur, l'attribut <code>content, le coin arrondi de la bordure extérieure, l'élément pivoté, l'exemple de code

rrreee

Effet de code

5. et Double zoom vertical

exemple de code

rrreee

effet de code

🎜🎜L'effet est sorti, c'est un peu intéressant Les amis qui veulent devenir beaux peuvent le modifier eux-mêmes. Après tout, les compétences esthétiques sont limitées et c'est. Difficile pour chacun d'ajuster son esthétique. Après tout, je n'y arrive pas non plus. Tout le monde me reconnaît, et je ne peux que travailler dur pour perfectionner le travail le plus possible. 🎜🎜【Fin】🎜🎜Apprentissage recommandé : 🎜Tutoriel vidéo CSS3🎜🎜