CSS3 애니메이션이 '...' 로딩 애니메이션 효과를 구현하는 방법 정보(1)-CSS 튜토리얼-php.cn

그림과 같은 로딩 효과 달성:
CSS3 애니메이션이 '...' 로딩 애니메이션 효과를 구현하는 방법 정보(1)

1: CSS3 애니메이션 구현 코드

html 코드:

提交订单中<span class="ani_dot">...</span>

로그인 후 복사

css 코드:

.ani_dot {
    font-family: simsun;    
}
:root .ani_dot { /* 这里使用Hack是因为IE6~IE8浏览器下， vertical-align解析不规范，值为bottom或其他会改变按钮的实际高度*/
    display: inline-block;
    width: 1.5em;
    vertical-align: bottom;
    overflow: hidden;
}
@-webkit-keyframes dot {
    0% { width: 0; margin-right: 1.5em; }
    33% { width: .5em; margin-right: 1em; }
    66% { width: 1em; margin-right: .5em; }
    100% { width: 1.5em; margin-right: 0;}
}
.ani_dot {
    -webkit-animation: dot 3s infinite step-start;
}

@keyframes dot {
    0% { width: 0; margin-right: 1.5em; }
    33% { width: .5em; margin-right: 1em; }
    66% { width: 1em; margin-right: .5em; }
    100% { width: 1.5em; margin-right: 0;}
}
.ani_dot {
    animation: dot 3s infinite step-start;
}

로그인 후 복사

사진에 표시된 결과는 다음과 같습니다.
참고:

1 IE10+ 및 기타 브라우저에서는 도트 애니메이션이 사라지지만 IE6~IE9는 일반 도트 애니메이션입니다. 텍스트.
2. 애니메이션 애니메이션은 연속적이지만 여기서는 프레임별로, 카드별로 수행합니다. 효과가 그리 연속적이지 않으므로 step-start을 사용하세요.
3. 위 코드도 CSS3 선택기:root를 사용합니다. :root는 IE9+ 및 기타 최신 브라우저에 대한 해킹입니다. IE6-7 및 심지어 IE8에서도 인라인 블록 수평 요소의 수직 정렬:하단 해상도는 인라인 수평 요소의 해상도와 다르기 때문에 높이가 확장됩니다. display: inline- 블록을 해킹해야 합니다.

2: 애니메이션 매개변수에 대한 자세한 설명

위에서는 애니메이션 애니메이션을 사용하였으므로 이 애니메이션의 매개변수에 대해 자세히 소개합니다.

소개

CSS 애니메이션(애니메이션)은 단순히 고정된 애니메이션 시간 내에 특정 빈도 내에서 CSS 값 중 하나 또는 일부를 비밀리에 변경하여 시각적 변형을 달성하는 것입니다. 애니메이션 실행 시간, 시작 값 및 종료 값은 물론 애니메이션 일시 중지 및 시작 시간 지연 등을 포함하여 애니메이션의 다양한 측면을 제어할 수 있습니다.

구문

<single-animation> = <single-animation-name> || <time> || <single-animation-timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state>
<&#39; animation-name &#39;>：检索或设置对象所应用的动画名称<&#39; animation-duration &#39;>：检索或设置对象动画的持续时间<&#39; animation-timing-function &#39;>：检索或设置对象动画的过渡类型<&#39; animation-delay &#39;>：检索或设置对象动画延迟的时间<&#39; animation-iteration-count &#39;>：检索或设置对象动画的循环次数<&#39; animation-direction &#39;>：检索或设置对象动画在循环中是否反向运动<&#39; animation-fill-mode &#39;>：检索或设置对象动画时间之外的状态<&#39; animation-play-state &#39;>：检索或设置对象动画的状态。w3c正考虑是否将该属性移除，因为动画的状态可以通过其它的方式实现，比如重设样式

로그인 후 복사

animation

animation-play-state 속성을 제외한 모든 애니메이션 속성의 약식 속성입니다.

animation-name

@keyframes 애니메이션의 이름을 지정합니다. 애니메이션 이름 뒤에 @keyframes가 붙습니다. 이 문서에서는 이 데모를 "점"을 의미하는 도트라고 합니다.

animation-duration

애니메이션이 한 주기를 완료하는 데 걸리는 시간(초 또는 밀리초)을 지정합니다. 기본값은 0입니다.

애니메이션 타이밍 기능

애니메이션의 속도 곡선을 지정합니다. 기본값은 "쉽게"입니다.

일반적인 애니메이션 속도 매개변수:

선형: 선형 전환. 베지어 곡선과 동일(0.0, 0.0, 1.0, 1.0)
용이성: 부드러운 전환. 베지어 곡선과 동일(0.25, 0.1, 0.25, 1.0)
ease-in: 느린 속도에서 빠른 속도로. 베지어 곡선과 동일(0.42, 0, 1.0, 1.0)
ease-out: 빠른 것에서 느린 것까지. 베지어 곡선(0, 0, 0.58, 1.0)
ease-in-out: 느린 것에서 빠른 것, 그리고 느린 것. 베지어 곡선과 동일(0.42, 0, 0.58, 1.0)
step-start: steps(1, start)와 동일
step -end: steps(1, end)
steps([, [ start | end ]
]?)와 동일: 두 개의 매개변수 step 함수를 허용합니다. 첫 번째 매개변수는 함수의 단계 수를 지정하는 양의 정수여야 합니다. 두 번째 매개변수의 값은 start 또는 end일 수 있으며 각 단계의 값이 변경되는 시점을 지정합니다. 두 번째 매개변수는 선택사항이며 기본값은 end입니다.
cubic-bezier(, , ,

): 특정 베지어 곡선 유형, 4 값은 다음과 같아야 합니다. [0, 1] 범위에서

animation-delay

는 애니메이션이 시작되는 시기를 지정합니다. 기본값은 0입니다. 즉, 애니메이션 지연 실행 시간을 의미합니다.

animation-iteration-count

infinite애니메이션이 재생되는 횟수를 지정합니다. 기본값은 1입니다. 물론 2번, 3번 등으로 설정할 수도 있습니다. 무선 루프 키워드

도 있는데, 이는 애니메이션이 루프로 반복 재생된다는 의미입니다.

animation-direction

다음 주기에서 애니메이션을 역방향으로 재생할지 여부를 지정합니다. 기본값은 "정상"입니다. 물론 다음과 같은 값도 있습니다.

reverse
: 역방향으로 실행
alternate
: 애니메이션이 실행됩니다. 일반적으로 먼저 역방향으로 실행한 다음 계속 교대로 실행
alternate-reverse
: 애니메이션이 먼저 역방향으로 실행된 다음 정방향으로 실행되고 계속 실행됩니다. run 교대로

animation-fill-mode

애니메이션 시간 이외의 개체 상태를 지정합니다.

none
: 기본값입니다. 애니메이션 외부의 객체 상태를 설정하지 마세요
forwards
: 객체의 상태를 애니메이션이 끝난 상태로 설정
backwards
: Set 객체 상태는 애니메이션 시작 부분의 상태
both
: 객체 상태를 애니메이션의 끝이나 시작 부분의 상태로 설정 애니메이션이 시작되기 전에는 "from" 또는 "0%" 키프레임 상태이고, 애니메이션이 완료된 후에는 "to" 또는 "100%" 키프레임 상태입니다.

animation-play-state

"running"애니메이션이 실행 중인지 일시 중지되었는지 지정합니다. 기본값은 paused입니다.

라는 값도 있습니다: 일시 중지. <🎜>

三：animation动画实例

实例一使用`from to`：

p{
    width:100px;
    height:100px;
    background:red;
    position:relative;
    animation:mymove 5s infinite;
    -moz-animation:mymove 5s infinite; /*Firefox*/
    -webkit-animation:mymove 5s infinite; /*Safari and Chrome*/
}
@keyframes mymove{
    from {left:0px;}
    to {left:200px;}
}
@-moz-keyframes mymove { /*Firefox*/
    from {left:0px;}
    to {left:200px;}
}
@-webkit-keyframes mymove{ /*Safari and Chrome*/
    from {left:0px;}
    to {left:200px;}
}

로그인 후 복사

实例二使用百分比：

@keyframes myfirst{
    0%   {background: red; left:0px; top:0px;}
    25%  {background: yellow; left:200px; top:0px;}
    50%  {background: blue; left:200px; top:200px;}
    75%  {background: green; left:0px; top:200px;}
    100% {background: red; left:0px; top:0px;}
}

@-moz-keyframes myfirst{ /* Firefox */
    0%   {background: red; left:0px; top:0px;}
    25%  {background: yellow; left:200px; top:0px;}
    50%  {background: blue; left:200px; top:200px;}
    75%  {background: green; left:0px; top:200px;}
    100% {background: red; left:0px; top:0px;}
}

@-webkit-keyframes myfirst{ /* Safari 和 Chrome */
    0%   {background: red; left:0px; top:0px;}
    25%  {background: yellow; left:200px; top:0px;}
    50%  {background: blue; left:200px; top:200px;}
    75%  {background: green; left:0px; top:200px;}
    100% {background: red; left:0px; top:0px;}
}

@-o-keyframes myfirst {/* Opera */
    0%   {background: red; left:0px; top:0px;}
    25%  {background: yellow; left:200px; top:0px;}
    50%  {background: blue; left:200px; top:200px;}
    75%  {background: green; left:0px; top:200px;}
    100% {background: red; left:0px; top:0px;}
}

로그인 후 복사

实例三,利用js+Transform和Animation实现3D动画

只有webkit内核的浏览器才能看到相关3D动画效果。
实现效果如图所示：
CSS3 애니메이션이 '...' 로딩 애니메이션 효과를 구현하는 방법 정보(1)

css代码：

body {
        font-family: &#39;Lucida Grande&#39;, Verdana, Arial;
        font-size: 12px;
      }

      #stage {
        margin: 150px auto;
        width: 600px;
        height: 400px;
        -webkit-perspective: 800;
      }

      #rotate {
        margin: 0 auto;
        width: 600px;
        height: 400px;
        -webkit-transform-style: preserve-3d;
        -webkit-animation-name: x-spin;
        -webkit-animation-duration: 7s;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-timing-function: linear;
      }

      .ring {
        margin: 0 auto;
        height: 110px;
        width: 600px;
        -webkit-transform-style: preserve-3d;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-timing-function: linear;
      }
      
      .ring > :nth-child(odd) {
        background-color: #995C7F;
      }

      .ring > :nth-child(even) {
        background-color: #835A99;
      }

      .poster {
        position: absolute;
        left: 250px;
        width: 100px;
        height: 100px;
        opacity: 0.7;
        color: rgba(0,0,0,0.9);
        -webkit-border-radius: 10px;
      }
      
      .poster > p {
        font-family: &#39;Georgia&#39;, serif;
        font-size: 36px;
        font-weight: bold;
        text-align: center;
        margin-top: 28px;
      }

      #ring-1 {
        -webkit-animation-name: y-spin;
        -webkit-animation-duration: 5s;
      }

      #ring-2 {
        -webkit-animation-name: back-y-spin;
        -webkit-animation-duration: 4s;
      }

      #ring-3 {
        -webkit-animation-name: y-spin;
        -webkit-animation-duration: 3s;
      }

      @-webkit-keyframes x-spin {
        0%    { -webkit-transform: rotateX(0deg); }
        50%   { -webkit-transform: rotateX(180deg); }
        100%  { -webkit-transform: rotateX(360deg); }
      }

      @-webkit-keyframes y-spin {
        0%    { -webkit-transform: rotateY(0deg); }
        50%   { -webkit-transform: rotateY(180deg); }
        100%  { -webkit-transform: rotateY(360deg); }
      }

      @-webkit-keyframes back-y-spin {
        0%    { -webkit-transform: rotateY(360deg); }
        50%   { -webkit-transform: rotateY(180deg); }
        100%  { -webkit-transform: rotateY(0deg); }
      }

로그인 후 복사

html代码：

<p id="stage">
  <p id="rotate">
    <p id="ring-1" class="ring"></p>
    <p id="ring-2" class="ring"></p>
    <p id="ring-3" class="ring"></p>
  </p>
</p>

로그인 후 복사

js代码：

const POSTERS_PER_ROW = 12;
const RING_RADIUS = 200;

function setup_posters (row){
    var posterAngle = 360 / POSTERS_PER_ROW;
    for (var i = 0; i < POSTERS_PER_ROW; i ++) {
      var poster = document.createElement(&#39;p&#39;);
      poster.className = &#39;poster&#39;;
      
      var transform = &#39;rotateY(&#39; + (posterAngle * i) + &#39;deg) translateZ(&#39; + RING_RADIUS + &#39;px)&#39;;
      poster.style.webkitTransform = transform;
      
      var content = poster.appendChild(document.createElement(&#39;p&#39;));
      content.textContent = i;
      row.appendChild(poster);
    }
}

function init (){
    setup_posters(document.getElementById(&#39;ring-1&#39;));
    setup_posters(document.getElementById(&#39;ring-2&#39;));
    setup_posters(document.getElementById(&#39;ring-3&#39;));
}

window.addEventListener(&#39;load&#39;, init, false);

로그인 후 복사

위 내용은 CSS3 애니메이션이 '...' 로딩 애니메이션 효과를 구현하는 방법 정보(1)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!