타이핑 효과를 얻기 위한 CSS

JS 구현

최근 프로젝트를 진행하면서 문자가 하나씩 나타나는 타이핑 효과를 구현하고 싶었는데 인터넷에서 좋은 jQuery 플러그인 Typed.js를 발견했습니다. 효과가 좋았어요

<p class="element"></p>

<script src="typed.js"></script>
<script>
  $(function(){
      $(".element").typed({
        strings: ["First sentence.", "Second sentence."],
        typeSpeed: 0
      });
  });
</script>

구체적인 사용법은 프로젝트 주소를 확인하시면 주석이 달린 소스코드가 200줄이 넘는데 복잡하지 않네요.

구현 방법도 마술적이지 않습니다. js를 사용하여 컨테이너에 문자를 하나씩 추가하면 속도가 놀랍습니다. 간단한

var s = 'Hello World! Hello World! Hello World!';
var con = $('.container');
var index = 0;
var length = s.length;
var tId = null;

function start(){
  con.text('');
  
  tId=setInterval(function(){
    con.append(s.charAt(index));
    if(index++ === length){
    clearInterval(tId);
    index = 0;
    start()
    }
  },100);
}

start();

JS Bin

CSS 구현

세부 사항 및 브라우저 호환성 요구 사항이 그다지 엄격하지 않은 경우 구현할 수 있습니다. CSS3

애니메이션 타이밍 기능

CSS3을 통해 우리 모두는 일반적으로

animation: animation-name animation-duration animation-iteration-count

animation: name 5s infinite;

를 사용해 왔습니다. 별도의 속성으로 작성할 수도 있는 매개변수

1. animation-name

2. animation-duration

3. 애니메이션 타이밍 기능

4. 애니메이션 지연

5. 애니메이션 반복 횟수

6. animation-direction

오늘은 animation-timing-function에 초점을 맞추겠습니다. 대부분의 애니메이션은 타임라인에서 선형적으로 변경됩니다. 이것이 jQuery 애니메이션 중에 사용하는 liner 매개변수의 의미이지만 CSS3입니다. animation-timing-function 속성

1. ease

2. linear

3. 에 의해 지정된 다른 변경 방법을 제공합니다.

   이즈인

4. 이즈아웃

5. 이즈인아웃

6. 단계 시작

7. 단계 끝

8. 단계

9. 입방 베지어

각 애니메이션 효과는 베지어 곡선에 대응할 수 있습니다. 베지어 곡선 효과를 직관적으로 볼 수 있습니다.

단계

스텝의 효과를 살펴보겠습니다. 사실 이름에서 알 수 있듯이 테트리스처럼 아래로 떨어지는 작은 그리드도 애니메이션이지만 연속적이지는 않습니다. 프레임 단위로 이 효과를 얻는 것이

단계 구문

steps(number_of_steps, [start|end])

• number_of_steps 애니메이션이 몇 단계로 나누어지는지

• 방향 애니메이션 표시 상태, 종료: 기본값, 첫 프레임 시작 전 표시, 시작: 첫 프레임 종료 후 표시

과학적인 그림 보기 이해를 돕기 위해

두 단계를 밟아보세요

이것으로 재미있는 효과를 만들 수 있습니다

JS Bin

.walk {
  width: 125px;
  height: 150px;
  background: url(http://www.php.cn/) left;
  -webkit-animation:anima 1s steps(16) infinite ;
}

@-webkit-keyframes anima{
    from { background-position:2000px 0;}
    to {background-position:0px 0;}
}

타이핑 효과

타이핑 효과는 상상 가능합니다. 컨테이너 너비만 변경하면 됩니다(한 줄을 사용할 경우 각 단계의 길이를 늘려야 일관성이 유지됩니다). 문자 폭이 넓으므로 실제로는 js가 더 좋습니다)

.typing{
    width:250px;
    white-space:nowrap;
    overflow:hidden;
    -webkit-animation: type 3s steps(50, end) infinite;
  animation: type 3s steps(50, end) infinite;
}


@-webkit-keyframes type{
    from { width: 0;}
}

@keyframes type{
    from { width: 0;}
}

JS Bin

타이핑 효과를 구현하는 CSS와 관련된 더 많은 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!