Bringen Sie Ihnen Schritt für Schritt bei, wie Sie mit CSS einen einfachen Heartbeat-Effekt erstellen (detaillierte Code-Erklärung)

Im vorherigen Artikel „Lernen Sie Schritt für Schritt, wie Sie mit CSS3 Animationseffekte zu Text hinzufügen (mit Code) “ habe ich vorgestellt, wie Sie mit CSS3 Animationseffekte zu Text hinzufügen. In diesem Artikel erfahren Sie, wie Sie mit CSS einen einfachen Heartbeat-Effekt erstellen.

So erstellen Sie mit CCS einen einfachen Herzschlageffekt: Fügen Sie einfach ein Feld hinzu und nutzen Sie CCS vollständig, um ihn anzuzeigen.

1. Zuerst fügen wir der Seite ein visuelles Feld hinzu, erstellen ein neues Dokument und schreiben zuerst den Code mit <div class="heart"></div> Diese Zeichenfolge Der Code befindet sich im

-Tag des Frames. <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

Codebeispiel

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

Html-Code-Vervollständigung.

2. Verwandeln Sie es zuerst in ein Herz, legen Sie die Animation und den Schriftstil fest und binden Sie die Animation mit dem Herzattribut an das div-Element. So schreiben Sie den Code: Verwenden Sie Fügen Sie <style type></style> zwischen den head-Tags hinzu und geben Sie dann * in den Stil ein Tag. Der Abstand zwischen dem äußeren Rand von li und a Text und dem Element ist 0, Standardwert, Unterstreichung wird entfernt, Codebeispiel.

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

3. Fügen Sie als Nächstes mit dem Tag head den Code heart hinzu und geben Sie die relative Positionierung und Breite des Textes im style ein Tag, Höhen- und Randattribute können die Werte 1, Übergangsanimation, Codebeispiel

rrreee

4 haben. Legen Sie schließlich die Animation animation fest Hier möchte ich sagen, dass animation zusammen mit @keyframes verwendet werden muss. Verwenden Sie weiterhin head-Tags zwischen style Tags Geben Sie die absolute Positionierung, die Breite, die Höhe, die Farbe, das Attribut content, die abgerundete Ecke des äußeren Rands, das gedrehte Element und den Code-Beispielcode ein. Wir machen es horizontal und Vertikaler Doppelzoom

Codebeispiel

rrreee
Codeeffekt

Der Effekt ist out, er ist ein bisschen interessant. Freunde, die schön werden wollen, können ihn schließlich selbst modifizieren Es ist für jeden schwierig, seine Ästhetik anzupassen. Schließlich kann ich es auch nicht. Jeder erkennt mich und ich kann nur hart daran arbeiten, die Arbeit so weit wie möglich zu perfektionieren.

【Ende】

Empfohlenes Lernen: CSS3-Video-Tutorial

🎜