Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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
- @media
- Servlet
- 자바문제풀이
- 코딩테스트
- media query
- redux
- CSS
- node
- github
- 변수
- webpack
- 프론트엔드
- node.js
- react
- coding
- git
- JavaScript
- java
- JS
- 그럼에도 불구하고
- 자바
- HTML
- 반응형 페이지
- 그럼에도불구하고
- TypeScript
- cleancode
- 코드업
- frontend
- react-router-dom
- max-width
Archives
- Today
- Total
그럼에도 불구하고
[Visual Studio Code] opacity / transition-duration 이용해보기 본문
HTML, CSS/Function implementation
[Visual Studio Code] opacity / transition-duration 이용해보기
zenghyun 2022. 11. 2. 00:36css에서
opacity와 transition-duration 속성을 이용해보자
code
<!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>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.box {
border: none;
padding: 40px;
position: relative;
width: 200px;
height: 200px;
background-color: darkcyan;
border: 1px solid black;
}
.margin {
margin: 50px;
}
.inner.box {
background-color: pink;
position: absolute;
left: 0;
top: 0;
opacity: 0;
/* opacity : 투명도 */
transition-duration: 1s;
/* 애니메이션이 실행되는 시간을 줌 */
}
.box:hover .inner.box {
opacity: 1;
}
</style>
</head>
<body>
<div class="box margin">
<div class="inner box"> inner </div>
</div>
<!--
static 기본성격, 성격이 있다.
-->
</body>
</html>
opacity는 투명도를 의미한다.
0: 보이지 않음
1: 보임
위의 코드에서는
inner 박스의 투명도를 0으로 지정해두어 박스가 보이지 않는다.
.box:hover .inner.box {
opacity: 1;
}
. box에 마우스 커서를 놓으면 inner박스의 투명도를 1로 바꾼다.
transition-duration: 1s;: 애니메이션이 실행되는 시간을 1초로 지정한다.
inner
'HTML, CSS > Function implementation' 카테고리의 다른 글
[Visual Studio Code] 여러가지 transform 이용해보기 (0) | 2022.11.07 |
---|---|
[Visual Studio Code] 여러가지 transition 사용해보기 (0) | 2022.11.02 |
[Visual Studio Code] flex-direction (0) | 2022.11.01 |
[Visual Studio Code] justify-content (0) | 2022.11.01 |
[Visual Studio Code] scroll-behavior: smooth (0) | 2022.10.29 |
Comments