css3，qq企鹅动画

时间：2023-10-11 05:07:02 二极管ppm3fd201e0

1、效果图：

2、设计思想：

（1）整个QQ企鹅有头、左眼、右眼、嘴、围巾、胃、左手、右手、左脚和右脚。

（2）

头部包含左右眼和嘴；

：左右眼里面有三层元素：眼睛的底色部分、眼睛的黑色瞳孔、以及眼白。

：嘴部包含嘴唇。

（3）

：围巾有两部分，一部分是围巾，另一部分是胃。

左右手部分贴在肚子上，定位方法是absolut。

：左右脚有两部分：一是：

一是：

上脚掌。

(4)移动鼠标QQ企鹅卡通形象，QQ企鹅的嘴会消失，眼睛会变小，

，这里使用的是CSS中的Transition，过渡时间为1s。

3.实验总结:

只使用css在设计卡通动画时，首先要做的是分析卡通形象的哪些部分HTML在这些部分写标签，然后css调整这些标签，呈现出更好的卡通象。要学好基础知识，熟悉掌握。

4、代码

             QQ企鹅

                                          

    

        

    

    

        

    









CSS：



        * {

            margin: 0;

            padding: 0;

        }



        div {

            position: absolute;

        }



        .qq_body {

            width: 470px;

            height: 540px;

            left: 500px;

            top: 100px;

        }

        /*QQ头部*/



        .head {

            z-index: 0;

            left: 65px;

            top: 0;

            width: 345px;

            height: 367px;

            background: #19161A;

            border-radius: 50%;

        }

        /*QQ眼睛*/



        .lefteye,.righteye {

            width: 66px;

            height: 99px;

            border-radius: 50%;

            background: #fff;

            left: 153px;

            top: 76px;

            z-index: 7;

            overflow: hidden;

            -webkit-transition:1s ease;

            -moz-transition:1s ease;

            -webkit-transition-property:all;

            -moz-transition-property:all;

            position:absolute;

        }



       .qq_body:hover .lefteye{

            width: 85px;

            height: 50px;

           border-radius: 40% 60% 40%/60% 60% 40%;

            background: #fff;

            top: 85px;

        }

       .qq_body:hover .righteye{

            width: 85px;

            height: 50px;

            border-radius: 40% 60% 40%/60% 60% 40%;

            background: #fff;

            top: 85px;

        }



        .eyeball {

            width: 30px;

            height: 42px;

            background: #201E1F;

            border-radius: 50%;

            left: 28px;

            top: 34px;

        }



        .eyeball .eyewhite {

            width: 11px;

            height: 18px;

            background: #fff;

            border-radius: 50%;

            left: 12px;

            top: 12px;

        }



        .righteye {

            left: 245px;

        }



        .righteye .eyeball {

            left: 11px;

        }



        .eyeshadowwhite {

            width: 65px;

            height: 54px;

            border-radius: 50%;

            background: rgba(255, 255, 255, 1);

            top: 20px;

        }



        /*QQ嘴巴*/



        .mouth_box {

            width: 344px;

            height: 188px;

            top: 102px;

            left: 66px;

            border-radius: 50%;

            z-index: 6;

            background: #19161A;

        }



        .mouth {

            width: 234px;

            height: 70px;

            border-radius: 50%;

            background: #FC9202;

            left: 52px;

            bottom: 35px;

        }



        .mouth .mark {

            width: 160px;

            height: 84px;

            border: 8px solid #000;

            border-left: 1px solid #000;

            border-right: 1px solid #000;

            border-radius: 50%;

            clip: rect(65px 160px 100px 0);

            left: 32px;

            top: -25px;

            -webkit-transition:1s ease;

            -moz-transition:1s ease;

            -webkit-transition-property:all;

            -moz-transition-property:all;

            position:absolute;

        }

        .qq_body:hover .mouth .mark{

            height: 30px;

            border: 8px solid#000;

        }



        /*QQ身体*/



        .belly {

            width: 385px;

            height: 322px;

            left: 45px;

            top: 185px;

            z-index: 1;

            background: #19161A;

            border-radius: 50%;

        }



        .belly_white {

            width: 315px;

            height: 250px;

            background: #fff;

            border-radius: 50%;

            left: 34px;

            bottom: 10px;

        }

        /*QQ围巾*/



        .scarf {

            width: 355px;

            height: 198px;

            background: red;

            border-radius: 50%;

            z-index: 5;

            left: 60px;

            top: 155px;

            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.4), 0 0 30px rgba(0, 0, 0, 0.3) inset;

        }



        .scarf_d {

            width: 80px;

            height: 110px;

            border-radius: 15px 15px 18px 35px;

            background:red;

            left: 110px;

            top: 325px;

            transform: rotate(15deg);

            -moz-transform: rotate(15deg);

            -webkit-transform: rotate(15deg);

            -o-transform: rotate(15deg);

            z-index: 4;

            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4), 0 0 30px rgba(0, 0, 0, 0.3) inset;

        }

        /*QQ翅膀*/



        .leftwing,.rightwing {

            width: 50px;

            height: 170px;

            background: #1A1624;

            border-radius: 50%;

            top: 270px;

        }



        .leftwing {

            left: 10px;

            transform: rotate(25deg);

            -moz-transform: rotate(25deg);

            -webkit-transform: rotate(25deg);

            -o-transform: rotate(25deg);

        }



        .rightwing {

            right: 10px;

            transform: rotate(-25deg);

            -moz-transform: rotate(-25deg);

            -webkit-transform: rotate(-25deg);

            -o-transform: rotate(-25deg);

        }

        /*QQ脚掌*/



        .leftsole,.rightsole {

            width: 157px;

            height: 82px;

            background: #F07203;

            top: 455px;

            border-radius: 50%;

            border: 3px solid #872E0C;

            box-shadow: 0 0 20px 5px rgba(0, 0, 0, 0.3);

        }



        .leftsole {

            left: 55px;

            transform: rotate(-5deg);

            -moz-transform: rotate(-5deg);

            -webkit-transform: rotate(-5deg);

        }



        .rightsole {

            right: 55px;

            transform: rotate(5deg);

            -moz-transform: rotate(5deg);

            -webkit-transform: rotate(5deg);

        }



        .leftsole .toe,.rightsole .toe {

            width: 60px;

            height: 22px;

            background: #F07203;

            border-radius: 50%;

            border-top: 1px solid #872E0C;

        }



        .leftsole .toe {

            transform: rotate(-20deg);

            -moz-transform: rotate(-20deg);

            -webkit-transform: rotate(-20deg);

            border-left: 3px solid #872E0C;

        }



        .rightsole .toe {

            right: 0;

            transform: rotate(20deg);

            -moz-transform: rotate(20deg);

            -webkit-transform: rotate(20deg);

            border-right: 3px solid #872E0C;

        }

锐单商城拥有海量元器件数据手册、IC替代型号，打造电子元器件IC百科大全！

css3，qq企鹅动画

相关文章