CSS를 사용하여 간단한 하트비트 효과를 만드는 방법을 단계별로 가르칩니다(자세한 코드 설명).

이전 글 "css3를 사용하여 텍스트에 애니메이션 효과를 추가하는 방법을 단계별로 가르쳐주세요(코드 포함) "에서는 CSS3를 사용하여 텍스트에 애니메이션 효과를 추가하는 방법을 소개했습니다. 이 글에서는 CSS를 사용하여 간단한 하트비트 효과를 만드는 방법을 소개합니다.

ccs로 간단한 심장박동 효과를 만드는 방법은 상자를 추가하고 ccs를 최대한 활용하여 표시하면 됩니다.

1 먼저 페이지에 시각적 상자를 추가하고 새 문서를 만든 다음 <div class="heart"></div>를 사용하여 코드를 작성합니다. 코드는

태그 프레임에 있습니다. <div class="heart"></div>这串代码在框架<div>标签。<p>代码示例</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'> &lt;body&gt; &lt;div class=&quot;heart&quot;&gt;&lt;/div&gt; &lt;/body&gt;</pre><div class="contentsignin">로그인 후 복사</div></div><p> Html代码完成。</p><p>2、将它先变成一颗心，使用<code>css设置动画及字体样式，heart属性使用将动画与div元素绑定，下面给大家怎么写代码，使用head标签之间加入<style type"text/css"></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

코드 샘플

.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 코드 완성.

2. 먼저 하트로 바꾸고, css를 사용하여 애니메이션과 글꼴 스타일을 설정하고, 하트 속성을 사용하여 애니메이션을 div 요소에 바인딩하는 방법은 다음과 같습니다. 를 사용하여 head 태그 사이에 <style type "text/css"></style>를 추가한 다음 스타일에 *를 입력하세요. 태그. li 및 a 텍스트의 외부 테두리와 요소 사이의 거리는 0이며 기본값이며 밑줄이 제거됩니다. 코드 예입니다.

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

3 다음으로 head 태그를 사용하여 heart 코드를 추가하고 style에 텍스트의 상대적 위치와 너비를 입력합니다. 태그, 높이 및 여백 속성은 1 ~ 4 값을 가질 수 있으며, 전환 애니메이션, 코드 예시

rrreee

4 마지막으로 애니메이션 animation을 설정합니다. , 여기서는 animation을 @keyframes와 함께 사용해야 하며 style사이에 head 태그를 계속 사용해야 한다고 말하고 싶습니다. > 태그 절대 위치, 너비, 높이, 색상, content 속성, 외부 테두리 둥근 모서리, 회전된 요소, 코드 예시

rrreee

코드 효과

5를 입력합니다. 세로 더블 줌

코드 예시

rrreee

코드 효과

🎜🎜효과가 나왔는데 좀 재미있네요. 예뻐지고 싶은 친구들은 결국 미적 능력이 제한되어 있거든요. 다들 미학을 다듬는 게 어려운데, 결국 나도 할 수 없다. 모두가 나를 알아보고, 최대한 작품을 완성하기 위해 열심히 노력하면 된다. 🎜🎜【끝】🎜🎜추천 학습: 🎜CSS3 비디오 튜토리얼🎜🎜

위 내용은 CSS를 사용하여 간단한 하트비트 효과를 만드는 방법을 단계별로 가르칩니다(자세한 코드 설명).의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!