Opacity,visibility,transition
opacity(투명도)
0.0이면 완전투명
1.0이면 불투명 상태
<head>
<style>
img{ opacity: 0.4; }
img:hover{ opacity: 1.0;}
</style>
</head>
<body>
<h1>opacity 속성</h1>
<img src="img/coffee.gif" width="150" height="150" alt="coffee">
<img src="img/green.png" width="150" height="150" alt="green">
</body>
visibility (가시성)
어떤요소를 보이게 하거나 안보이게 하는것.
- hidden:요소를 보이지않게한다.
- visible(기본값): 요소를 보이게 한다.
visibility: visible;
visibility: hidden;
비슷한것으로 display:none;이있다.
transition(전환)
- 효과를 추가하고싶은 css속성을 지정한다.
- 효과의 지속시간을 지정한다.
transition: width 5s;
<style>
div{ transition: width 5s;}
div:hover{ width: 200px;}
</style>
마우스를 위치 시키면 width가 변경되고 이때부터 전환효과가 시작된다.
다중전환
크기뿐만아니라 너비,길이,회전등의 변환에 전환효과를 줄수있다.
<style>
div{
width: 100px;
height: 50px;
border: 1px solid black;
background-color: yellow;
transition: width 5s, height 5s, border 5s, transform 5s;
}
div:hover{
width: 200px;
height: 100px;
border: 10px solid black;
transform: rotate(180deg);
}
</style>
transition: all 5s 로도 사용가능
Author And Source
이 문제에 관하여(Opacity,visibility,transition), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@sodal14/Opacity저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)