Opacity,visibility,transition

7840 단어 CSSCSS

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 로도 사용가능

transform 예시참조

[알고리즘] BOJ 13417 카드 문자열
[React] 리액트를 다루는 기술 - 7장 컴포넌트의 라이프사이클 메서드

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage