> 웹 프론트엔드 > CSS 튜토리얼 > CSS를 사용하여 간단한 하트비트 효과를 만드는 방법을 단계별로 가르칩니다(자세한 코드 설명).

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

奋力向前
풀어 주다: 2021-08-24 14:01:28
원래의
3066명이 탐색했습니다.

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

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标签中输入*lia文本的边框外部和元素距离为0、默认值、掉删下划线,代码示例。

*{margin:0; padding:0;}
li{list-style:none;}
a{text-decoration:none;}
로그인 후 복사

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

*{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>를 추가한 다음 스타일에 *를 입력하세요. 태그. lia 텍스트의 외부 테두리와 요소 사이의 거리는 0이며 기본값이며 밑줄이 제거됩니다. 코드 예입니다. CSS를 사용하여 간단한 하트비트 효과를 만드는 방법을 단계별로 가르칩니다(자세한 코드 설명).

@keyframes scale{ /*动画帧*/ 50%{transform:scale(2)} }
로그인 후 복사
3 다음으로 head 태그를 사용하여 heart 코드를 추가하고 style에 텍스트의 상대적 위치와 너비를 입력합니다. 태그, 높이 및 여백 속성은 1 ~ 4 값을 가질 수 있으며, 전환 애니메이션, 코드 예시

rrreee

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

rrreee

코드 효과


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

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

코드 예시

rrreee

코드 효과

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

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

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 추천
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿