<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input class="search" type="text">
</body>
</html>
html에는 이렇게 적었고요
@keyframes border-rad {
from {
border-radius: 0
}
to {
border-radius : 15px;
}
}
.search:focus {
animation-name: border-rad;
animation-duration: 1s;
animation-fill-mode: forwards;
}
css에는 이렇게 적었슴다
input 박스 클릭하면 테두리 둥글둥글하게 바꿔지게 만들고 싶었는데 눌렀는데 반응이 없네요;;
transition 써서
.search {
border-radius: 0;
transition: border-radius 1s;
}
.search:focus {
border-radius: 15px;
}
이렇게 하니까 되긴 하더라고요. 근데 @keyframes 써서 하려니까 안되네요 ㅜ
@keyframes써서 하고싶슴다
