CSS로 그래픽 변형 팝업 효과 만들기

이 글에서는 주로 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!