집 > 기사 > 웹 프론트엔드 > CSS를 사용하여 테두리 애니메이션 만들기

CSS를 사용하여 테두리 애니메이션 만들기

WBOY앞으로: 2023-09-08 08:57:091211검색

使用 CSS 创建边框动画

CSS는 웹 페이지에 움직임과 흥미를 더하는 아름답고 매력적인 테두리 애니메이션을 만드는 데 사용됩니다. 테두리 애니메이션을 만들려면 먼저 애니메이션을 적용할 요소에 대한 테두리를 정의해야 합니다.

CSS 전환 및 애니메이션을 사용하여 테두리에 움직임을 추가하세요.

테두리 애니메이션은 버튼, 링크 및 기타 대화형 요소에 호버 효과를 만드는 데 사용할 수 있습니다. 또한 페이지나 요소가 로드되는 동안 진행 상황을 표시하는 로딩 애니메이션을 만드는 데에도 사용할 수 있습니다. -더 눈에 띄게 만드는 작업 버튼.

접근 - 1

사용자가 요소 위로 마우스를 가져갈 때 요소의 테두리에 애니메이션을 적용하는 호버 효과를 만들어 보겠습니다.

알고리즘

HTML 문서를 만들고 제목을 "호버 효과 테두리 애니메이션"으로 정의합니다.
무한 지속 시간과 이지아웃 타이밍으로 테두리에 펄스 애니메이션을 추가하세요. 테두리를 빨간색에서 녹색, 파란색으로 페이드하고 마우스가 상자 위에 있을 때 진동하는 애니메이션을 비활성화합니다.
테두리 색상을 빨간색에서 녹색, 파란색으로 변경하는 키프레임으로 펄스 애니메이션을 정의합니다. HTML 문서의 본문에 상자 클래스가 있는 div 요소를 추가합니다.
호버 효과 테두리 애니메이션을 보려면 HTML 파일을 웹 브라우저에 저장하고 확인하세요.

Example

의 중국어 번역은

Example

입니다. 으아악

방법 - 2

여기에서는 로딩 아이콘 테두리에 애니메이션을 적용하여 로딩 애니메이션을 만들어 보겠습니다.

알고리즘

선언을 사용하여 문서 유형을 HTML로 선언합니다.
태그를 열어 HTML 문서를 시작하세요.
태그 안에 태그를 추가하세요.
태그 안에 태그를 추가하고 문서 제목을 "테두리 애니메이션 로드 중"으로 설정하세요. </p></li> <li><p><head> 태그 안에 <style> 태그를 추가하여 문서에 스타일을 추가하세요.</p></li> <li><p><style> 태그 안에 CSS 규칙을 추가하여 로딩 애니메이션 중앙 정렬 및 배경색 설정 등 <body> </p></li>크기, 모양, 테두리 색상 및 애니메이션 속성을 설정하여 로딩 애니메이션의 스타일을 지정하는 CSS 규칙을 추가하세요. <li><p> </p></li>@keyframes 규칙을 사용하여 "spin"이라는 애니메이션을 만듭니다. <li><p> </p></li>요소를 360도 회전하려면 변환 규칙을 추가하세요.<li><p> </p></li><body> 태그 안에 "loading" 클래스가 있는 <div> 요소를 추가하여 로딩 애니메이션을 표시하세요.<li> <p> </p> </li>Example</ul>의 중국어 번역은 <h3>Example</h3>입니다. 으아악 <h3>접근 - 3</h3> <h2>CSS를 사용하여 클릭 유도 문구 버튼에 테두리 애니메이션을 적용하겠습니다. </h2> <p>알고리즘</p> <h3> </h3> <ul class="list">컨테이너를 만들고 중앙에 배치하세요.<li><p> </p></li>처음에는 투명한 테두리와 전환 속성으로 요소의 스타일을 지정하여 0.5초 안에 테두리에 애니메이션을 적용합니다. <li><p> </p></li>빨간색, 녹색, 파란색의 세 가지 색상의 선형 그라데이션으로 테두리를 변경하는 요소에 대한 호버 효과를 만듭니다.<li><p> </p></li>시간이 지남에 따라 요소의 테두리 색상을 변경하려면 "border-pulse"라는 키프레임 애니메이션을 정의하세요. <li><p> </p></li>요소의 초기 상태에 "border-pulse" 애니메이션을 적용합니다. <li><p> </p></li>요소 위에 마우스를 올리면 "없음"으로 설정하여 "테두리 펄스" 애니메이션을 비활성화합니다.<li> <p> </p> </li>Example</ul>의 중국어 번역은 <h3>Example</h3>입니다. 으아악 <h3>결론</h3> <h2>그러나 테두리 애니메이션은 특히 과도하게 사용되거나 큰 요소에 적용될 때 성능 문제를 일으킬 수 있으며, 이로 인해 페이지 로드 시간이 느려지고 전반적인 성능이 저하됩니다. 일부 오래된 웹 브라우저는 특정 애니메이션 기술을 지원하지 않을 수 있습니다. </h2> <p>SVG 그래픽과 JavaScript를 사용하여 테두리 애니메이션을 만들 수도 있습니다. 더 복잡한 애니메이션이 가능하고 애니메이션에 대한 더 많은 제어 기능을 제공합니다. </p><p>위 내용은 CSS를 사용하여 테두리 애니메이션 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!</p></div><div class="nphpQianMsg"><a href="javascript:void(0);">JavaScript</a> <a href="javascript:void(0);">css</a> <a href="javascript:void(0);">html</a> <a href="javascript:void(0);">define</a> <a href="javascript:void(0);">for</a> <a href="javascript:void(0);">while</a> <a href="javascript:void(0);">class</a> <a href="javascript:void(0);">display</a> <a href="javascript:void(0);">padding</a> <a href="javascript:void(0);">border</a> <a href="javascript:void(0);">background</a> <a href="javascript:void(0);">transform</a> <a href="javascript:void(0);">animation</a><div class="clear"></div></div><div class="nphpQianSheng"><span>성명：</span><div>이 기사는 tutorialspoint.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제</div></div></div><div class="nphpSytBox"><span>이전 기사：<a class="dBlack" title="CSS3 팁: fit-content 속성을 가로 중앙에 적용" href="http://m.php.cn/ko/faq/604025.html">CSS3 팁: fit-content 속성을 가로 중앙에 적용</a></span><span>다음 기사：<a class="dBlack" title="CSS3 팁: fit-content 속성을 가로 중앙에 적용" href="http://m.php.cn/ko/faq/604033.html">CSS3 팁: fit-content 속성을 가로 중앙에 적용</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>관련 기사</h2><em><a href="http://m.php.cn/ko/article.html" class="bBlack"><i>더보기</i><b></b></a></em><div class="clear"></div></div><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/ko/faq/347776.html" title="JSDOMReady 이벤트의 6가지 구현 방법 요약" class="aBlack">JSDOMReady 이벤트의 6가지 구현 방법 요약</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ko/faq/348838.html" title="페이지의 다양한 열 레이아웃에 대한 CSS 구현 예" class="aBlack">페이지의 다양한 열 레이아웃에 대한 CSS 구현 예</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ko/faq/349106.html" title="순수한 CSS3 전체 화면 반응형 슬라이드쇼 효과" class="aBlack">순수한 CSS3 전체 화면 반응형 슬라이드쇼 효과</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ko/faq/349108.html" title="순수한 CSS3의 멋지고 다채로운 3D 버튼 스타일" class="aBlack">순수한 CSS3의 멋지고 다채로운 3D 버튼 스타일</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ko/faq/349109.html" title="놀라운 CSS3 육각형 메뉴 애니메이션 효과" class="aBlack">놀라운 CSS3 육각형 메뉴 애니메이션 효과</a><div class="clear"></div></li></ul></div></div><div class="nphpFoot"><div class="nphpFootBg"><ul class="nphpFootMenu"><li><a href="http://m.php.cn/ko/"><b class="icon1"></b><p>집</p></a></li><li><a href="http://m.php.cn/ko/course.html"><b class="icon2"></b><p>강의</p></a></li><li><a href="http://m.php.cn/ko/wenda.html"><b class="icon4"></b><p>Q&A</p></a></li><li><a href="http://m.php.cn/ko/login"><b class="icon5"></b><p>나의</p></a></li><div class="clear"></div></ul></div></div><div class="nphpYouBox" style="display: none;"><div class="nphpYouBg"><div class="nphpYouTitle"><span onclick="$('.nphpYouBox').hide()"></span><a href="http://m.php.cn/ko/"></a><div class="clear"></div></div><ul class="nphpYouList"><li><a href="http://m.php.cn/ko/"><b class="icon1"></b><span>집</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/course.html"><b class="icon2"></b><span>강의</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/article.html"><b class="icon3"></b><span>기사</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/wenda.html"><b class="icon4"></b><span>Q&A</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/dic.html"><b class="icon6"></b><span>사전</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/course/type/99.html"><b class="icon7"></b><span>수동</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/xiazai/"><b class="icon8"></b><span>다운로드</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/faq/zt" title="주제"><b class="icon12"></b><span>주제</span><div class="clear"></div></a></li><div class="clear"></div></ul></div></div><div class="nphpDing" style="display: none;"><div class="nphpDinglogo"><a href="http://m.php.cn/ko/"></a></div><div class="nphpNavIn1"><div class="swiper-container nphpNavSwiper1"><div class="swiper-wrapper"><div class="swiper-slide"><a href="http://m.php.cn/ko/" >집</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/article.html" class="hover">기사</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/wenda.html" >Q&A</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/course.html" >강의</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/faq/zt" >주제</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/xiazai" >다운로드</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/game" >게임</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/dic.html" >사전</a></div><div class="clear"></div></div></div><div class="langadivs" ><a href="javascript:;" class="bg4 bglanguage"></a><div class="langadiv" ><a onclick="javascript:setlang('zh-cn');" class="language course-right-orders chooselan " href="javascript:;"><span>简体中文</span><span>（ZH-CN）</span></a><a onclick="javascript:setlang('en');" class="language course-right-orders chooselan " href="javascript:;"><span>English</span><span>（EN）</span></a><a onclick="javascript:setlang('zh-tw');" class="language course-right-orders chooselan " href="javascript:;"><span>繁体中文</span><span>（ZH-TW）</span></a><a onclick="javascript:setlang('ja');" class="language course-right-orders chooselan " href="javascript:;"><span>日本語</span><span>（JA）</span></a><a onclick="javascript:;" class="language course-right-orders chooselan chooselanguage" href="javascript:;"><span>한국어</span><span>（KO）</span></a><a onclick="javascript:setlang('ms');" class="language course-right-orders chooselan " href="javascript:;"><span>Melayu</span><span>（MS）</span></a><a onclick="javascript:setlang('fr');" class="language course-right-orders chooselan " href="javascript:;"><span>Français</span><span>（FR）</span></a><a onclick="javascript:setlang('de');" class="language course-right-orders chooselan " href="javascript:;"><span>Deutsch</span><span>（DE）</span></a></div></div><script> var swiper = new Swiper('.nphpNavSwiper1', { slidesPerView : 'auto', observer: true,//修改swiper自己或子元素时，自动初始化swiper observeParents: true,//修改swiper的父元素时，自动初始化swiper }); </script></div></div><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了，就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body></html>