웹프로그래밍

Global It Leader!!


CSS


 
 

글자 애니메이션(blinker, pulse, infinite)

페이지 정보

작성자 no_profile 운영자쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 댓글 0건 조회 111회 작성일 24-05-17 09:57

본문

<!doctype html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

  <meta name="Generator" content="EditPlus®">

  <meta name="Author" content="">

  <meta name="Keywords" content="">

  <meta name="Description" content="">

  <title>글자 애니메이션</title>

 </head>

 <body>

 <style>

 .cmtInduce { background-color:#555555; font-size:1.0em; color:#fff; padding:5px; -webkit-border-radius:5px;-moz-border-radius:5px; border-radius:5px; margin-bottom:10px; }


.blink1 { -webkit-animation-name: blinker; -webkit-animation-iteration-count: infinite; 

-webkit-animation-timing-function: cubic-bezier(1.0,0,0,1.0); -webkit-animation-duration: 2s; -webkit-animation-timing-function:ease-in-out; -webkit-animation-direction: alternate; }

@-webkit-keyframes blinker { 

 0% { opacity: 0; }

 50% { opacity: 1; }

 100% { opacity: 0.5; }

 }

.blink2 {-webkit-animation-name: blinker; -webkit-animation-name: pulse;-webkit-animation-iteration-count: infinite; 

-webkit-animation-timing-function: cubic-bezier(1.0,0,0,1.0); -webkit-animation-duration: 5s; -webkit-animation-timing-function:ease-in-out; -webkit-animation-direction: alternate; }


@-webkit-keyframes pulse {

 0% { background-color: ; opacity: 1.0; -webkit-transform: scale(1.0) rotate(0deg); }

 33% { background-color: ; opacity: 0.75; -webkit-transform: scale(0.9) rotate(0deg); }

 67% { background-color: ; opacity: 0.5; -webkit-transform: scale(1.1) rotate(0deg); }

 100% { background-color: ; opacity: 1.0; -webkit-transform: scale(1.0) rotate(0deg); }

 }

</style>

<div class="cmtInduce">

<ul class="blink2" style="text-align:center"><img src="https://moonhouse.co.kr/modules/board/skins/sketchbook5_MH/img/induce.gif" /><i class="fa fa-quote-left" aria-hidden="true" style="margin-left:5px"></i> Tip이 도움이 되었다면 댓글과 평가 부탁합니다.

Tip에 대한 궁금한 점은 댓글로 남겨 주시면 성심껏 답변 드립니다. <i class="fa fa-quote-right" aria-hidden="true"></i></ul>

</div>

 </body>

</html>


댓글목록

등록된 댓글이 없습니다.

전체 80
게시물 검색
CSS 목록
번호 제목 글쓴이 조회 날짜
80 no_profile 운영자쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 85 10-11
79 no_profile 운영자쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 85 10-09
78 no_profile 운영자쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 102 07-26
77 no_profile 운영자쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 106 06-10
열람중 no_profile 운영자쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 112 05-17
75 no_profile 운영자쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 138 05-16
74 no_profile 운영자쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 111 05-14
73 no_profile 운영자쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 146 05-02
72 no_profile 운영자쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 545 07-31
71 no_profile 운영자쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 790 04-09
70 no_profile 운영자쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 1124 09-01
69 no_profile 운영자쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2121 04-24
68 no_profile 운영자쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 3272 04-24
67 no_profile 운영자쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 1406 03-28
66 no_profile 운영자쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2892 03-26
65 no_profile 운영자쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 1410 03-26
64 no_profile 운영자쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 1404 03-25
63 no_profile 운영자쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 1447 03-18
62 no_profile 운영자쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 8680 11-28
61 no_profile 운영자쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 1878 09-20