使用纯CSS3人物行走动画实例代码-tutorial css-php.cn

Jadual Kandungan

HTML代码

基本CSS代码

CSS动画相关代码

Rumah

hujung hadapan web

tutorial css

使用纯CSS3人物行走动画实例代码

高洛峰

Mar 20, 2017 pm 03:55 PM

css3

今天分享给大家的是一个用纯CSS3实现的人物行走动画，在没有使用JavaScript的情况下，用CSS3技术将人物行走的姿态描绘得非常逼真。其实动画实现的原理也是比较简单的，将人物行走时的状态分割成多张图片，然后利用CSS3的动画属性将这些图片串联起来形成人物行走动画效果。

使用纯CSS3人物行走动画实例代码

在线演示源码下载

HTML代码

<p id="canvas">
        <p class="sky">
            <p class="cloud-1"></p>
            <p class="cloud-2"></p>
            <p class="cloud-3"></p>
            <p class="cloud-4"></p>
            <p class="cloud-5"></p>
            <p class="cloud-6"></p>
            <p class="cloud-7"></p>
            <p class="cloud-8"></p>
        </p>
        <p class="horizon"></p>
        <p class="ground">
            <p class="sign-best"></p>
            <p class="sign-no-js"></p>
            <p class="sign-lots-of-ps"></p>
            <p class="sign-all-css"></p>
        </p>
        <!-- skeleton and shadow -->
        <p class="shadow"></p>
        <p class="me">

            <p class="torso">
                <p class="left leg">
                    <p class="left thigh">
                        <p class="left shin">
                            <p class="left foot">
                                <p class="left toes"></p>
                            </p>
                        </p>
                    </p>
                </p>
 <!-- left leg -->

                <p class="right leg">
                    <p class="right thigh">
                        <p class="right shin">
                            <p class="right foot">
                                <p class="right toes"></p>
                            </p>
                        </p>
                    </p>
                </p>
 <!-- right leg -->

                <p class="left arm">
                    <p class="left bicep">
                        <p class="left forearm"></p>
                    </p>
                </p>
 <!-- left arm -->

                <p class="right arm">
                    <p class="right bicep">
                        <p class="right forearm"></p>
                    </p>
                </p>
 <!-- right arm -->

            </p>
 <!-- torso -->
        </p>
 <!-- me -->

        <p class="overlay"></p>
    </p>

Salin selepas log masuk

基本CSS代码

#canvas {
    height: 600px;
    width: 760px;
    margin: 0;
    padding: 0;
    position: relative;
    overflow: hidden;
}

#canvas p {
    position: absolute;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    -ms-animation-iteration-count: infinite;
    -o-animation-iteration-count: infinite;
    animation-iteration-count: infinite;

    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    -ms-animation-timing-function: linear;
    -o-animation-timing-function: linear;
    animation-timing-function: linear;
}

#canvas:target p:not(.overlay) {
    border: 1px solid black;
}

#canvas:target p.me p{
    background: rgba(255, 255, 255, 0.25);
}

.me {
    top: 50px; left: 350px;
    -webkit-animation-name: me;
    -moz-animation-name: me;
    -ms-animation-name: me;
    -o-animation-name: me;
    animation-name: me;
}

.me, .me p {
    background-repeat: no-repeat;
    -webkit-animation-duration: 1750ms;
    -moz-animation-duration: 1750ms;
    -ms-animation-duration: 1750ms;
    -o-animation-duration: 1750ms;
    animation-duration: 1750ms;
}

.torso {
    width: 86px; height: 275px;
    background-image: url(images/me/torso.png);
}

.arm {
    left: 12px;
    -webkit-transform-origin: 20px 10px;
    -moz-transform-origin: 20px 10px;
    -ms-transform-origin: 20px 10px;
    -o-transform-origin: 20px 10px;
    transform-origin: 20px 10px;
}

.right.arm {
    top: 93px;
    -webkit-animation-name: right-bicep;
    -moz-animation-name: right-bicep;
    -ms-animation-name: right-bicep;
    -o-animation-name: right-bicep;
    animation-name: right-bicep;
}
.left.arm {
    top: 87px;
    -webkit-animation-name: left-bicep;
    -moz-animation-name: left-bicep;
    -ms-animation-name: left-bicep;
    -o-animation-name: left-bicep;
    animation-name: left-bicep;
}

.bicep {
    height: 124px; width: 51px;
}

.right.bicep { background-image: url(images/me/right-bicep.png); }
.left.bicep { background-image: url(images/me/left-bicep.png); }

.forearm {
    top: 108px; left: 14px;
    width: 36px; height: 121px;
    -webkit-transform-origin: 3px 7px;
    -moz-transform-origin: 3px 7px;
    -ms-transform-origin: 3px 7px;
    -o-transform-origin: 3px 7px;
    transform-origin: 3px 7px;
}

.right.forearm {
    background-image: url(images/me/right-forearm.png);
    -webkit-animation-name: right-forearm;
    -moz-animation-name: right-forearm;
    -ms-animation-name: right-forearm;
    -o-animation-name: right-forearm;
    animation-name: right-forearm;
}

.left.forearm {
    background-image: url(images/me/left-forearm.png);
    -webkit-animation-name: left-forearm;
    -moz-animation-name: left-forearm;
    -ms-animation-name: left-forearm;
    -o-animation-name: left-forearm;
    animation-name: left-forearm;
}

.leg {
    left: 6px;
    -webkit-transform-origin: 30px 20px;
    -moz-transform-origin: 30px 20px;
    -ms-transform-origin: 30px 20px;
    -o-transform-origin: 30px 20px;
    transform-origin: 30px 20px;
    -webkit-animation-name: thigh;
    -moz-animation-name: thigh;
    -ms-animation-name: thigh;
    -o-animation-name: thigh;
    animation-name: thigh;
}

.right.leg {
    top: 235px;
    -webkit-animation-name: right-thigh;
    -moz-animation-name: right-thigh;
    -ms-animation-name: right-thigh;
    -o-animation-name: right-thigh;
    animation-name: right-thigh;
}

.left.leg {
    top: 225px;
    -webkit-animation-name: left-thigh;
    -moz-animation-name: left-thigh;
    -ms-animation-name: left-thigh;
    -o-animation-name: left-thigh;
    animation-name: left-thigh;
}

.thigh {
    width: 70px; height: 145px;
}

.left.thigh { background-image: url(images/me/left-thigh.png); }
.right.thigh { background-image: url(images/me/right-thigh.png); }

.shin {
    top: 115px;
    width: 50px; height: 170px;
    background-image: url(images/me/shin.png);
    -webkit-transform-origin: 30px 25px;
    -moz-transform-origin: 30px 25px;
    -ms-transform-origin: 30px 25px;
    -o-transform-origin: 30px 25px;
    transform-origin: 30px 25px;
}

.right.shin {
    -webkit-animation-name: right-shin;
    -moz-animation-name: right-shin;
    -ms-animation-name: right-shin;
    -o-animation-name: right-shin;
    animation-name: right-shin;
}
.left.shin {
    -webkit-animation-name: left-shin;
    -moz-animation-name: left-shin;
    -ms-animation-name: left-shin;
    -o-animation-name: left-shin;
    animation-name: left-shin;
}

.foot {
    top: 155px; left: 2px;
    width: 67px; height: 34px;
    background-image: url(images/me/foot.png);
    -webkit-transform-origin: 0 50%;
    -moz-transform-origin: 0 50%;
    -ms-transform-origin: 0 50%;
    -o-transform-origin: 0 50%;
    transform-origin: 0 50%;
}

.right.foot {
    -webkit-animation-name: right-foot;
    -moz-animation-name: right-foot;
    -ms-animation-name: right-foot;
    -o-animation-name: right-foot;
    animation-name: right-foot;
}
.left.foot {
    -webkit-animation-name: left-foot;
    -moz-animation-name: left-foot;
    -ms-animation-name: left-foot;
    -o-animation-name: left-foot;
    animation-name: left-foot;
}

.toes {
    top: 9px; left: 66px;
    width: 28px; height: 25px;
    background-image: url(images/me/toes.png);
    -webkit-transform-origin: 0% 100%;
    -moz-transform-origin: 0% 100%;
    -ms-transform-origin: 0% 100%;
    -o-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
}

.right.toes {
    -webkit-animation-name: right-toes;
    -moz-animation-name: right-toes;
    -ms-animation-name: right-toes;
    -o-animation-name: right-toes;
    animation-name: right-toes;
}
.left.toes {
    -webkit-animation-name: left-toes;
    -moz-animation-name: left-toes;
    -ms-animation-name: left-toes;
    -o-animation-name: left-toes;
    animation-name: left-toes;
}

.shadow {
    width: 200px; height: 70px;
    left: 270px; bottom: 5px;
    background-image: url(images/misc/shadow.png);
    -webkit-animation-name: shadow;
    -moz-animation-name: shadow;
    -ms-animation-name: shadow;
    -o-animation-name: shadow;
    animation-name: shadow;
}

/* setting proper z-indexes so that limbs show up correctly */

p.right.arm { z-index: 1; }
p.left.arm { z-index: -3; }
p.arm > p.bicep > p.forearm { z-index: -1; }

p.right.leg { z-index: -1; }
p.left.leg { z-index: -2; }
p.leg > p.thigh > p.shin { z-index: -1; }

.overlay {
    width: 100%; height: 100%;
    background: url(images/misc/gradient-left.png) repeat-y top left,
                url(images/misc/gradient-right.png) repeat-y top right;
}

.sky p {
    background-repeat: no-repeat;
    -webkit-animation-name: prop-1200;
    -moz-animation-name: prop-1200;
    -ms-animation-name: prop-1200;
    -o-animation-name: prop-1200;
    animation-name: prop-1200;
}

.cloud-1, .cloud-2 {
    width: 82px; height: 90px;
    background-image: url(images/clouds/1.png);
    -webkit-animation-duration: 120s;
    -moz-animation-duration: 120s;
    -ms-animation-duration: 120s;
    -o-animation-duration: 120s;
    animation-duration: 120s;
}

.cloud-3, .cloud-4 {
    top: 70px;
    width: 159px; height: 90px;
    background-image: url(images/clouds/2.png);
    -webkit-animation-duration: 80s;
    -moz-animation-duration: 80s;
    -ms-animation-duration: 80s;
    -o-animation-duration: 80s;
    animation-duration: 80s;
}

.cloud-5, .cloud-6 {
    top: 30px;
    width: 287px; height: 62px;
    background-image: url(images/clouds/3.png);
    -webkit-animation-duration: 140s;
    -moz-animation-duration: 140s;
    -ms-animation-duration: 140s;
    -o-animation-duration: 140s;
    animation-duration: 140s;
}

.cloud-7, .cloud-8 {
    top: 100px;
    width: 94px; height: 81px;
    background-image: url(images/clouds/4.png);
    -webkit-animation-duration: 90s;
    -moz-animation-duration: 90s;
    -ms-animation-duration: 90s;
    -o-animation-duration: 90s;
    animation-duration: 90s;
}

.cloud-1 { left: 0px; }
.cloud-2 { left: 1200px; }

.cloud-3 { left: 250px; }
.cloud-4 { left: 1450px; }

.cloud-5 { left: 500px; }
.cloud-6 { left: 1700px; }

.cloud-7 { left: 950px; }
.cloud-8 { left: 2150px; }

.horizon {
    top: 350px;
    width: 1800px; height: 50px;
    background: url(images/misc/horizon.png) repeat-x;
    -webkit-animation-name: prop-600;
    -moz-animation-name: prop-600;
    -ms-animation-name: prop-600;
    -o-animation-name: prop-600;
    animation-name: prop-600;
    -webkit-animation-duration: 40s;
    -moz-animation-duration: 40s;
    -ms-animation-duration: 40s;
    -o-animation-duration: 40s;
    animation-duration: 40s;
}

.ground p {
    background-repeat: no-repeat;
    -webkit-animation-name: prop-2000;
    -moz-animation-name: prop-2000;
    -ms-animation-name: prop-2000;
    -o-animation-name: prop-2000;
    animation-name: prop-2000;
}

.sign-all-css {
    width: 160px; height: 188px;
    top: 325px; left: 1600px;
    background-image: url(images/signs/all-css.png);
    -webkit-animation-duration: 35s;
    -moz-animation-duration: 35s;
    -ms-animation-duration: 35s;
    -o-animation-duration: 35s;
    animation-duration: 35s;
}

.sign-lots-of-ps {
    width: 102px; height: 120px;
    top: 345px; left: 1150px;
    background-image: url(images/signs/lots-of-ps.png);
    -webkit-animation-duration: 56s;
    -moz-animation-duration: 56s;
    -ms-animation-duration: 56s;
    -o-animation-duration: 56s;
    animation-duration: 56s;
}

.sign-no-js {
    width: 65px; height: 77px;
    top: 348px; left: 1150px;
    background-image: url(images/signs/no-js.png);
    -webkit-animation-duration: 71s;
    -moz-animation-duration: 71s;
    -ms-animation-duration: 71s;
    -o-animation-duration: 71s;
    animation-duration: 71s;
}

.sign-best {
    width: 43px; height: 50px;
    top: 350px; left: 1000px;
    background-image: url(images/signs/best.png);
    -webkit-animation-duration: 95s;
    -moz-animation-duration: 95s;
    -ms-animation-duration: 95s;
    -o-animation-duration: 95s;
    animation-duration: 95s;
}

Salin selepas log masuk

CSS动画相关代码

@-webkit-keyframes me {
    0% { -webkit-transform:   rotate(5deg) translate( 5px,   0px); }
    25% { -webkit-transform:  rotate(5deg) translate(-5px, -14px); }
    50% { -webkit-transform:  rotate(5deg) translate( 5px,   0px); }
    75% { -webkit-transform:  rotate(5deg) translate(-5px, -14px); }
    100% { -webkit-transform: rotate(5deg) translate( 5px,   0px); }
}

@-webkit-keyframes right-bicep {
    0%   { -webkit-transform: rotate(26deg); }
    50%  { -webkit-transform: rotate(-20deg); }
    100% { -webkit-transform: rotate(26deg); }
}

@-webkit-keyframes left-bicep {
    0%   { -webkit-transform: rotate(-20deg); }
    50%  { -webkit-transform: rotate(26deg); }
    100% { -webkit-transform: rotate(-20deg); }
}

@-webkit-keyframes right-forearm {
    0%   { -webkit-transform: rotate(-10deg); }
    50%  { -webkit-transform: rotate(-45deg); }
    100% { -webkit-transform: rotate(-10deg); }
}

@-webkit-keyframes left-forearm {
    0%   { -webkit-transform: rotate(-45deg); }
    50%  { -webkit-transform: rotate(-10deg); }
    100% { -webkit-transform: rotate(-45deg); }
}

@-webkit-keyframes right-thigh {
    0%   { -webkit-transform: rotate(-45deg); }
    50%  { -webkit-transform: rotate(10deg); }
    100% { -webkit-transform: rotate(-45deg); }
}

@-webkit-keyframes left-thigh {
    0%   { -webkit-transform: rotate(10deg); }
    50%  { -webkit-transform: rotate(-45deg); }
    100% { -webkit-transform: rotate(10deg); }
}

@-webkit-keyframes right-shin {
    0%   { -webkit-transform: rotate(30deg); }
    25%  { -webkit-transform: rotate(20deg); }
    50%  { -webkit-transform: rotate(20deg); }
    75%  { -webkit-transform: rotate(85deg); }
    100% { -webkit-transform: rotate(30deg); }
}

@-webkit-keyframes left-shin {
    0%   { -webkit-transform: rotate(20deg); }
    25%  { -webkit-transform: rotate(85deg); }
    50%  { -webkit-transform: rotate(30deg); }
    75%  { -webkit-transform: rotate(20deg); }
    100% { -webkit-transform: rotate(20deg); }
}

@-webkit-keyframes right-foot {
    0%   { -webkit-transform: rotate(-5deg); }
    25%  { -webkit-transform: rotate(-7deg); }
    50%  { -webkit-transform: rotate(-16deg); }
    75%  { -webkit-transform: rotate(-10deg); }
    100% { -webkit-transform: rotate(-5deg); }
}

@-webkit-keyframes left-foot {
    0%   { -webkit-transform: rotate(-16deg); }
    25%  { -webkit-transform: rotate(-10deg); }
    50%  { -webkit-transform: rotate(-5deg); }
    75%  { -webkit-transform: rotate(-7deg); }
    100% { -webkit-transform: rotate(-16deg); }
}

@-webkit-keyframes right-toes {
    0%   { -webkit-transform: rotate(0deg); }
    25%  { -webkit-transform: rotate(-10deg); }
    50%  { -webkit-transform: rotate(-10deg); }
    75%  { -webkit-transform: rotate(-25deg); }
    100% { -webkit-transform: rotate(0deg); }
}

@-webkit-keyframes left-toes {
    0%   { -webkit-transform: rotate(-10deg); }
    25%  { -webkit-transform: rotate(-25deg); }
    50%  { -webkit-transform: rotate(0deg); }
    75%  { -webkit-transform: rotate(-10deg); }
    100% { -webkit-transform: rotate(-10deg); }
}

@-webkit-keyframes shadow {
    0%   { opacity: 1; }
    25%  { opacity: 0.75; }
    50%  { opacity: 1; }
    75%  { opacity: 0.75; }
    100% { opacity: 1; }
}

@-webkit-keyframes prop-600 {
    0%   { -webkit-transform: translateX(0px); }
    100% { -webkit-transform: translateX(-600px); }
}

@-webkit-keyframes prop-1200 {
    0%   { -webkit-transform: translateX(0px); }
    100% { -webkit-transform: translateX(-1200px); }
}

@-webkit-keyframes prop-2000 {
    0%   { -webkit-transform: translateX(0px); }
    100% { -webkit-transform: translateX(-2000px); }
}

Salin selepas log masuk

Atas ialah kandungan terperinci 使用纯CSS3人物行走动画实例代码. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

Menjana ai hentai secara percuma.

Tunjukkan Lagi

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)

3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Tetapan grafik terbaik

3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Penyelesaian Riddle Seashell

2 minggu yang lalu By DDD

R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa

3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

WWE 2K25: Cara Membuka Segala -galanya Di Myrise

3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Tunjukkan Lagi

Alat panas

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Tunjukkan Lagi

Topik panas

Di manakah pintu masuk log masuk untuk e-mel gmail?

7467

Tutorial CakePHP

1376

Apakah format nama akaun stim

kunci pengaktifan win11 kekal

Sambungan NYT menunjukkan dan jawapan

Tunjukkan Lagi

Related knowledge

Bagaimana untuk mencapai kesan gelombang dengan CSS3 tulen? (contoh kod) Jun 28, 2022 pm 01:39 PM

Bagaimana untuk mencapai kesan gelombang dengan CSS3 tulen? Artikel ini akan memperkenalkan kepada anda cara menggunakan animasi SVG dan CSS untuk mencipta kesan gelombang Saya harap ia akan membantu anda!

Gunakan CSS dengan mahir untuk merealisasikan pelbagai butang berbentuk pelik (dengan kod) Jul 19, 2022 am 11:28 AM

Artikel ini akan menunjukkan kepada anda cara menggunakan CSS untuk melaksanakan pelbagai butang berbentuk pelik yang kerap muncul. Saya harap ia akan membantu anda!

Bagaimana untuk menyembunyikan elemen dalam css tanpa mengambil ruang Jun 01, 2022 pm 07:15 PM

Dua kaedah: 1. Menggunakan atribut paparan, cuma tambah gaya "display:none;" pada elemen. 2. Gunakan kedudukan dan atribut teratas untuk menetapkan kedudukan mutlak elemen untuk menyembunyikan elemen. Cuma tambahkan gaya "position:absolute;top:-9999px;".

Bagaimana untuk melaksanakan sempadan renda dalam css3 Sep 16, 2022 pm 07:11 PM

Dalam CSS, anda boleh menggunakan atribut imej sempadan untuk mencapai sempadan renda. Atribut imej sempadan boleh menggunakan imej untuk membuat sempadan, iaitu, menambah imej latar belakang ke sempadan Anda hanya perlu menentukan imej latar belakang sebagai gaya renda; lebar sempadan imej ke dalam. Sama ada permulaan diulang;".

Ternyata karusel teks dan karusel imej juga boleh direalisasikan menggunakan CSS tulen! Jun 10, 2022 pm 01:00 PM

Bagaimana untuk mencipta karusel teks dan karusel imej? Perkara pertama yang semua orang fikirkan ialah sama ada untuk menggunakan js Malah, karusel teks dan karusel imej juga boleh direalisasikan menggunakan CSS tulen. Saya harap ia akan membantu semua orang.

Bagaimana untuk membesarkan imej dengan mengklik tetikus dalam css3 Apr 25, 2022 pm 04:52 PM

Kaedah pelaksanaan: 1. Gunakan pemilih ":aktif" untuk memilih keadaan klik tetikus pada gambar 2. Gunakan atribut transform dan fungsi skala() untuk mencapai kesan pembesaran gambar, sintaks "img:active {transform; : skala(pembesaran paksi-x, y Pembesaran paksi);}".

Adakah kesan animasi css3 mempunyai ubah bentuk? Apr 28, 2022 pm 02:20 PM

Kesan animasi dalam css3 mempunyai ubah bentuk; anda boleh menggunakan "animasi: atribut animasi @keyframes ..{..{transform: transformation attribute}}" untuk mencapai kesan animasi ubah bentuk Atribut animasi digunakan untuk menetapkan gaya animasi, dan atribut transform digunakan untuk menetapkan gaya ubah bentuk.

css3 apakah itu susun atur penyesuaian Jun 02, 2022 pm 12:05 PM

Reka letak adaptif, juga dikenali sebagai "susun atur responsif", merujuk kepada susun atur halaman web yang boleh mengecam lebar skrin secara automatik dan membuat pelarasan yang sepadan dengan halaman web sedemikian boleh serasi dengan berbilang terminal berbeza dan bukannya membuat versi khusus untuk setiap terminal. . Reka letak penyesuaian dilahirkan untuk menyelesaikan masalah penyemakan imbas web mudah alih, dan boleh memberikan pengalaman pengguna yang baik untuk pengguna yang menggunakan terminal yang berbeza.

See all articles