자세히 보기 간단한 css animation tips[초보자용]

3226 단어 HTMLCSSCSS3animation 
<html>
 <head>
  <meta charset="utf-8"/>
  <link rel="stylesheet" type="text/css" href="./assets/css/pc.css">
 </head>
 <body>
  <p class="label"><span>ラベルが入ります。</span></p>
 </body>
</html>

./어세 ts/cs/pc. cs
span {
 position: relative;
 display: inline-block;
}

span:before {
 content: '';
 position: absolute;
 background-color: black;
 animation: revealLTR 1s ease;
 height: 100%;
}

@keyframes revealLTR {
 0%{
  width: 0;
  left: 0;
 }
 65%{
  width: 100%;
  left: 0;
 }
 100% {
  width: 0;
  left: 100%;
 }
}

결과



연속 CSS 애니메이션 구현
거의 CSS만으로, LP로 자주 있는 상하 좌우로부터 페이드 인하는 녀석을 실장한다

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage