Notice
Recent Posts
Recent Comments
Link
«   2025/07   »
일 월 화 수 목 금 토
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
more
Archives
Today
Total
관리 메뉴

Amarans

0220 CSS-|Filter|Transtion| 본문

CSS

0220 CSS-|Filter|Transtion|

Amarans 2020. 2. 20. 16:33 
<!DOCTYPE html>
<html>
    <meta charset="utf-8">
<head>
    <style>
        img{
            transition: all 1s;
            width: 500px;
            height: 500px;
        }
        img:hover{
            filter: grayscale(100%) blur(3px);
        }
    </style>
</head>
<body>
   <img src="i.jpg" alt="">
    
</body>
</html>

blur = 사진 흐릿하게. 컬러 사진에 마우스를 올리면

                                                             밑에 사진처럼 변함.

 

 

 

 

 

 

 

 

 

 

 

 

<!doctype html>
<html>
<head>
  <style>
    a{
      font-size:3rem;
      display:inline-block;
/*
      transition-property: font-size transform;
      transition-duration: 0.1s;
      transition:all 0.1s;
*/
      transition:all 0.1s;
    }
    a:active{
      transform:translate(20px, 20px);
      font-size:2rem;
    }
  </style>
</head>
<body>
  <a href="#">Click</a>
</body>
</html>

hover 마우스를 클릭하지않고 가져다 대기만 해도.

active 마우스를 클릭하였을때

 

<!doctype html>
<html>
<head>
  <style>
    body{
      background-color: black;
      transition:all 1s;
    }
    div{
      background-color: black;
      color:white;
      padding:10px;
      width:100px;
      height:50px;
      -webkit-transition: all 500ms cubic-bezier(0.680, 0, 0.265, 1); /* older webkit */
      -webkit-transition: all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550); 
         -moz-transition: all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550); 
           -o-transition: all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550); 
              transition: all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550); /* easeInOutBack */
 
      -webkit-transition-timing-function: cubic-bezier(0.680, 0, 0.265, 1); /* older webkit */
      -webkit-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550); 
         -moz-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550); 
           -o-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550); 
              transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550); /* easeInOutBack */
    }
    div:hover{
      height:400px;
    }
  </style>
</head>
<body onload="document.querySelector('body').style.backgroundColor='white';">
  <div>
    TRANSITION
  </div>
</body>
</html>

 

https://bennettfeely.com/image-effects/ 필터 시뮬레이션
https://opentutorials.org/course/2418/13684 transform 시뮬레이션
http://adam.id.au/clean-css-online/ = 코드경량화 (minify) 시켜주는 사이트

'CSS' 카테고리의 다른 글

0220 CSS-| Link | Pontello  (0) 2020.02.20
0219 | Column | Background |  (0) 2020.02.19
0219 Flot | holy_grail_layout  (0) 2020.02.19
0219 Flex | grow&shrink | holy_grail_layout  (0) 2020.02.19
0218 CSS| Position | text_align |  (0) 2020.02.19
'CSS' Related Articles more
Comments