현재 위치： 집 > 다운로드 > JS 효과 > CSS3 특수 효과 > 이미지 코드를 보기 위한 CSS3 돋보기
이미지 코드를 보기 위한 CSS3 돋보기
| 나누다: JS 효과 / CSS3 특수 효과 | 출시 시간: 2017-12-28 | 방문: 1604 |
| 다운로드: 47 |
최신 다운로드
판타지 아쿠아리움
소녀전선
별의 날개
작은 꽃요정 요정의 천국
레스토랑 큐트스토리
산허 여행 탐험
사랑과 프로듀서
가장 강력한 두뇌 3
오드 더스트: 다밀라
젊은 서유기 2
24시간11리더보드 읽기
- 1 Bitcoin (BTC) Price Targets $69K and New All-Time Highs as US Presidential Election Week Begins
- 2 표 셀에 줄임표가 표시되지 않는 이유는 무엇입니까?
- 3 dnscbd.dll - dnscbd.dll이란 무엇입니까?
- 4 dosbarh.dll - dosbarh.dll이란 무엇입니까?
- 5 Paramiko를 사용하여 Python으로 SSH 명령 실행을 자동화하는 방법은 무엇입니까?
- 6 SwingUtilities.invokeLater를 사용하는 이유는 무엇입니까?
- 7 SpacePay 사전 판매: 믿을 수 없는 가격으로 SPY 토큰을 획득할 수 있는 혁신적인 기회
- 8 Some of the Largest Cryptocurrency Exchanges Allegedly Ask for Up to Hundreds of Millions of Dollars for New Token Listings
- 9 JavaScript와 Java의 이진 검색 마스터하기: 단계별 가이드
- 10 PHP에서 정적 클래스와 인스턴스화된 객체를 언제 선택해야 합니까?
- 11 dpserial.dll - dpserial.dll이란 무엇입니까?
- 12 MakerDAO 브랜드 변경 혼란으로 인해 스카이 전략 재검토
- 13 Python을 사용하여 Selenium WebDriver에서 WebElement의 HTML 소스를 검색하는 방법은 무엇입니까?
- 14 손상된 InnoDB 테이블을 복구하는 방법은 무엇입니까?
- 15 Web3 변환 플랫폼 Iuppiter는 개발자의 역량을 강화하고 게임의 미래를 재편합니다.
최신 튜토리얼
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
-
- 해외 웹 개발 풀스택 강좌 총집합
- 1686 2024-04-24
-
- Go 언어 실습 GraphQL
- 1962 2024-04-19
-
- 550W 팬 마스터가 JavaScript를 처음부터 차근차근 학습합니다
- 3385 2024-04-18
-
- 기초 지식이 전혀 없는 초보자도 6시간 만에 시작할 수 있는 파이썬 마스터 모쉬
- 2916 2024-04-10
-
- MySQL 시작하기(mosh 교사)
- 1776 2024-04-07
-
- Mock.js | Axios.js | Json - 10일간의 고품질 수업
- 2593 2024-03-29
<body><script src="/demos/googlegg.js"></script>
<div class='컨테이너'>
<헤더>
<h1>SVG 클립 경로 호버 효과</h1>
</헤더>
<메인>
<div class='items'>
<div class='item'>
<svg presentsAspectRatio='xMidYMid 슬라이스' viewBox='0 0 300 200'>
<정의>
<clipPath id='clip-0'>
<circle cx='0' cy='0' fill='#000' r='150px'></circle>
</clipPath>
</defs>
<text class='svg-text' dy='.3em' x='50%' y='50%'> 엑스레이 </text>
<g 클립 경로='url(#clip-0)'>
<이미지 높이='100%' 보존AspectRatio='xMinYMin 슬라이스' 너비='100%' xlink:href='img/1.png'></image>
<text class='svg-masked-text' dy='.3em' x='50%' y='50%'> 엑스레이 </text>
</g>
</svg>
</div>
<div class='item'>
<svg presentsAspectRatio='xMidYMid 슬라이스' viewBox='0 0 300 200'>
<정의>
<clipPath id='clip-1'>
<circle cx='0' cy='0' fill='#000' r='150px'></circle>
</clipPath>
</defs>
<text class='svg-text' dy='.3em' x='50%' y='50%'> 벌레</text>
<g 클립 경로='url(#clip-1)'>
<이미지 높이='100%' 보존AspectRatio='xMinYMin 슬라이스' 너비='100%' xlink:href='img/2.png'></image>
<text class='svg-masked-text' dy='.3em' x='50%' y='50%'> 벌레</text>
</g>
</svg>
</div>
<div class='item'>
<svg presentsAspectRatio='xMidYMid 슬라이스' viewBox='0 0 300 200'>
<정의>
<clipPath id='clip-2'>
<circle cx='0' cy='0' fill='#000' r='150px'></circle>
</clipPath>
</defs>
<text class='svg-text' dy='.3em' x='50%' y='50%'> 오로라</text>
<g 클립 경로='url(#clip-2)'>
<이미지 높이='100%' 보존AspectRatio='xMinYMin 슬라이스' 너비='100%' xlink:href='img/3.png'></image>
<text class='svg-masked-text' dy='.3em' x='50%' y='50%'> 오로라</text>
</g>
</svg>
</div>
<div class='item'>
<svg presentsAspectRatio='xMidYMid 슬라이스' viewBox='0 0 300 200'>
<정의>
<clipPath id='clip-3'>
<circle cx='0' cy='0' fill='#000' r='150px'></circle>
</clipPath>
</defs>
<text class='svg-text' dy='.3em' x='50%' y='50%'> 앵거스</text>
<g 클립 경로='url(#clip-3)'>
<이미지 높이='100%' 보존AspectRatio='xMinYMin 슬라이스' 너비='100%' xlink:href='img/4.png'></image>
<text class='svg-masked-text' dy='.3em' x='50%' y='50%'> 앵거스</text>
</g>
</svg>
</div>
<div class='item'>
<svg presentsAspectRatio='xMidYMid 슬라이스' viewBox='0 0 300 200'>
<정의>
<clipPath id='clip-4'>
<circle cx='0' cy='0' fill='#000' r='150px'></circle>
</clipPath>
</defs>
<text class='svg-text' dy='.3em' x='50%' y='50%'> 휴이치 </text>
<g 클립 경로='url(#clip-4)'>
<이미지 높이='100%' 보존AspectRatio='xMinYMin 슬라이스' 너비='100%' xlink:href='img/5.png'></image>
<text class='svg-masked-text' dy='.3em' x='50%' y='50%'> 휴이치 </text>
</g>
</svg>
</div>
<div class='item'>
<svg 보존AspectRatio='xMidYMid 슬라이스' viewBox='0 0 300 00'>
>
<clipPath id='clip-5'>
& Lt; Circle CX = '0' Cy = '0' Fill = '#000' R = '150px' & GT;
>
~ ~
<g 클립 경로='url(#clip-5)'>
<이미지 높이='100%' PreserveAspectRatio='xMinYMin 슬라이스' 너비='100%' xlink:href='img/6.png'></image>
<text class='svg-masked-text' dy='.3em' x='50%' y='50%'> Dalí </text>
>
</svg>
</div>
</div>
</메인>
</div>
CSS3 SVG 돋보기 이미지 보기 코드는 그리드 레이아웃, 마우스 오버 이미지 SVG 클리핑 경로 애니메이션 특수 효과입니다. 특정 효과를 경험하려면 데모를 참조하세요.
관련 추천
모바일 Happy Scratch HTML5 플러그인
선물 상자 애니메이션 특수 효과로 접힌 HTML5 종이
순수한 CSS3 복고풍 필름 플레이어 특수 효과
경량의 html5 WinBox 페이지 팝업 플러그인
jQuery 아코디언 그림 슬라이딩 메뉴 표시줄
빨간색 드롭다운 탐색 메뉴를 생성하는 순수 CSS3 코드
HTML5 마우스 휠 회전 그림 표시 특수 효과
인기 추천
jQuery+Html5로 아름다운 고백 애니메이션 코드 구현
커플의 로맨틱 고백 js 특수효과 코드
H5 팬더 튀는 게임 소스 코드
H5 3D 롤링 볼 게임 소스 코드
Bunker의 HTML5 입자 애니메이션 표현 효과