이 글에서는 주로 CSS를 사용하여 그래픽 변형 팝업 효과를 만드는 예제를 소개합니다. 팝업 창의 크기는 jQuery를 사용하여 수정할 수 있습니다. 도움이 필요한 친구는 이를 참고할 수 있습니다.
팝업 양식은 일반적으로 사용됩니다. 웹 페이지에 인터랙티브 디자인을 사용했습니다. 이에 초점을 맞춰 인터랙티브 애니메이션 경험의 시대에 웹 팝업은 오늘날 공유되는 CSS 변형 모달 창과 같은 신선한 아이디어도 떠오를 수 있습니다.
사용자가 버튼을 클릭하면 버튼이 전체 화면 화면으로 바뀌고 전체 표시 과정이 원활하고 친숙해집니다.
데모 페이지: http://codyhouse.co/gem/morphing-modal-window/
"Fire Modal Window" 버튼을 클릭하면 버튼이 전체 화면에 도달할 때까지 천천히 커집니다. 다음은 GIF 데모입니다.
Tutorial
이 코드는 Chrome, Firefox, Safari, Opera와 호환되며 IE에는 버전 9.0 이상(IE9+)이 필요합니다.
1단계: HTML 레이아웃 만들기
<section class="cd-section"> <!-- section content here --> <p class="cd-modal-action"> <a href="#0" class="btn" data-type="modal-trigger">Fire Modal Window</a> <!— 这是窗体按钮 --> <span class="cd-modal-bg"></span> </p> <p class="cd-modal"> <p class="cd-modal-content"> <!— 这是窗体内容区域 --> </p> </p> <a href="#0" class="cd-modal-close">Close</a> <!— 这是关闭按钮 --> </section>
2단계: CSS 스타일 추가
.cd-modal-action { position: relative; } .cd-modal-action .btn { width: 12.5em; height: 4em; background-color: #123758; border-radius: 5em; transition: color 0.2s 0.3s, width 0.3s 0s; } .cd-modal-action .btn.to-circle { width: 4em; color: transparent; transition: color 0.2s 0s, width 0.3s 0.2s; } .cd-modal-action .cd-modal-bg { position: absolute; top: 0; left: 50%; transform: translateX(-2em); width: 4em; height: 4em; background-color: #123758; border-radius: 50%; opacity: 0; visibility: hidden; transition: visibility 0s 0.5s; } .cd-modal-action .cd-modal-bg.is-visible { opacity: 1; visibility: visible; }
3단계: jQuery 추가
이 코드는 jQuery를 사용하며, 다음 코드를 통해 창 크기를 수정할 수 있습니다.
var btnRadius = $('.cd-modal-bg').width()/2, left = $('.cd-modal-bg').offset().left + btnRadius, top = $('.cd-modal-bg').offset().top + btnRadius - $(window).scrollTop(), scale = scaleValue(top, left, btnRadius, $(window).height(), $(window).width()); function scaleValue( topValue, leftValue, radiusValue, windowW, windowH) { var maxDistHor = ( leftValue > windowW/2) ? leftValue : (windowW - leftValue), maxDistVert = ( topValue > windowH/2) ? topValue : (windowH - topValue); return Math.ceil(Math.sqrt( Math.pow(maxDistHor, 2) + Math.pow(maxDistVert, 2) )/radiusValue); }
위 내용은 모두의 학습에 도움이 되기를 바랍니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!
관련 권장 사항:
CSS를 사용하여 사진 주위를 텍스트로 감싸는 효과 얻기
CSS3을 사용하여 원형 진행률 표시줄을 구현하는 방법
CSS3을 사용하여 회색조 필터를 작성하여 검은색 및 흰색 사진 효과
위 내용은 CSS로 그래픽 변형 팝업 효과 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!