CSS로 이미지 확대 애니메이션을 구현하는 방법

방법: 1. "@keyframes 애니메이션 이름 {}" 규칙과 "transform:scale(scale);" 문을 사용하여 확대 및 축소 애니메이션을 만듭니다. 2. "그림 요소 {animation; : 애니메이션 이름 시간 무한;}" 문 그림 요소에 스케일 애니메이션이 적용됩니다.

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

CSS에서는 애니메이션 속성, "@keyframes" 규칙 및 변환: scale()을 사용하여 이미지 확대 애니메이션을 구현할 수 있습니다.

예제 1:

<div class="ballon"></div>

/*css部分*/
   @keyframes scaleDraw {  /*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
            0%{
                transform: scale(1);  /*开始为原始大小*/
            }
            25%{
                transform: scale(1.1); /*放大1.1倍*/
            }
            50%{
                transform: scale(1);
            }
            75%{
                transform: scale(1.1);
            }
        }
    .ballon{
            width: 150px;
            height: 200px;
            background: url("images/balloon.png");
            background-size: 150px 200px;
            -webkit-animation-name: scaleDraw; /*关键帧名称*/
            -webkit-animation-timing-function: ease-in-out; /*动画的速度曲线*/
            -webkit-animation-iteration-count: infinite;  /*动画播放的次数*/
            -webkit-animation-duration: 5s; /*动画所花费的时间*/
        }

위 속성은 함께 쓸 수도 있습니다.

animation: scaleDraw 5s ease-in-out infinite;
-webkit-animation: scaleDraw 5s ease-in-out infinite;

효과:

예제 2:

 <div class="live">
         <img src="images/live.png" alt="">
         <span></span>
         <span></span>
 </div>

.live{
           position: relative;
           width: 100px;
           height: 100px;
       }
       .live img{
           width: 100px;
           height: 100px;
           z-index: 0;
       }
        @keyframes living {
            0%{
                transform: scale(1);
                opacity: 0.5;  
            }
            50%{
                transform: scale(1.5);  
                opacity: 0;   /*圆形放大的同时，透明度逐渐减小为0*/
            }
            100%{
                transform: scale(1);
                opacity: 0.5;
            }
        }
        .live span{
            position: absolute;
            width: 100px;
            height: 100px;
            left: 0;
            bottom: 0;
            background: #fff;
            border-radius: 50%;
            -webkit-animation: living 3s linear infinite;
            z-index: -1;
        }
        .live span:nth-child(2){
            -webkit-animation-delay: 1.5s; /*第二个span动画延迟1.5秒*/
        }

핵심은 애니메이션의 지연 속성을 사용하려면 원의 두 레이어의 애니메이션 관련 속성은 가장 바깥쪽 원에 애니메이션 지연 속성 세트가 있다는 점을 제외하면 기본적으로 동일합니다

(동영상 공유 학습: css 동영상 튜토리얼)

위 내용은 CSS로 이미지 확대 애니메이션을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!