简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
집 > 웹 프론트엔드 > CSS 튜토리얼 > 본문

귀여운 미니언 애니메이션 샘플 코드의 CSS3 구현

高洛峰
풀어 주다： 2017-03-07 15:04:41
원래의
2617명이 탐색했습니다.

CSS3 애니메이션을 볼 때마다 한 번 해보고 싶습니다. 한 달 전에 Bai Shu 형제님의 블로그를 읽다가 갑자기 아이디어가 떠올라 그가 제공한 데모를 시도해 보았는데, 기분이 좋았어! 아래 그림은 데모에서 제공한 애니메이션 프레임 디자인 초안을 보여줍니다.

귀여운 미니언 애니메이션 샘플 코드의 CSS3 구현

나도 DIY 애니메이션을 만들고 싶지만 PS를 안다고 해서 디자인을 할 수 있는 건 아니다. 애니메이션 디자인 초안. [미쳤어]… 그래서 자료를 찾으러 Zoku.com에 갔는데, 결국 사진 한 장만 찾았습니다:

귀여운 미니언 애니메이션 샘플 코드의 CSS3 구현

CSS3 애니메이션을 만들고 싶다고 생각하니, 하하... 어떡하지? - 안돼, 그냥 파! (여기서는 뿌리지 마세요. 정말 재료가 없습니다)

...최종 효과는 이렇게 생겼습니다. 모바일 단말기에서 본 예시입니다! (gif가 붙어 있으니 그냥 감상하시고, 싫으시면 뿌리지 마세요...):

귀여운 미니언 애니메이션 샘플 코드의 CSS3 구현

그래 사실은 주요 목적은 지식 포인트를 배우는 것입니다.

이 데모에 포함된 지식 포인트는 다음과 같습니다:

perspective

perspective-origin

변형 스타일

변형 원본

애니메이션

@keyframes

translate3d,translate://www.php.cn/

이런 경우에는 이렇게 답답한 애니메이션을 어떻게 구현했을까요? 연습할 수 있도록 코드를 공유하겠습니다:

html 구조: 

<body>  
    <p class="title">  
        <p>小黄人</p>  
    </p>  
    <p class="wrapper">  
        <p class="littleH">  
            <p class="light">  
                <p class="light_left">  
                    <p>欢迎欢迎，热烈欢迎</p>  
                </p>  
                <p class="light_right">  
                    <p>欢迎欢迎，热烈欢迎</p>  
                </p>  
                <p class="load"></p>  
            </p>  
            <p class="littleH_body">  
                <p class="leftHair"></p>  
                <p class="rightHair"></p>  
                <p class="leftBlackeye"></p>  
                <p class="leftWhiteeye"></p>  
                <p class="rightBlackeye"></p>  
                <p class="rightWhiteeye"></p>  
                <p class="mouse"></p>  
                <p class="leftFoot"></p>  
                <p class="rightFoot"></p>  
            </p>  
        </p>  
    </p>  
</body>
로그인 후 복사

css 코드: 

body{   
            margin: 0;   
            padding: 0;   
            width: 100%;   
            height: 100%;   
        }   
        .title p{   
            text-align: center;   
            font-size: 100px;   
            font-weight: bolder;   
            color:#333;   
        }   
        .wrapper{   
            margin: 400px auto;   
        }   
        .littleH{   
            position: relative;   
            -webkit-perspective: 800;   
            -webkit-perspective-origin: 50% 50%;   
        }   
        .light{   
            -webkit-transform-style: preserve-3d;   
        }   
        .light .light_left,.light .light_right{   
            position: absolute;   
            width: 100%;   
            height: 300px;   
            background: lightblue;   
            -webkit-transform: rotateY(90deg) translate3d(0,300px,-200px);   
            -webkit-animation: changeBgColor 2s linear infinite;   
        }   
        .light .light_right{   
            -webkit-transform: rotateY(-90deg) translate3d(0,300px,-215px);   
            -webkit-animation-delay: 1s;   
        }   
        @-webkit-keyframes changeBgColor{   
            0%,100%{   
                background: lightblue;   
            }   
            50%{   
                background: lightgreen;   
            }   
        }   
        .light .light_left p,.light .light_right p{   
            color:#fff;   
            font-size: 80px;   
            font-weight: bold;   
            margin-left: 100px;   
        }   
        .light .light_right p{   
            float: rightright;   
            margin-right: 100px;   
        }   
        .light .load{   
            position: absolute;   
            width: 500px;   
            height: 1500px;   
            background: -webkit-gradient(linear, left top, left bottombottom, color-stop(51%,#aadbdc), color-stop(52%,#ffffff));   
            background: -webkit-linear-gradient(top, #aadbdc 51%,#ffffff 52%);   
            background: linear-gradient(to bottombottom, #aadbdc 51%,#ffffff 52%);    
            background-size: 350px 80px;   
            -webkit-animation: move_load 5s linear infinite;   
        }   
        @-webkit-keyframes move_load{   
            0%{   
                -webkit-transform:rotateX(90deg) translate3d(250px,0,0);   
            }   
            100%{   
                -webkit-transform:rotateX(90deg) translate3d(250px,-320px,0);   
            }   
        }   
        .littleH_body{   
            position: absolute;   
            left:50%;   
            margin-left: -157px;   
            width: 314px;   
            height: 425px;   
            background: url(1.png);   
            -webkit-transform-style: preserve-3d;   
        }   
        .leftHair{   
            position: absolute;   
            rightright: 58px;   
            top:-5px;   
            width: 100px;   
            height: 17px;   
            background: url(lefthair.png);   
            -webkit-transform-origin: left bottombottom;   
            -webkit-animation: lefthair 1s .3s ease-in-out infinite;   
  
        }   
        @-webkit-keyframes lefthair{   
            0%,10%,40%,100%{   
                -webkit-transform: rotate(0deg) translateY(1px);   
            }   
            30%{   
                -webkit-transform: rotate(-3deg) translateY(1px);   
            }   
        }   
        .rightHair{   
            position: absolute;   
            left: 58px;   
            top:-8px;   
            width: 100px;   
            height: 16px;   
            background: url(righthair.png);   
            -webkit-transform-origin: rightright bottombottom;   
            -webkit-animation: righthair 1s ease-in-out infinite;   
        }   
        @-webkit-keyframes righthair{   
            0%,10%,40%,100%{   
                -webkit-transform: rotate(0deg) translateY(1px);   
            }   
            30%{   
                -webkit-transform: rotate(4deg) translateY(1px);   
            }   
        }   
        .leftBlackeye{   
            position: absolute;   
            rightright: 87px;   
            top:102px;   
            width: 43px;   
            height: 43px;   
            background: url(eyeblack.png);   
            -webkit-animation: leftblackeye 5s ease-in infinite;   
        }   
        @-webkit-keyframes leftblackeye{   
            0%,20%,50%,70%,100%{   
                -webkit-transform: translateX(0px);   
            }   
            30%,40%{   
                -webkit-transform: translateX(15px);   
            }   
            80%,90%{   
                -webkit-transform: translateX(-15px);   
            }   
        }   
        .leftWhiteeye{   
            position: absolute;   
            rightright: 92px;   
            top:110px;   
            width: 20px;   
            height: 21px;   
            background: url(whiteeye.png);   
            background-size: 95% 95%;   
            background-repeat: no-repeat;   
            -webkit-animation: leftwhiteeye 5s ease-in infinite;   
        }   
        @-webkit-keyframes leftwhiteeye{   
            0%,20%,50%,70%,100%{   
                -webkit-transform: translateX(0px);   
            }   
            30%,40%{   
                -webkit-transform: translate3d(15px,3px,0);   
            }   
            80%,90%{   
                -webkit-transform: translate3d(-30px,3px,0);   
            }   
        }   
        .rightBlackeye{   
            position: absolute;   
            left: 84px;   
            top:102px;   
            width: 43px;   
            height: 43px;   
            background: url(eyeblack.png);   
            -webkit-animation: rightblackeye 5s ease-in infinite;   
        }   
        @-webkit-keyframes rightblackeye{   
            0%,20%,50%,70%,100%{   
                -webkit-transform: translateX(0px);   
            }   
            30%,40%{   
                -webkit-transform: translateX(15px);   
            }   
            80%,90%{   
                -webkit-transform: translateX(-15px);   
            }   
        }   
        .rightWhiteeye{   
            position: absolute;   
            left: 102px;   
            top:112px;   
            width: 20px;   
            height: 21px;   
            background: url(whiteeye.png);   
            background-size: 95% 95%;   
            background-repeat: no-repeat;   
            -webkit-animation: rightwhiteeye 5s ease-in infinite;   
        }   
        @-webkit-keyframes rightwhiteeye{   
            0%,20%,50%,70%,100%{   
                -webkit-transform: translateX(0px);   
            }   
            30%,40%{   
                -webkit-transform: translate3d(15px,3px,0);   
            }   
            80%,90%{   
                -webkit-transform: translate3d(-30px,3px,0);   
            }   
        }   
        .mouse{   
            position: absolute;   
            left: 126px;   
            top:210px;   
            width: 71px;   
            height: 30px;   
            background: url(mouse.png);   
            -webkit-transform-origin: center top;   
            -webkit-animation: mouse 5s ease-in-out infinite;   
        }   
        @-webkit-keyframes mouse{   
            40%{   
                -webkit-transform: rotate(-15deg) translateX(22px);   
            }   
            0%,20%,60%,100%{   
                -webkit-transform: rotate(0deg);   
            }   
        }   
        .leftFoot{   
            position: absolute;   
            rightright: 85px;   
            top:424px;   
            width: 68px;   
            height: 43px;   
            background: url(leftfoot.png);   
            -webkit-transform-origin: left top;   
            -webkit-animation: leftfoot .6s ease-in-out infinite;   
        }   
        @-webkit-keyframes leftfoot{   
            0%,50%,100%{   
                -webkit-transform: rotate(0deg);   
            }   
            80%{   
                -webkit-transform: rotate(-10deg);   
            }   
        }   
        .rightFoot{   
            position: absolute;   
            left: 85px;   
            top:424px;   
            width: 68px;   
            height: 43px;   
            background: url(rightfoot.png);   
            margin-bottom: 100px;   
            -webkit-transform-origin: rightright top;   
            -webkit-animation: rightfoot .6s ease-in-out infinite;   
        }   
        @-webkit-keyframes rightfoot{   
            0%,50%,100%{   
                -webkit-transform: rotate(0deg);   
            }   
  
            30%{   
                -webkit-transform: rotate(10deg);   
            }   
        }
로그인 후 복사

코드 여전히 매우 이해하기 쉽습니다. 단점은 그림이 병합되지 않으므로 그냥 만드십시오. 주요 목적은 CSS3 애니메이션(특히 3D)의 지식 포인트를 배우고 연습하는 것입니다. 연습을 많이 할수록 더 확실하게 기억하고 더 원활하게 사용할 수 있습니다. 이것은 시작에 불과합니다...

PS: 제가 잘라낸 사진을 첨부합니다

1.png

귀여운 미니언 애니메이션 샘플 코드의 CSS3 구현righthair.png

lefthair.png

eyeblack.png

whiteeye .png

mouse.png

rightfoot.png

leftfoot.png

위 내용은 전체 내용입니다. 이 기사가 모든 사람의 연구에 도움이 되기를 바랍니다. 또한 모든 사람이 PHP 중국어 웹사이트를 지원하기를 바랍니다.

귀여운 미니언 애니메이션 샘플 코드에 대한 CSS3 구현 관련 기사를 더 보려면 PHP 중국어 웹사이트를 주목하세요!

관련 라벨：
css3 动画 미니언즈
원천：php.cn
이전 기사：CSS3는 10가지 로딩 효과 메소드를 구현합니다. 다음 기사：CSS3 속성 선택기의 새로운 기능에 대한 자세한 소개
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
페이지를 모바일 친화적으로 만드시겠습니까? 나는 많은 웹 페이지와 일부 웹 사이트를 가지고 있습니다. 문제는 제가 초보자라는 것입니다. 저는 기본 html5와 css3을 사용하고 있지만 확장, 축소 및 모...
에서 2024-04-01 20:42:38
0
1
259
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！