글자 애니메이션(blinker, pulse, infinite)
페이지 정보
작성자
운영자쪽지보내기
메일보내기
자기소개
아이디로 검색
전체게시물
댓글 0건
조회 77회
작성일 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>
댓글목록
등록된 댓글이 없습니다.