안드로이드는 전자양의 꿈을 꾸는가

CSS로 그라디언트 보더 색상변화 애니메이션

2021. 7. 8. 14:12

보호되어 있는 글입니다.
내용을 보시려면 비밀번호를 입력하세요.

비밀번호 ::

CSS로 그라디언트 백그라운드 색변화 (J쿼리 없이 그라데이션 색변경)

웹접근성과 웹표준 2021. 7. 1. 15:08

css3 transition과 css3 animation을 잘 활용하자.

<!DOCTYPE html>
<html>
<head>

  <style>
body {
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%;
animation: gradient 15s ease infinite;
}

@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
  </style>
</head>
<body>
  <div></div>
</body>
</html>

'웹접근성과 웹표준' 카테고리의 다른 글

CSS로 그라디언트 보더 색상변화 애니메이션 (0)	2021.07.08
J쿼리 없이 transform css로 움직이는 아이콘 만들기 (0)	2021.06.22
J쿼리 없이 CSS transition으로 카드 뒤집기 (0)	2021.06.22
아이폰 iOS/사파리에서 input 체크박스/라디오버튼 화면 문제 (0)	2020.12.24
iOS 키보드 덮침 현상 웹앱 수정 css (0)	2020.12.08

Posted by netyhobby

J쿼리 없이 transform css로 움직이는 아이콘 만들기

웹접근성과 웹표준 2021. 6. 22. 16:20

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
  .floating {
      animation-name: floating;
      animation-duration: 3s;
      animation-iteration-count: infinite;
      animation-timing-function: ease-in-out;
      margin-left: 30px;
      margin-top: 5px;
  }

  @keyframes floating {
      from { transform: translate(0,  0px); }
      65%  { transform: translate(0, 15px); }
      to   { transform: translate(0, -0px); }
  }
  </style>
</head>
<body>
  <div class="floating"
       style="height: 50px; width: 50px; background: rgb(200,200,200);">
  </div>
</body>
</html>

'웹접근성과 웹표준' 카테고리의 다른 글

CSS로 그라디언트 보더 색상변화 애니메이션 (0)	2021.07.08
CSS로 그라디언트 백그라운드 색변화 (J쿼리 없이 그라데이션 색변경) (1)	2021.07.01
J쿼리 없이 CSS transition으로 카드 뒤집기 (0)	2021.06.22
아이폰 iOS/사파리에서 input 체크박스/라디오버튼 화면 문제 (0)	2020.12.24
iOS 키보드 덮침 현상 웹앱 수정 css (0)	2020.12.08