css3 transition과 css3 animation을 잘 활용하자.
<!DOCTYPE html>
<html>
<head>
<!-- css3-animation test -->
<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 |
