@keyframes를 이용한 것을 확인하세요.
<style>
@keyframes blink-efft {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.user_dom {
animation: blink-efft 1s step-end infinite;
}
</style>
<body>
<div>
<!--깜빡이는 효과를 줄 요소-->
<input type="text" class="user_dom" />
</div>
</body>
참고 링크
w3 school / CSS @keyframes Rule
https://www.w3schools.com/cssref/css3_pr_animation-keyframes.php
CSS @keyframes Rule
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
The @keyframes rule specifies the animation code.
The animation is created by gradually changing from one set of CSS styles to another.
During the animation, you can change the set of CSS styles many times.
Specify when the style change will happen in percent, or with the keywords "from" and "to", which is the same as 0% and 100%. 0% is the beginning of the animation, 100% is when the animation is complete.
Tip: For best browser support, you should always define both the 0% and the 100% selectors.
Note: Use the animation properties to control the appearance of the animation, and also to bind the animation to selectors.
Note: The !important rule is ignored in a keyframe (See last example on this page).
'Programming Language > HTML&CSS' 카테고리의 다른 글
| [css] 예쁜 background color example (연보라 라인) (0) | 2023.02.07 |
|---|---|
| (스크랩)css 한글 폰트 (0) | 2018.10.23 |
| font-family (0) | 2018.06.28 |
| XHTML (0) | 2017.12.22 |
| [HTML/CSS] 메타(Meta) 태그란? (0) | 2017.12.22 |
