| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | |||
| 5 | 6 | 7 | 8 | 9 | 10 | 11 |
| 12 | 13 | 14 | 15 | 16 | 17 | 18 |
| 19 | 20 | 21 | 22 | 23 | 24 | 25 |
| 26 | 27 | 28 | 29 | 30 | 31 |
Tags
- #업종별
- #홈페이지제작
- 사이트제작
- php
- #CSS
- #happycgi
- jquery
- CGIMALL
- #홈페이지
- happycgi
- #cgimall
- #뉴스
- javascript
- #image
- 쇼핑몰
- #jQuery
- 홈페이지
- #해피CGI
- #동영상
- 해피CGI
- #웹솔루션
- 홈페이지제작
- #이미지
- CSS
- 웹솔루션
- #솔루션
- 해피씨지아이
- #쇼핑몰
- 게시판
- 솔루션
- Today
- Total
웹솔루션개발 22년 노하우! 해피CGI의 모든것
[해피CGI][cgimall] 원모양으로 회전하는 텍스트 Circular text 본문
<svg>를 이용하여 원모양으로 돌아가는 텍스트를 만들어 보실수 있습니다.
[svg 소스]
[주요 svg 요소]
1) <path d="..." id="textcircle_top"></path>
- <path>로 텍스트를 배치할 선을 만듭니다.
2) <text>
<textPath xlink:href="#textcircle_top">Sweet ~ Coding</textPath>
</text>
- <textPath>로 텍스트 요소를 감싸고 href 속성에 연결할 path id값을 넣는다.
3) <animateTransform attributeName="transform" begin="0s" dur="20s" type="rotate" from="0 250 250" to="360 250 250" repeatCount="indefinite"></animateTransform>
- <animateTransform>으로 움직이는 애니메이션 효과를 준다.
svg 요소는 인터넷 익스플로어 및 일부 브라우저에서 지원하지 않습니다.
해당 소스를 활용하여 로딩화면에 돌아가는 이미지 등에 사용 해보실수 있을거 같습니다. ^^
'웹프로그램밍 자료실 > HTML 자료' 카테고리의 다른 글
| [해피CGI][cgimall]Simple CSS text animation 텍스트가 수직 플립되는 효과 (0) | 2022.01.06 |
|---|---|
| [해피CGI][cgimall] CSS를 이용한 간단 로그인/회원가입 (0) | 2021.10.25 |
| [해피CGI][cgimall] Css를 이용한 체크박스 (single-checkbox pure CSS switch) (0) | 2021.10.19 |
| [해피CGI][cgimall] HTML CSS 이미지 비교 슬라이더 (0) | 2021.10.12 |
| [해피CGI][cgimall] CSS Button Hover Animations - CSS 오버 버튼효과 (0) | 2021.09.27 |
'웹프로그램밍 자료실/HTML 자료' Related Articles
more
Comments