유의사항이나 영역을 심플하게 보이기 위해 더보기 기능을 많이 사용하는데
그동안 애니메이션을 주지 않았거나, 혹은 애니메이션을 주려고 jquery의 animate기능을 사용하고 있었다면,
간단하게 css만으로 애니메이션 기능을 줄 수 있었으니~~
그 비밀은 바로 css를 좀 만져본 사람은 누구나 아는... max-height
(뭔가 약 파는 느낌... =_=a )
근데 간단하긴 한데 코드는 좀 길어졌음 ㅋㅋ;;
코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>more button 애니메이션</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=swap" rel="stylesheet">
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body{
width: 100%;
height: 100%;
}
body, button{
font-family: 'noto sans KR', sans-serif;
}
button{
border: 0;
border-radius: 0;
background: transparent;
}
.more-section{
position: relative;
height: 100vh;
padding: 10em;
background: #007753;
text-align: center;
}
.more-btn{
display: block;
position: relative;
width: 100%;
padding: 40px 0;
border-radius: 1em;
background-color: #0a5f45;
font-weight: 700;
font-size: 1.5em;
color: #fff;
text-align: center;
}
.more-btn:hover{
box-shadow: 0 4px 16px rgb(0 0 0 / 10%);
}
.more-btn:active{
box-shadow: 0 4px 16px rgb(0 0 0 / 10%), inset 0 0 20px rgb(0 0 0 / 10%);
}
.more-btn::after{
content: "";
display: inline-block;
width: .5em;
height: .5em;
margin: 0 0 0 .5em;
border: solid #fff;
border-width: 3px 0 0 3px;
vertical-align: .2em;
transform: rotate(-135deg);
}
.more-list{
overflow: hidden;
max-height: 0;
margin: .5em 0 0;
border-radius: 1em;
background: #116c50;
font-size: 1.25em;
color: #fff;
transition: none;
}
.more-list ul{
display: inline-block;
padding: 3em 2em 3.5em;
text-align: left;
}
.more-list li{
margin-top: .5em;
}
.more-section.act .more-btn::after{
transform: rotate(45deg);
vertical-align: -.1em;
}
.more-section.act .more-list{
max-height: 100vh;
transition: all .3s linear;
}
</style>
</head>
<body>
<section class="more-section" id="more_section">
<button class="more-btn" id="more_btn" type="button">더보기</button>
<div class="more-list">
<ul>
<li>여기는 더보기 영역 리스트 1</li>
<li>여기는 더보기 영역 리스트 2</li>
<li>여기는 더보기 영역 리스트 3</li>
<li>여기는 더보기 영역 리스트 4</li>
<li>여기는 더보기 영역 리스트 5</li>
</ul>
</div>
</section>
<script>
const more_btn = document.querySelector( "#more_btn" );
const more_section = document.querySelector( "#more_section" );
more_btn.addEventListener("click", () => {
more_section.classList.contains( "act" ) ? more_section.classList.remove( "act" ) : more_section.classList.add( "act" );
});
</script>
</body>
</html>
728x90
반응형
'WWWEB > CSS' 카테고리의 다른 글
| 마우스 커서를 이미지로 변경하기 (0) | 2023.09.22 |
|---|---|
| [CSS] ":nth-child()"로 몇 번부터 몇 번까지 선택하기 (0) | 2023.08.21 |
| [css] 텍스트 안에 그라데이션 배경 움직여보기 (0) | 2023.06.08 |
| 최근 네이버 CSS 초기화 코드 (mo/pc) (0) | 2023.05.25 |
| [css] 모서리 종이 말려지는 효과를 만들어봄. (쏘 이지~) (2) | 2023.05.08 |
| [css] clip-path를 이용한 텍스트 안 wave 애니메이션 (0) | 2023.04.26 |
| 단어가 짧을 때 양쪽 정렬(text-align: justify) 방법 [only css] (1) | 2023.04.11 |
| [ css ] position: sticky가 안 먹는 경우, 적용 조건 (0) | 2023.03.28 |
댓글